Angular 简介
什么是 AngularJS
- 一款非常优秀的前端高级 JS 框架
- 最早由 Misko Hevery 等人创建
- 2009 年被 Google 公式收购，用于其多款产品
- 目前有一个全职的开发团队继续开发和维护这个库
- 有了这一类框架就可以轻松构建 SPA 应用程序
- 轻松构建 SPA（单一页面应用程序）
- 单一页面应用程序：
- 只有一个页面（整个应用的一个载体）
- 内容全部是由AJAX方式呈现出啦的
- 其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。
为什么使用 AngularJS
- 更少的代码，实现更强劲的功能
- 将一些以前在后台开发中使用的思想带入前端开发
- 带领当前市面上的框架走向模式化或者架构化
AngularJS 的核心特性
- MVC
- 模块化
- 自动化双向数据绑定
- 指令系统
相关链接
- http://www.apjs.net/
- http://www.angularjs.cn/
- http://docs.angularjs.cn/api
- https://material.angularjs.org
- http://angular-ui.github.io/
Angular 上手
安装 Angular
-
下载 Angular.js 的包
-
使用 CDN 上的 Angular.js
-
使用 Bower 安装
bower install angular -
使用 NPM 安装
npm install angular -
每种方式安装包，本质都是将angular的库下载到当前文件夹中
-
angular中最重要的概念是指令（directive）
-
ng-model 是双向数据绑定的指令，效果就是将当前元素的value属性和模型中的user.name建立绑定关系
-
JS: BOM DOM ES
使用总结
运行官方文档
CDN的优势
Content Delivery Network
- 快
- 节省自己服务器的带宽压力和流量
Angular 基础概念
MVC 思想
什么是 MVC 思想
- 将应用程序的组成划分为三个部分：Model View Controller
- 控制器的作用就是初始化模型用的，组织调度相应的处理模型；
- 模型就是用于存储数据的,处理数据与业务逻辑
- 视图用于以有好的方式向用户展现数据
优势：每个模块分工明确，职责清晰，复用。
目的：模块化和复用
mvc.png
- 登陆案例
- 模型
- 我们数据库中所有用户的信息
- 接受控制器传来的用户名和密码进行校验的业务逻辑并返回true/false
- 控制器
- 接受用户在界面上填写的用户名和密码
- 将用户名和密码交给模型
- 视图
- 给用户呈现一个表单
- 接受用户输入内容，并将其提交给控制器
- 根据控制器返回的数据，响应用户页面
模块（Module）
//创建一个名字叫MyApp的模块，第二个参数指的是该模块依赖哪些模块
var myApp = angular.module("MyApp",[]),
- 建立模块，通过ng-app指令指定不同的模块，划分应用程序结构，对页进行业务上的划分；模块间相互独立
- 也可以将重复使用的指令或过滤器之类的做成模块便于使用
- angular.module方法传递两个参数才是创建模块，一个参数是获取模块
- 便于协同分工和维护
控制器（Controller）
angular.mdule ('OneApp',[])
.controller('HelloController',[
'$scope',
function($scope){
$scope.p={
name:'zhangsan'
};
}
]);
控制器的三种职责
- 为应用中的模型设置初始状态
- 通过$scope对象把数据模型或函数行为暴露给视图
-监视模型的变化，做出相应的动作
例如
$scope.$watch('totalCart',calculateDiscount)
watch只能监视$scope中已有的属性
视图模型（$scope）
- 视图和控制器之间的桥梁
- 用于在视图和控制器之间传递数据
- 利用$scope暴露数据模型（数据、行为）
表达式（Expression）
作用
把 数据绑定到html上
语法
写在双大括号内{{expression}}
包含文字，运算符，变量
与JavaScript表达式对比
单向数据绑定
双向数据绑定
Angular 指令系统
ng-app指令
angular找到第一个ng-app过后就不会再找,手动的让第二个div被myApp2管理
angular.bootstrap(document.querySelector('[ng-app="myApp2"]'),['myApp2']);
也可以通过模块依赖关系，创建一个总模块，依赖其他多个模块
angular.module('myApp', ['myApp1', 'myApp2']);
ng-bind指令
ng-bind指令在绑定的值包含HTML时会转义，为了安全（跨站脚本攻击）,需要引入sanitize.js,并且该模块要添加依赖ngSanitize模块。
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
使用自定义的模块才可以依赖别的包里面定义模块，angular定义的默认模块没有依赖任何
angular.module('myApp', ['ngSanitize']);
ng-model指令
用于绑定应用程序数据到html控制器（input select text）的值，可以将输入的值与angularJS创建的变量绑定。
ng-repeat指令
ng-class指令
ng-show /ng-hide指令
ng-link/ng-src指令
自定义指令
过滤器filter
作用
常见的过滤器有
date过滤器
主要用于时间格式的转换
limitTo过滤器
filter过滤器
filter过滤器会根据设置的检索数据过滤未匹配到的数据内容，也可以通过设置检索条件为一个对象，实现在指定属性中检索
通过自定义一个比较函数，在前台为filter指定的第二个参数实现
json过滤器
可以将一个对象以json形式解析，利用它，我们可以在界面上直观的查看一些对象的成员，这也是调试的好办法。
自定义过滤器
实现自定义数据格式转换
Form表单
Form表单-----验证
Form表单-----验证规则
服务（service）
创建服务
通过模块的service方法创建一个服务
内置服务——$http
此服务是AngularJS中处理AJAX的服务
请求数据方式$http.jsonp(url).success(function(res){}
网友评论