浅议Angular -- AngularJS简介

Posted 2020-06-23

　　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执行完毕后自动移除.