angularjs 知识点整理_angular.module('datecheckapp', [])-优快云博客

本文链接：https://blog.youkuaiyun.com/yumeirener_/article/details/80950103

一、模块定义

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.youkuaiyun.com/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元素

> 内置指令

->ng-href ng-src （类布尔属性，界面友好性提高）

ng-disabled ng-checked ng-readonly ng-selected （布尔属性）

ng-class ng-style

->会生成作用域的指令（以父作用域为原型生成子作用域）

ng-app （创建$rootScope）

ng-controller （会以$rootScope或另一个ng-controller的作用域$scope为原型创建新的子作用域）

ng-include （会自动创建一个子作用域）

1、定义和用法
ng-include 指令用于包含外部的 HTML 文件。
包含的内容将作为指定元素的子节点。
ng-include 属性的值可以是一个表达式，返回一个文件名。
默认情况下，包含的文件需要包含在同一个域名下。
2、语法
<element ng-include="filename" οnlοad="expression" autoscroll="expression" ></element>
ng-include 指令作为元素使用:
<ng-include src="filename" οnlοad="expression" autoscroll="expression" ></ng-include>
所有的 HTML 元素都支持该指令。
3、参数值
值	        描述
filename	文件名，可以使用表达式来返回文件名。
onload	        可选， 文件载入后执行的表达式。
autoscroll	可选，包含的部分是否在指定视图上可滚动。

ng-switch （类似于 switch case 功能）

示例：http://jsbin.com/AVihUdi/2/edit?html,js,output

ng-view ng-if

ng-repeat （用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。） $index[0-(length-1)] $first $middle $last $even $odd

$even是$index为偶数是为真
$odd是$index为奇数时为真
<!-- 为奇偶行添加样式 -->
<p ng-repeat="preson in people" ng-class="{even:!$even, odd:!$odd}">
{{preson.name}}
</p>

ng-init

{{ }} 避免闪烁，可以使用 ng-bind / ng-cloak

ng-bind-template 可以绑定多个表达式

ng-bind-template="{{name}} {{age}}"
ng-bind-template="{{name}} : {{age}}"
ng-bind-template="{{name}} + {{age}}"

ng-bind-html

ng-model

使用 对象 进行双向数据绑定
<input type="text" ng-model="modelName.someProperty" />

ng-model-options

ng-show / ng-hide

ng-change 这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入，这个指令要和 ng-modal 联合起来使用。

ng-form

ng-click

ng-select