一、模块定义
var app = angular.module("app",[]);
二、作用域
> 作用域【M】是视图【V】和控制器【C】之间的胶水。
> 继承:子作用域可以继承父作用域的属性和方法
隔离:平级作用域之间相互隔离
屏蔽:如果子作用域定义了与父作用域相同的属性或者方法,则会屏蔽父作用域的属性或者方法
> 生命周期
创建->链接($watch)->更新(数据渲染到视图)->销毁
三、控制器和表达式
> 控制器在angular中的作用是 增强视图
> 用来给作用域对象设置初始状态,并添加自定义行为
> 尽可能精简控制器是很好的做法。作为angular开发者,使用依赖注入服务可以实现这个目的
> 所有的表达式都在其所属的作用域内执行,并有访问本地$scope的权限
> 可以接受过滤器或过滤器链
{{ xxx | number:2 | ***** }}
> $parse 【解析服务】
> $interpolate【插值字符串】
四、过滤器
> 在模板HTML中使用
{{ name | uppercase }}
> JS中
$scope.name = $filter("lowercase")("Apr");
> 内置过滤器
currency date filter json LimitTo lowercase number orderBy uppercase
五、路由
参考 https://www.cnblogs.com/littlemonk/p/5500801.html参考https://blog.csdn.net/zcl_love_wx/article/details/52034193
> SPA 单页WEB应用【single page web application】
***单视图嵌套https://ui-router.github.io/ng1/tutorial/helloworld
index.html
<html>
<head>
<script src="lib/angular.js"></script>
<script src="lib/angular-ui-router.js"></script>
<script src="helloworld.js"></script>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<body ng-app="helloworld">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>
</html>
helloworld.js
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
}
var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
***多视图
> 属性
controller resolve params url views abstract onEnter inExit data
> 路有事件
六、服务
> 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性。
> 创建
factory()
service() 可以注册一个支持构造函数的方法
constant() provider() 可以注入到.config()配置函数中
provider() 提供一个具有$get()方法的对象
value()
七、promise
参考 https://segmentfault.com/a/1190000007032448> promise 对象用于异步操作,它表示一个尚未完成且预计未来完成的异步操作
> 有以下三种状态
pending:初始值
fulfilled:操作成功
rejected:操作失败
缺点:promise一旦创建就会立即执行,无法取消
> resolve 异步操作成功时调用,并将异步操作的结果,作为参数传递出去
reject 异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去
八、指令
> 扩展具有定义功能的HTML元素
> 内置指令