angular.js 第一天

 

# 流行框架第一天：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/

# 流行框架第一天：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/