# 流行框架第一天:Angular简介和入门 ## 开放性讨论 - 为什么这几年前端行业好像突然间多了那么多东西 + 我们现在做的网站不再是简简单单的呈现静态页面,而是一个web应用程序。 + 一大批后端程序员转型为前端,大大提高了前端的水准。 ## Angular简介 - jQuery :库 + 封装了一些常用的方法,我们主动的调用这些方法 -- 提高了代码的利用,以及代码后期的维护 - Angular: 前端框架 + 框架提供了一些结构或者模式, + 我们是根据框架提供的结构或者模式去书写代码 + 由框架帮助我们去执行相应的操作。 ### 什么是 Angular - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开发和维护这个库 - 有了这一类框架就可以轻松构建 SPA 应用程序 - 其核心就是通过指令扩展了 HTML,通过表达式绑定数据到 HTML。 - *Angular不推崇DOM操作,也就是说在NG中几乎找不到任何的DOM操作* #### 什么是 SPA - single page application - 单页应用程序 ### 为什么使用 Angular ### 安装 Angular - 暴力安装: 直接从本地硬盘中复制一个angular.js文件到项目中 - 通过工具安装 + npm 方式 `npm install angular` + bower 方式 'npm install angular' - CDN - 扩展内容 *注意,每一种安装方式,本质都是为了拿到angular.js文件* ### 指令 - angular中以ng-开头的属性叫作指令 - ng-app 告诉angular来管理html代码,管理ng-app所在元素及其子元素。 - ng-click 用来注册点击事件 >var add = document.getElementById('add'); add.onclick=function(){ val = (val-0)+1; // num.value = (num.value - 0) +1 } - ng-model:var num = document.getElementById('num').value - ng-init :进行初始化操作: ng-init="user.name='小明'" ### Angular 表达式 - 就是把ng-model对应的值显示到页面中。 - 语法:两个大括号的形式:{{}} - {{user.name}} - {{'hello'+ user.name}} - {{1+2}} - {{[1,2,3,4]}} ## Angular 基础概念 ### Angular 的核心特性 - 指令 - MVC - 模块化 angular.module() - 双向数据绑定 ### 模块(module) - angular.module('myApp',[]) > 第一个参数是模块的名字 > 第二个参数是一个数组,数组的元素是该模块所依赖其他模块的名字 *注意,即使不依赖任何模块,也需要给第二个参数传递一个空数组* *否则angular.module('myApp')就是去获取名为myApp的模块对象* ### 控制器(controller) - angular.module('myApp',[]).controller('demoController',function($scope){}) > 第一个参数,是控制器的名字 > 第二个参数,是一个回调函数,在回调函数里写我们想要的js代码。 ### 双向数据绑定 - 数据模型的值发生改变,就会导致页面值的改变. 页面值的改变,就会导致数据模型值的改变,这各种相互影响的关系就是双向数据绑定。 - ng-model ### 单向数据绑定 - 使用表达式显示数据模型的值。 ### MVC 思想 #### 什么是 MVC 思想 - M:Model 模型 :数据存储,一些业务逻辑 - V:View 视图 :就是用来展示数据 - C:Controller 控制器: 调度业务逻辑 #### MVVM - M: - V: - VM: ViewModel- $scope ### $watch - 用于监视数据模型的变化(并且只能监视数据模型的变化) - $scope.$watch('数据模型名的字符串形式',function(变化后的值,变化前的值){}) - $scope.$watch里的回调函数会默认执行一次。 ## CDN - 扩展内容 content delivery network 内容分发网络 - 速度快 - 减轻了服务器自身在带宽压力。 ### 相关链接 - AngularJS 1.x 官方网站 + https://angularjs.org/ - AngularJS 2.x 官方网站 + https://angular.io/ - Google Material Design for Angular + https://material.angularjs.org - Angular UI(Angular最大的第三方社区) + http://angular-ui.github.io/ - AngularJS中文社区 + http://www.angularjs.cn/ - AngularJS中文社区提供的文档(不用FQ) + http://docs.angularjs.cn/api + http://www.apjs.net/