AngularJS1.x快速入门

扩展：传统软件模型是前后端耦合架构模式，所谓耦合架构就是服务器后端和前端紧密结合，这样的架构模型下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命名规则，将大写字母转换成小写字母，前面加中划线，如

手机扫一扫

移动阅读更方便

你可能感兴趣的文章

开发四年的Java程序员，你遇到过自身瓶颈期吗？又是怎样度过的？