AngularJS1.x快速入门
AngularJS1.x快速入门
1. 简介
AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。以其数据和展现分离、MVVM、MVC、DI等强大的特性活跃于前端开发市 场，是前端敏捷开发使用的主流的必须掌握的框架之一。
AnuglarJS是前后端分离软件架构模型下，前端业务处理的解决方案！
| 注意：库 VS框架 库：封装原生JavaScript实现的大量函数的集合，是提供了各种特定功能的函数库 通过引入的库中的函数，可以快捷实现一些特定的处理过程，如截取字符串等等 框架：一种封装了原生JavaScript实现的函数、功能、组件、处理流程的特殊实现 通过引入框架中的配置，可以实现一定的逻辑处理功能，如Bootstrap中的轮播图等等 |
AngularJS是web应用前端的一个完整的解决方案，框架不仅提供了优雅的DOM操作和基于Ajax的数据交互技术，同时进行了良好的结构整理和常规的业务逻辑处理的封装，使得Angular构建的应用能够灵活的适应不同的项目场景。
| 注意：AngularJS中提供了如下的解决方案用以前端开发：
数据双向绑定、基本模板指令、自定义指令、表单验证、路由操作、依赖注入、过滤器、内置服务、自定义服务、组件、模块 |
同样，AngularJS框架从2013年开始在国内出现应用，一直到2016年活跃于web前端项目开发中，丰富的社区资源也是一个非常重要的原因。
| 外链：常见AngularJS社区 http://docs.angularjs.org http://www.angularjs.net.cn/tutorial/1.html https://github.com/aztack/AngularJS-translation https://github.com/dolymood/learning-angular http://www.angularjs.cn/ https://www.zouyesheng.com/angular.html http://blog.darkthread.net/blogs/darkthreadtw/archive/tags/AngularJS/default.aspx http://blog.jobbole.com/52857/ http://blog.jobbole.com/62999/ |
| 外链：AngularJS1.x官方网站 http://angularjs.org AngularJS1.x代码下载 http://code.angularjs.org AngularJS1.x官方教程 https://code.angularjs.org/1.6.4/docs/tutorial AngularJS1.x官方开发向导 https://code.angularjs.org/1.6.4/docs/guide AngularJS1.x官方API https://code.angularjs.org/1.6.4/docs/api |
2. Quick start
入门程序1：实现一实时提取用户键盘输入内容的记录器
| 设计思路：传统方式<通过键盘按键事件进行处理> 输出记录: .. function record() {..} |
| 代码：angular中，通过数据的双向绑定直接实现
输出记录：{{info}} |
需求案例1：实现一个购物车中更新数据的功能
功能要求：修改购买数量，在修改的同时，商品的小计购买金额发生变化。
| 代码：
小计金额：{{price * count}} |
AngularJS应用中，对传统的HTML进行了扩展，增加并强化了HTML的功能，从入口属性ng-app(指令)开始加载应用，并逐行编辑解释这些扩展的内容。
遇到input标签中的属性ng-model(指令)，就会将它的值当成一个变量进行处理
遇到{{}}这样的结构，就会将括号中的值当成表达式进行处理
| 注意：mustache语法，通过两个大括号来包含一个表达式的结构 Angular会对mustache语法进行编译并解释成可以运算的表达式进行处理 |
AngularJS就是因为对传统的HTML进行了功能的扩展，所以在一定程度上，实现了软件开发过程中前后端的架构级别的分离——也就是软件前后端分离架构模型。
同时将前端的内容展示、业务功能处理、数据交互有组织的进行了规划，让前端HTML更加适合如今的企业级平台的web软件开发。
| 扩展：传统软件模型是前后端耦合架构模式，所谓耦合架构就是服务器后端和前端紧密结合，这样的架构模型下HTML是不满足web开发需要的。如JavaEE开发的web软件，服务器后端使用java语言以及它的框架来完成开发，前端使用JSP进行开发，JSP是对HTML的扩展，可以在HTML中添加java代码和java定义的标签，但是JSP是只能用于Java后台的视图。PHP开发的服务器后台，页面部分使用PHP进行开发，PHP文件也是在HTML中进行了大量的功能扩展。 AngularJS类似的框架出现之后，对于前端进行了大量的封装和扩展，让HTML能更加友好的支持后端主流的语言并协同进行web软件的开发，也就是前后端开始分离，不再像以前那样紧密的耦合。
|
3. 专业术语概述
| 术语 |
描述 |
| 模板template |
包含了Angular特殊扩展标记的HTML代码 |
| 指令directive |
扩展的HTML代码，自定义的标签、属性等等 |
| 模型model |
保存在JS中，用来和用户交互的数据 |
| 作用域scope |
模型数据在HTML页面中产生作用的范围 |
| 表达式expression |
AngularJS在HTML页面中可以运算的语法 |
| 编译器compiler |
被用来解释HTML代码中的Angular代码 |
| 过滤器filter |
对HTML页面中输出的数据进行指定格式展示 |
| 视图view |
统称用户看到的HTML视图页面 |
| 数据绑定data binding |
JS中特定的数据和HTML页面上的数据的关联关系 |
| 控制器controller |
给视图view提供功能支持的东东 |
| 依赖注入 dependency injection |
Angular自动创建对象并传递对象的一种方式 |
| 注入器 injector |
专门用来实现依赖注入（DI）的容器 |
| 模块module |
Angular用来对项目进行最高层次封装的东东 |
| 服务service |
Angular用来对视图view提供业务功能支持的东东 |
| 组件component |
用于对网页的公共部分进行封装重用的Angular代码 通常会包含模板、指令、服务等等 |
4. 引导程序
任何应用程序，运行过程中都会有一个运行的入口。
AngularJS应用程序也是一样，正常情况下，引导Ag应用的入口程序有两种：
l ng-app指令
l bootstrap手工引导
常规模式下，是通过ng-app指令引导Angular应用进行工作的。
网页中引入Angular之后，程序运行时会自动查找ng-app指令并从这个入口开始加载编译并解释执行。
| 代码：通常，页面中会定义ng-app熟悉来指定入口 在script中通过angular的module来加载ng-app指定的模块 |
| 代码：某些特殊情况下，也可以通过脚本来动态控制加载启动Angular应用 通过angular.bootstrap(dom, module)来启动应用 |
5. 基础语法结构
开始深入学习AngularJS之前，先简单认识AngularJS中的各个部分都是怎么定义和使用的，方便解决后续学习过程中的一些困扰。
| ng-app |
Angular应用运行的入口指令，常规情况下，是写在我们前端项目的入口文件的跟标签上的，用于在项目启动的时候引导Angular应用
| angular.module(..) |
Angular是通过模块来管理我们前端项目中的数据的，通常情况下一个项目中会包含各种各样的数据，如管理员、会员、商品列表、商品、新闻列表、新闻、公告等等
模块时需要在应用启动的时候就需要加载的，所以Angular在设计的过程中对于入口指令进行了改造可以绑定一个值，这个值就是系统的主模块
| 基本指令 |
指令是Angular中使用比较多的一个部分，Angular中的内置指令都是ng-开头的一种特殊的语法结构，如:ng-app等，常见的基本指令如下：
ng-app=”myApp”:程序运行的入口，通过名称绑定一个模块
ng-init:用于在程序运行的过程中，初始化一些变量的数据的操作
ng-model=”param”:数据绑定的指令，主要用于表单元素上的数据绑定
ng-bind:数据绑定的指令，用于将变量的数据显示到页面上，用于替代mustache语法的
ng-controller:控制器指令，用于在页面中指定控制器作用范围，通常作为属性出现
ng-[event]:事件指令，用于在页面中发生某些事件时调用指令的函数
| 基本语法 |
var app = angular.module(“name”, []):用于定义一个angular的模块
l name是模块的名称
l []中可以添加其他的模块
app.controller(“name”, function() {}):用于定义一个angular的控制器
l name是控制器的名称
l function(){}是这个控制器要处理功能的函数
| $scope作用域 |
$scope是放在控制器函数中的一个参数。这个参数不需要传值，而是angular自动赋值
在操作的过程中$scope就相当于一个容器，可以在$scope上声明变量或者函数，$scope上的变量和函数会自动和视图页面中的变量进行绑定，称为$scope挂载数据。
| $rootScope作用域 |
$rootScope是AngularJS的根作用域，也是全局作用域，放在控制器函数中的一个参数，参数不需要传值，angular会自动赋值，挂载在$rootScope上的数据，会被Angular应用中的所有模块下的子模块和控制器公用。
| run()函数 |
配合$rootScope使用，用于声明和初始化全局数据
app.run(function($rootScope) { // 处理代码})
| $scope.$watch() |
挂载在$scope上，用于监控数据的变化
监控单个变量：$scope.$watch(“name”,function() {// 处理代码})
监控多个变量：$scope.$watch(“name1+ name2 + ..” + function() {})
| angular事件处理 |
AngularJS中的事件操作，由于它自己虚拟DOM结构所以不支持普通事件，通常通过它自己的事件指令来调用通过$scope挂在到控制器中的函数执行完成，事件指令其实就是对于常见事件的封装，以ng-开头，加上事件名称即可，如鼠标单击事件ng-click
6. MVC处理模式
MVC不是一个技术，是一种处理问题的思路，也就是编程思想。
这种编程思想的核心是将数据和展示分离，通过控制器挂载并进行一定的功能逻辑的处理以达到让代码具备强大的扩展性的目的。
MVC中主要包含三个模块
l View:视图——用于数据的展示和交互
l Model:数据模型——用与数据的封装和运算
l Controller:控制器——用于对视图和数据模型之间的联系进行逻辑关系的处理
| 扩展：MVC和MVP MVC是传统的处理模式，但是随着近年来前端技术发展迅速，数据双向绑定处理模式的出现，传统的MVC也进行了细化，出现了MVP处理模式 MVC:视图view和数据模型model的数据是双向绑定的，控制器只是作为提供逻辑处理服务的中间件 MVP:视图view和数据模型model的数据是单向绑定的，控制器作为视图view和数据模型model之间传递数据和逻辑处理的桥梁 常规情况下，由于MVC处理模式下数据双向绑定造成的数据源的污染，以及view对于model严重的依赖性，所以建议在mvc处理模式下，复杂业务的数据的传递和逻辑处理过程还是通过控制器进行，而不是直接绑定 |
7. 控制器
AngularJS1.x的核心之一就是控制器部分，主要对于视图中的数据和事件处理函数进行挂载，同时进行一定的业务功能的底层封装和处理。
控制器在AngularJS中的作用
l 通过$scope进行数据状态的初始化操作
l 通过$scope进行事件处理函数的挂载操作
注意：不要使用控制器做下面的事情
l DOM操作：使用AngularJS中的数据双向绑定和自定义指令执行操作
l 表单处理：使用Angular中的form controls进行操作
l 数据格式化展示：使用Angular中的过滤器Filter来进行操作
l 不同控制器之间的数据共享：使用Angular中的自定义服务Service进行处理
l 组件生命周期的操作：使用Angular中的自定义服务Service进行处理
| 代码：控制器语法结构
var app = angular.module(“myApp”, []); app.controller(“myCtrl”, function($scope) { // 控制器函数操作部分 // 控制器主要进行数据的初始化操作和事件函数的定义 }); |
7.1. $scope作用域
$scope作为控制器函数一个非常重要的参数，AngularJS通过依赖注入的方式进行自动赋值，挂载数据完成控制器中的数据处理。每个$scope都拥有自己控制器的作用域，并且都独立于当前的控制器。
7.2. $rootScope作用域
每一个AngularJS应用，都有唯一的一个全局作用域范围，也称为根作用域，Angular中其他的作用域都是这个根作用域的后代/子作用域。
AngularJS的根作用域/全局作用域：$rootScope
根作用域使用时，通过注入的方式添加到控制器处理函数的入参中。
7.3. 依赖注入
7.4. 全局控制器和局部控制器
7.5. 控制器嵌套
| 注意：控制器的改进 在Angular1.2版本之前，控制器是通过静态函数直接定义的，并且控制器中的变量是作用于全局的。但是全局控制器的作用域造成了控制器数据的全局污染。所以在AngularJS1.2版本以后，进行了更新，不再添加任何全局控制器，而是将控制器挂载到模块上注册成为局部作用域，方便数据的高可控性和可操作性。 |
8. 组件化
AngularJS作为一个模块化组件开发的web前端框架，对于视图进行组件化封装以达到重用的目的，是它非常优秀的一个亮点。
什么是组件化？组件化是将页面中一部分UI封装起来进行重复使用，UI中的数据可以是不同的，甚至组件中可以对UI进行适当的业务逻辑处理，如链接跳转、数据运算等等
| 代码：组件定义语法结构
var app = angular.module(“myApp”, []); app.component(“name”, { settings }); |
组件选项：
l template:组件替换模板字符串
l templateUrl:组件替换html模板页面
l controller:组件控制器
| 代码：组件定义语法结构
var app = angular.module(“myApp”, []); app.component(“myComp”, { template:” 组件化开发”,controller:function($scope) { 控制器处理代码 } }); |
| 注意：组件命名规则 组件的命名有框架自己的规则和使用规范，都是根据实际项目需要进行封装处理的 组件命名规则：驼峰命名法，见名知意，如：myComp 使用规则：W3C命名规则，将大写字母转换成小写字母，前面加中划线，如 |