Angular?
作为一款非常优秀的前端高级JS框架,区别于jQuery封装了很多DOM操作,AngularJS应用场景比较特殊,主要为数据呈现或交互等.从09年被Google收购以来,Angular在全球迅速普及,如今的Angular2有了颠覆式的变化.
现在针对Angular1.4.9的最新稳定版本进行简单的讨论.
Angular用于快速构建SPA(单一页面应用程序).
单一页面应用程序只有一个页面,即整个应用程序的一个载体,其内容全部是由Ajax方式呈现出来的.
我们知道,传统网站的开发以页面来划分,每个页面上传到服务端,再由服务端根据我们请求的地址不同,把文件拿回来渲染到本地.现在提供了一个应用程序的入口(即单一页面),拿回该文件后,其脚本在执行的过程中会请求我们需要的数据,那么我们与服务端交流的只是数据,整个网页也停留在单一页面,这个过程中的局部刷新,减少请求大小等,会给用户带来更快更好的体验.
AngularJS特性?
Angular的作者把很多Java中的思想嵌入这个框架中,包括后面的MV*,MVVM思想,让Web应用程序开发更简单,更快捷,带领前端进入MV*的时代.可以说,从Angular开始,前端框架开始注重前端思维,走向模式化,架构化.
MVC
模块化
自动化双向数据绑定
指令(directive)系统
Angular安装?
下载 Angular.js 的包 https://github.com/angular/angular.js/releases
使用CDN 上的 Angular.js http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js
使用 Bower 安装 bower install angular
使用 NPM 安装 npm install angular
开始使用?
基本使用:
ng-app 指令 -- Angular应用程序管理的边界.是ng的入口,表示当前元素的所有指令都会被Angular管理(分析和操作).ng-app标记的范围应该尽可能地小;创建多个ng-app时,默认只能执行第一个,后面的需要手动引导,angular.bootstrap().
ng-model 双向数据绑定的指令 -- Angular在执行某一个代码片段时,会在内存中开辟一块单独的存储空间,用于存储当前页面上需要的数据模型.将当前元素的value属性和模型中对象的属性值建立绑定关系.
使用总结:
最大程度减少了页面上的DOM操作,解放了传统JS中繁琐的DOM操作,还原了JS的本质--让JS专注业务逻辑的代码.
通过简单的指令结合页面结构与逻辑数据
通过自定义指令实现组件化编程
代码结构更合理,维护成本更低
MVC?
MVC是一种应用程序的开发思想,不是设计模式,MVC将应用程序划分为三部分: Model View Controller,控制器用于组织调度相应的处理(初始化)模型,模型用于处理业务逻辑和数据(较少),视图用于以友好的方式展示数据.
MVC和MVVM
在MVC里,由于View可以直接访问Model并且单向依赖Model,所以一些业务逻辑也会在View中实现,导致其更改困难;
MVVM把数据逻辑单独出来完成向UI元素的绑定,从而与页面分离开.同时,MVVM的双向绑定使我们对页面上依赖同一段的多个区域的维护更为便捷.
Angular基础概念?
模块
Angular中一个很重要的特性就是实现模块化编程,我们可以通过创建一个模块对页面进行功能业务上的划分.
例如: var app = angular.module(‘myAPP‘,[]); // 两个参数分别表示模块名称和依赖,如果不依赖任何模块,第二个参数也必须传递空数组;两个参数表示创建,一个参数表示获取.
如果希望自己创建的模块管理整个元素,可以在该元素后添加 ng-app="myAPP".
控制器
调度逻辑的集合,通过app.controller方法,即通过模块创建一个控制器,该控制器属于myAPP模块.建议所有控制器名字都用驼峰命名法以Controller结尾.
$scope(上下文模型)
例如: app.controller(‘DemoController‘, function($scope) {}); // 第二个参数为函数,当控制器执行时会自动执行这个函数.控制器函数的参数中有一个$scope,我们页面上用到的所有数据模型都存储在$scope中,所以我们只需在控制器执行的过程中给$scope赋值就可以了.
现在我们把控制器加到视图上ng-controller="DemoController",让视图绑定我们写好的控制器,则DemoController所创建出来的$scope就会成为此视图的数据源,改变也会自动同步到后台的$scope.
那么,我们可以把$scope看做一个桥梁,用来在视图和控制器之间传递数据,暴露数据模型(数据,行为).
控制器的职责
为应用中的模型设置初始状态;通过$scope把数据模型或数据行为暴露给视图;监视模型的变化,做出相应动作.
控制器的语法
在执行控制器函数时,会根据参数的名称自动注入对应的对象.由于生产环境中,常常用到压缩代码的方式,会改变参数的名称,所以注册控制的标准方式是通过第二个参数传递数组(数组最后一个成员是原控制器函数,其他成员是需要注入的对象名称)的方式,具体要输入的对象根据数组成员决定.
例如: angular.module(‘myAPP‘).controller(‘DemoController‘, [‘$scope‘, function($scope) {}]);
如果功能较复杂,可能涉及很多模型,这时候建议使用对象,在模型里面单独存储数据.
Angular基本上不用操作DOM,如果必要,可以使用Angular提供的jqlite.
官方API中提供了一个$scope.$watch方法,传递两个参数,监视第一个表达式的变化,执行第二个参数中的函数.
例如: $scope.$watch(‘user.username‘, function(fir, sec) {});
表达式
{{}} 表达式 -- 把应用程序变量绑定到某个段落的innerHTML.可以包含数字,字符串,对象,数组,基本的逻辑运算符.表达式也可以实现单向数据绑定,{{::}}只能由数据模型向页面同步.表达式可以写在HTML中;不支持条件判断,循环机异常;支持过滤器.
因为HTML的解析过程会出现闪一下,解决办法如下:
<style>[ng-cloak] {display:none;}</style> // 在执行一开始就向元素中添加display:none;隐藏表达式;ng-cloak属性在Angular执行完毕后自动移除.