# 流行框架第一天：Angular简介和入门## 开放性讨论- 为什么这几年前端行业好像突然间多了那么多东西+ 我们现在做的网站不再是简简单单的呈现静态页面，而是一个web应用程序。+ 一大批后端程序员转型为前端，大大提高了前端的水准。## Angular简介- jQuery ：库+ 封装了一些常用的方法，我们主动的调用这些方法-- 提高了代码的利用，以及代码后期的维护- Angular: 前端框架+ 框架提供了一些结构或者模式，+ 我们是根据框架提供的结构或者模式去书写代码+ 由框架帮助我们去执行相应的操作。### 什么是 Angular- 一款非常优秀的前端高级 JS 框架
- 最早由 Misko Hevery 等人创建
- 2009 年被 Google 公式收购，用于其多款产品
- 目前有一个全职的开发团队继续开发和维护这个库
- 有了这一类框架就可以轻松构建 SPA 应用程序
- 其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。
- *Angular不推崇DOM操作，也就是说在NG中几乎找不到任何的DOM操作*#### 什么是 SPA
- single page application
- 单页应用程序### 为什么使用 Angular### 安装 Angular- 暴力安装: 直接从本地硬盘中复制一个angular.js文件到项目中- 通过工具安装+ npm 方式 `npm install angular`+ bower 方式 'npm install angular'- CDN - 扩展内容*注意，每一种安装方式，本质都是为了拿到angular.js文件*### 指令
- angular中以ng-开头的属性叫作指令
- ng-app 告诉angular来管理html代码，管理ng-app所在元素及其子元素。
- ng-click 用来注册点击事件>var add = document.getElementById('add');add.οnclick=function(){val = (val-0)+1; // num.value = (num.value - 0) +1}- ng-model：var num = document.getElementById('num').value- ng-init :进行初始化操作:  ng-init="user.name='小明'"### Angular 表达式
- 就是把ng-model对应的值显示到页面中。
- 语法：两个大括号的形式：{{}}
- {{user.name}}
- {{'hello'+ user.name}}
- {{1+2}}
- {{[1,2,3,4]}}## Angular 基础概念### Angular 的核心特性- 指令- MVC- 模块化  angular.module()- 双向数据绑定### 模块(module)
- angular.module('myApp',[])> 第一个参数是模块的名字> 第二个参数是一个数组，数组的元素是该模块所依赖其他模块的名字
*注意,即使不依赖任何模块，也需要给第二个参数传递一个空数组*
*否则angular.module('myApp')就是去获取名为myApp的模块对象*### 控制器(controller)
- angular.module('myApp',[]).controller('demoController',function($scope){})
> 第一个参数，是控制器的名字
> 第二个参数，是一个回调函数，在回调函数里写我们想要的js代码。### 双向数据绑定
- 数据模型的值发生改变，就会导致页面值的改变.页面值的改变，就会导致数据模型值的改变，这各种相互影响的关系就是双向数据绑定。
- ng-model### 单向数据绑定
- 使用表达式显示数据模型的值。### MVC 思想#### 什么是 MVC 思想
- M:Model 模型  :数据存储，一些业务逻辑
- V:View  视图 ：就是用来展示数据
- C:Controller 控制器: 调度业务逻辑#### MVVM 
- M：
- V:
- VM: ViewModel-  $scope### $watch
- 用于监视数据模型的变化（并且只能监视数据模型的变化）
- $scope.$watch('数据模型名的字符串形式',function(变化后的值,变化前的值){})
- $scope.$watch里的回调函数会默认执行一次。## CDN - 扩展内容
content delivery network 
内容分发网络- 速度快
- 减轻了服务器自身在带宽压力。### 相关链接- AngularJS 1.x 官方网站+ https://angularjs.org/
- AngularJS 2.x 官方网站+ https://angular.io/
- Google Material Design for Angular+ https://material.angularjs.org
- Angular UI（Angular最大的第三方社区）+ http://angular-ui.github.io/
- AngularJS中文社区+ http://www.angularjs.cn/
- AngularJS中文社区提供的文档（不用FQ）+ http://docs.angularjs.cn/api+ http://www.apjs.net/