第214天:Angular 基础概念

1、Angular 简介

1、 什么是 AngularJS

- 一款很是优秀的前端高级 JS 框架

- 最先由 Misko Hevery 等人建立

- 2009 年被 Google 公式收购，用于其多款产品

- 目前有一个全职的开发团队继续开发和维护这个库

- 有了这一类框架就能够轻松构建 SPA 应用程序

- 轻松构建 SPA（单一页面应用程序）

- 单一页面应用程序：

  + 只有一个页面（整个应用的一个载体）

  + 内容所有是由AJAX方式呈现出啦的

- 其核心就是经过指令扩展了 HTML，经过表达式绑定数据到 HTML。

 

2、为何使用 AngularJS

- 更少的代码，实现更强劲的功能

- 将一些之前在后台开发中使用的思想带入前端开发

- 带领当前市面上的框架走向模式化或者架构化

3、AngularJS 的核心特性

- MVC

- 模块化

- 自动化双向数据绑定

- 指令系统

4、相关连接

- http://www.apjs.net/

- http://www.angularjs.cn/

- http://docs.angularjs.cn/api

- https://material.angularjs.org

- http://angular-ui.github.io/

5、Angular 上手

- 安装 Angular

 

（1）下载 Angular.js 的包

  + https://github.com/angular/angular.js/releases

（2）使用 CDN 上的 Angular.js

  + http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js

（3）使用 Bower 安装

  ```bash

  bower install angular

  ```

（4）使用 NPM 安装

  ```bash

  npm install angular

  ```

- 每种方式安装包，本质都是将angular的库下载到当前文件夹中

 

六、angular的优点

• Angular 最大程度的减小了页面上的 DOM 操做；
• 让 JavaScript 中专一业务逻辑的代码；
• 经过简单的指令结合页面结构与逻辑数据；
• 经过自定义指令实现组件化编程；
• 代码结构更合理；
• 维护成本更低；
• Angular 解放了传统 JavaScript 中频繁的 DOM 操做

7、angular中最重要的概念是指令（directive）

- ng-model 是双向数据绑定的指令，效果就是将当前元素的value属性和模型中的user.name创建绑定关系

八、运行官方文档

因为众所周知的缘由，Angular 官网打不开

咱们须要本地运行 Angular 文档

下载最新的 Angular 包

解压后有一个 docs 文件夹

必须经过 http 服务器访问该文件夹

能够经过 SublimeServer 或者 http-server 运行

9、推荐工具

- 在线编辑器

  + https://jsfiddle.net/

 

2、 Angular 基础概念

 1、MVC 思想

- 将应用程序的组成划分为三个部分：Model View Controller

模型：处理数据和业务逻辑

视图：以友好的方式向用户展现数据

控制器：组织调度相应的处理模型

 

- 控制器的做用就是初始化模型用的；

- 模型就是用于存储数据的

- 视图用于展示数据

 

- 登录案例分析MVC思想

- 模型

  + 咱们数据库中全部用户的信息

  + 接受控制器传来的用户名和密码进行校验的业务逻辑并返回true/false

- 控制器

  + 接受用户在界面上填写的用户名和密码

  + 将用户名和密码交给模型

- 视图

  + 给用户呈现一个表单

  + 接受用户输入内容，并将其提交给控制器

  + 根据控制器返回的数据，响应用户页面

2、模块（Module）

AngularJS很重要的一个特性就是实现模块化编程，咱们能够经过如下方式建立一个模块，对页面进行功能业务上的划分

1 // 建立一个名字叫MyApp的模块，第二个参数指的是该模块依赖那些模块
2 
3 var myApp = angular.module("MyApp", []);

也能够将重复使用的指令或过滤器之类的作成模块便于复用

注意必须指定第二个参数，不然变成找到已经定义的模块

3、控制器（Controller）

调度逻辑的集合

 1 angular.module('OneApp', [])
 2 
 3     .controller('HelloController', [
 4 
 5         '$scope',
 6 
 7         function($scope) {
 8 
 9             $scope.p = {
10 
11                 name: 'zhangsan'
12 
13             };
14 
15         }
16 
17     ]);

 

控制器的三种主要职责：

• 为应用中的模型设置初始状态
• 经过$scope对象把数据模型或函数行为暴露给视图
• 监视模型的变化，作出相应的动做

 

// 监视购物车内容变化，计算最新结果

$scope.$watch(‘totalCart’, calculateDiscount);

 

$scope（上下文模型）

• 视图和控制器之间的桥梁
• 用于在视图和控制器之间传递数据
• 利用$scope暴露数据模型（数据，行为）

4、表达式（Expression）

做用：

使用 表达式 把数据绑定到 HTML。

语法：

表达式写在双大括号内：{{ expression }}。

比较：

表达式做用相似于ng-bind指令

建议更多的使用指令

AngularJS表达式很像JavaScript表达式

它们能够包含文字、运算符和变量

如 {{ 5 + 5 }} 或 {{ firstName + ‘-’ + lastName }}

 

对比 JavaScript 表达式

相同点：

AngularJS 表达式能够包含字母，操做符，变量。

 

不一样点：

AngularJS 表达式能够写在 HTML 中。

AngularJS 表达式不支持条件判断，循环及异常。

AngularJS 表达式支持过滤器。

五、数据绑定

• 单向数据绑定

　　　　模型变化事后，自动同步到界面上；

　　　　通常纯展现型的数据会用到单项数据绑定；

　　　　使用表达式的方式都是单向的

• 双向数据绑定

　　　　两个方向的数据自动同步：

　　　　模型发生变化自动同步到视图上；

　　　　视图上的数据发生变化事后自动同步到模型上；