开放性讨论
- 为什么这几年前端行业好像突然间多了那么多东西
- 我们现在做的网站不再是简简单单的呈现静态页面，而是一个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
- npm 方式
- 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中文社区提供的文档（不用翻墙）
- http://docs.angularjs.cn/api
- http://www.apjs.net/