# 流行框架第一天: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.onclick=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/