一、模块定义

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元素

> 内置指令

angularjs 知识点整理