AngularJS基本使用

时间 2019-11-08

标签 angularjs 基本使用栏目 AngularJS 繁體版

原文原文链接

简介

AngularJS是Google开源的前端JS结构化框架
Angular关注的是动态展现页面数据, 并与用户进行交互。其主体再也不是DOM，而是页面中的动态数据
AngularJS特性(优势)
- 双向数据绑定
- 声明式依赖注入
- 解耦应用逻辑, 数据模型和视图
- 完善的页面指令
- 定制表单验证
- Ajax封装
Angular应用举例
- 饿了吗: https://www.ele.me/home/
- 微信网页版: https://wx.qq.com/
- 知乎周报: https://zhuanlan.zhihu.com/Weekly
- 后台管理应用: 阿里云, 土豆后台, 惟品会...

概念

做用域对象
- 一个js实例对象，ng-app指令默认会建立一个根做用域对象($rootScope)
- 它的属性和方法与页面中的指令或表达式是关联的
控制器对象
- 用来控制AngularJS应用数据的实例对象
- ng-controller：指定控制器构造函数，Angular会自动new此函数建立控制器对象
- 同时Angular还会建立一个新的做用域对象$scope，它是$rootScope的子对象
- 在控制器函数中声明$scope形参，Angular会自动将$scope传入
数据绑定：数据从一个地方A转移(传递)到另外一个地方B, 并且这个操做由框架来完成
视图(View)：也就是咱们的页面(在Angular主要是Angular指令和表达式)
模型(Model) : 域对象(在Angular为$rootScope), 它能够包含一些属性或方法
双向数据绑定
- 数据能够从View流向Model, 也能够从Model流向View
- 当改变View中的数据, Model对象的对应属性也会随之改变
- 当Model域对象的属性发生改变时, 页面对应数据随之更新
- 在Angular中ng-model是双向数据绑定, 而{{}}是单向数据绑定
依赖对象
- 完成某个特定的功能须要某个对象才能实现，这个对象就是依赖对象
依赖注入(DI)
- 依赖的对象以形参的形式被注入进来使用，这种方式就是声明式依赖注入
- 定义函数时, 使用形参声明依赖对象变量, 在函数体中使用依赖对象
- 函数调用时, 自动将建立好的依赖对象动态传入(框架实现)
  - 例: 事件监听(如click)就使用了依赖注入, event就是依赖对象(event能够是任意名称)
- 依赖注入指依赖对象被别人(调用者)自动注入进入
  - angular的$scope对象就是依赖对象，而且是依赖注入的形式进行使用
  - 回调函数有形参就是依赖注入
依赖对象：完成特定功能的函数须要某个对象才能实现, 这个对象就是依赖对象
- 引入依赖对象的方式：
  - 方式一: 内部本身建立 --- 不动态
  - 方式二: 全局变量 --- 污染全局命名空间
  - 方式三: 形参引入依赖 --- 依赖注入使用的方式
- Angular中的依赖注入要求形参必须是特定的名称, 不然Angular没法注入抛异常
开发的两种方式
- 命令式
  - 更加注重执行的过程
  - 更像考试的解答题
- 声明式
  - 更加注重执行的结果
  - 声明式是对命令的局部包装
  - 更像选择或者填空题

MVC模式

MVC的全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是一种软件设计典范。它是用一种业务逻辑、数据与界面显示分离的方法来组织代码，将众多的业务逻辑汇集到一个部件里面，在须要改进和个性化定制界面及用户交互的同时，不须要从新编写业务逻辑，达到减小编码的时间。
M是指业务模型，V是指用户界面，C则是控制器。
用户首先在界面中进行人机交互，而后请求发送到控制器，控制器根据请求类型和请求的指令发送到相应的模型，模型能够与数据库进行交互，进行增删改查操做，完成以后，根据业务的逻辑选择相应的视图进行显示，此时用户得到这次交互的反馈信息，用户能够进行下一步交互，如此循环。 html
模型Model：存储数据的实体模型，操做数据的业务模型前端
视图View：显示数据，响应用户操做, 与用户进行交互数据库
控制器Controller：操做模型数据, 更新视图，是View与Model之间的桥梁
express

angular中的MVC

View视图
- 显示Model的数据
- 将数据同步到Model
- 与用户交互
Model模型
- scope
- 储存数据的容器
- 提供操做数据的方法
Controller控制器
- 初始化Model数据
- 为Model添加行为方法

M-V-VM模式

MVVM是MVC的进化版, Angular使用的就是M-V-VM
在angular中MVVM模式主要分为四部分：
- View：它专一于界面的显示和渲染，在angular中则是包含一堆声明式Directive的视图模板。
  - 与用户交互
  - 显示VM中的数据
- Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操做，因此模型也不会包含任何界面显示相关的逻辑。也就是Angular中的Service
  - scope中的各个数据对象
  - 数据模型
