为什么要使用Angular
- 总结一句话:为了更少的代码,实现更强劲的功能
- 很多操作都需要dom操作,但是angular中没有那么多的dom操作,这是因为angular帮我们封装了,减少了我们开发人员的dom操作
- 一般在angular中就不会出现jquery了,因为这两种思想正好是相悖的。
- 上面的意义只是皮毛,它真正的意义是:angular又是一场革命,带领前端进入了MVX时代。
- 这就像从手工业转为机械工业一样,以前很多东西都是我么你自己手动去做,现在我们有了gulp,webpack这些自动化构建工具。
Angular的使用
Angular相关资料
- 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/
安装 Angular
- 暴力安装:
- 手动的去github下载安装
- 通过工具安装:
- npm :
npm install angular
- bower:
bower install angular
- CDN
- 本质都为了拿到angular.js这个文件。
理解angular的整个开发流程
- ng-app:告诉angular来管理页面的代码块是什么(ng-app所在元素及其子元素)
- ng-click : 类比成onClick,是用来为当前元素注册点击事件的
ng-click="val = (val-0) + 1"
相当于:
var add = document.getElementById('add');
add.addEventListener('click',function(){
}
- ng-model: 用来获取文本框的值,是于input的value值进行了绑定。
- 改变ng-model的属性值对应的值,文本框的值就会改变,
ng-model = "val";//angular就会帮助我们去创建一个val变量
相当于:
var num = document.getElementById('num').value;
-
ng-init 指令: 用于对ng-model指定的值进行初始化操作
ng-init = "val = 10"
-
ng-controller:我们的业务逻辑,数据模型都要写在这里面
-
$scope:这个就相当于我们所画的途中的数据模型, 在它上面给以挂载变量和方法。
- 表达式: {{}},相当于模板函数中的模板输出
-
在大括号内部写上一个ng-model对应的文本框的值
使用AngularJS的流程
- 借助npm下载到本地
- 在HTML代码中引入Angular.js包
- 在JS代码中通过
angular.module('myApp', [])
注册一个模块 - 在HTML代码中将刚刚定义的模块通过
ng-app="myApp"
指令的方式作用到一个特定的元素上 - 根据当前页面的情况(业务块)划分控制器
- 在HTML代码中将刚刚定义的控制器通过
ng-controller="ControllerName"
作用到特定的元素上 - 建模(根据界面原型抽象一个数据模型)得到一个视图模型(ViewModel)
- 在JS代码中通过
$scope
暴露需要提供到页面的数据成员 - 在HTML代码中将刚刚暴露出来的数据通过类似
ng-model/{{}}/ng-click
之类的指令绑定到特定的元素上 - 在JS中完成业务逻辑(还可以展开)
- 在思想上:
- JQ提高了操作DOM的开发效率
- NG几乎没有任何DOM操作(不是没有,只是不用我们自己操作)
- NG内置一个类似JQ的东西
angular.element()
- Angular 不提倡DOM操作,如果必须使用DOM的话,也不建议再去引用jquery,有内置
如何查看angular离线文档
- angular文档设计的非常好都是一个功能一个功能的js分开的,主模块有1000多kb,这个应该是大家见过的最大的js库了
- 因为angularJS的文档需要引用angularjs的东西,所以要用http-server模块打开的话,必须在文档的根目录启动hs -o
Angular 核心概念
- 模块化
- MVC - 思想
- 指令
- 双向数据绑定
angular.module(模块)
作用
- 通过模块对页面进行业务上的划分
- 将重复使用的指令或者过滤器之类的代码做成模块,方便复用
- 注意必须指定第二个参数,否则变成找到已经定义的模块
语法
- 根据不同的功能划分不同的模块。
- 创建一个模块
- 语法:
angular.module('模块名',[])
- 第二个参数是个数组,这个数组里的每一个元素,是我们当前模块依赖的其他模块
- 注意: 即便我们不依赖其他的模块,也需要传递一个空数组
因为如是不传第二个参数的话,这个方法的作用就会变为获取一个名为"模块名"的模块对象 angular.module('myApp')
,是获取一个名为myApp的模块对象。- 我们需要给ng-app指令一个属性值,这个值就是我们创建的模块名:
- 告诉anuglar,现在由我们自己创建的这个模块来管理页面。
angular.controller(控制器)
作用
- 为应用中的模型设置初始状态
- 通过$scope对象把数据模型或者函数行为暴露给视图
- 监视模型的变化,做出相应的动作
语法
- 控制器是通过模块对象来创建的:
-
语法:
var app = angular.module('模块名',[])
app.controller('控制器的名字',function($scope){ // 在这个function里写我们具体想要执行的代码 // $scope 就是用来存储我们的数据模型. })
-
我们需要在页面上使用了数据模型的元素父级元素上加上ng-controller指令,并给这个指令一个属性值,这个值就是我们创建的控制器名字。
双向数据绑定(双向数据绑定)
- 页面文本框的值改变,导致数据模型的值发生改变,
- 数据模型的值的改变,反过来导致页面文本框的值的改变,这种相互影响的关系,我们起了个名词,叫作双向数据绑定。
- ng-model = ""
单向数据绑定
- 只能一数据模型的值改变,导致页面值的改变;
MVC 思想
什么是 MVC 思想
- 将应用程序的组成划分为三个部分:Model View Controller
- 模型:数据处理
- 视图:以友好的方式向用户展示数据
- 控制器:业务逻辑处理
- 控制器的作用就是初始化模型用的;
- 模型就是用于存储数据的,做一些业务逻辑的操作。
-
视图用于展现数据
用MVC构建应用的优势
- 剥离开视图和逻辑之间的关系,无论怎么修改dom操作都不用修改业务逻辑代码