- ViewModel：它是View和Model的粘合体，负责View和Model的交互和协做，它负责给View提供显示的数据，以及提供了View中Command事件操做Model的途径；也就是Angular中的scope
  - scope对象
  - View和Model的交互和协做
  - 给View提供显示的数据
  - 提供了View中Command事件操做Model的途径
- Controller：这并非MVVM模式的核心元素，但它负责ViewModel对象的初始化，它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上，使得应用界面在启动加载的时候达到一种可用的状态。

做用域(scope)

一个js实例对象, ng-app指令默认会建立一个根做用域对象($rootScope)
它的属性和方法与页面中的指令或表达式是关联的

控制器(controller)

ng-controller : 指定控制器构造函数, Angular会自动new此函数建立控制器对象
同时Angular还有建立一个新的域对象$scope, 它是$rootScope的子对象
在控制器函数中声明$scope形参, Angular会自动将$scope传入

例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>Document</title>
 8 </head>
 9 <body ng-app="myApp">
10   <!-- ng-app 的值指向对应的模块对象的名字 -->
11   <div ng-controller="myController">
12       <input type="text" ng-model="firstName">
13       <p>员工1：{{firstName}}</p>
14       
15   </div>
16   <div ng-controller="myController2">
17       <input type="text" ng-model="firstName">
18       <p>员工2：{{firstName}}</p>
19   </div>
20 
21   <script src="../js/angular-1.5.5/angular.js"></script>
22   <script>
23     // 控制器的使用 angular 能够链式调用
24     angular.module('myApp',[]) 
25     .controller('myController',['$scope', function ($scope) { // 显示声明依赖注入
26       $scope.firstName = 111;
27     }])
28     .controller('myController2',['$scope', function ($scope) {
29       $scope.firstName = 222;
30     }])
31 
32   </script>
33 </body>
34 </html>

View Code

模块(module)

建立模块对象
- 用全局变量angular对象
使用模块对象
- 定义控制器
- 定义服务
- 定义指令

语法

表达式

使用Angular表达式
- 语法: {{expression}}
- 做用: 显示表达式的结果数据
- 注意: 表达式中引用的变量必须是当前域对象全部的属性(包括其原型属性)
Angular表达式操做的数据
- 基本类型数据: number/string/boolean
- undefined, Infinity, NaN, null解析为空串: "", 不显示任何效果
- 对象的属性或方法
- 数组
比较Angular表达与JS的表达式
- Angular表达式写法与JS的表达式类同
- 与JS表达式不一样的是，AngularJS 表达式能够写在HTML中。
- 与JS表达式不一样，AngularJS 表达式不支持条件判断，循环及异常。
- 与JS表达式不一样，AngularJS 表达式支持过滤器

指令

指令
- Angular为HTML页面扩展的属性,标签
- 与Angular的Model交互,扩展页面的动态表现力
经常使用指令
- ng-app
  - 告诉angular核心，它管理当前标签所包含的整个区域，而且会自动建立 $rootScope(根做用域对象)
  - ng-app的值指向对应的模块对象的名字
  - 例：
```
<body ng-app="myApp"></body>
```
- ng-model
  - 双向绑定，将当前输入框的值与谁关联(属性名:属性值),并做为当前做用于对象($rootScope)的属性
  - 例：
```
<input type="text" ng-model="username">
<p>您输入的内容是：<span>{{username}}</span></p>
```
- ng-init
  - 用于初始化当前做用域变量
  - 例：
```
<div ng-app ng-init="username='Tom'">
    <input type="text" ng-model="username">
    <p>姓名1:{{username}}</p>
    <input type="text"  ng-model="username">
    <p>姓名2:{{username}}</p>
</div>
```
- ng-click
  - 调用做用域对象的方法（点击时）
- ng-controller
  - 指定控制器构造函数名，内部会自动建立一个新的子做用域
- ng-bind
  - 解决使用{{}}显示数据闪屏问题
- ng-repeat
  - 遍历数组显示数据，数组有几个元素就会产生几个新的做用域
  - $index：当前做用域索引
  - $first：布尔值，判断当前做用域是否为第一个
  - $last：布尔值，判断当前做用域是否为最后一个
  - $middle：布尔值，判断当前做用域是否在中间，只要不是一个或最后一个值为true
  - $odd：布尔值，当前做用域的索引是否为奇数
  - $even：布尔值，当前做用域的索引是否为偶数
- ng-show
  - 布尔类型，若是为true才显示
- ng-hide
  - 布尔类型，若是为true就隐藏
- ng-class
  - 动态引用定义的样式{aClass:true, bClass:false}
- ng-style
  - 动态引用经过js指定的样式对象 {color:'red', background:'blue'}
- ng-click
  - 点击监听，值为函数调用，能够传$event
- ng-mouseenter
  - 鼠标移入监听，值为函数调用，能够传$event
- ng-mouseleave
  - 鼠标移出监听，值为函数调用，能够传$event
  - 例：
```
<div style="width: 200px;height: 200px;" ng-style="myStyle" ng-mouseenter="enter()" ng-mouseleave="outer()"></div>
```