关于AngularJS

2018-12-24 本文已影响6人 sidney_c

----基础----

1.表达式

AngularJS 表达式写在双大括号内：{{ expression }}，把数据绑定到 HTML，并在表达式书写的位置"输出"数据
AngularJS 表达式像 JavaScript 表达式一样，它们可以包含文字、运算符和变量。

例：<p>{{(5*(5-2))+""+"123"}}</p>

2. AngularJS 通过指令 ng-directives 扩展 HTML

ng-app
指令定义一个 AngularJS 应用程序。指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJS 应用都必须要要一个根元素。HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。
ng-model
指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind
告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。
ng-init 指令: 用于对ng-model指定的值进行初始化操作

3.双向数据绑定

MVVM：模型的改变能影响视图view,视图的改变也能影响到模型
通过和ng-click来改变数据

4.模块（module）

通过模块对页面进行业务上的划分
将重复使用的指令或者过滤器之类的代码做成模块，方便复用
模块是应用控制器的容器。
控制器通常属于一个模块。

创建一个模块

语法： angular.module('模块名',[])
第二个参数是个数组,这个数组里的每一个元素，是我们当前模块依赖的其他模块
注意: 即便我们不依赖其他的模块，也需要传递一个空数组，因为如是不传第二个参数的话，这个方法的作用就会变为获取一个名为"模块名"的模块对象
angular.module('myApp'),是获取一个名为myApp的模块对象。
我们需要给ng-app指令一个属性值，这个值就是我们创建的模块名:
告诉anuglar,现在由我们自己创建的这个模块来管理页面。

5.控制器（ng-controller）

AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。控制器采用ng-controller指令定义。控制器是一个包含属性/属性和JavaScript对象的功能。每个控制器接受$scope参数指定应用程序/模块，由控制器控制。

创建一个控制器

1.  函数式声明法 (1.3.0-beta.15之前的版本都可以用)
2.  module.controller(‘controllername’,[‘$scope’,function($scope){}])

可以以文件的形式存在

6.作用域 (Scope)

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
注意：scope的范围
$rootScope (根作用域) 它可以作用在 ng-app 指令包含的所有 HTML 元素中
作用域和根作用域相当于js当中的局部变量和全局变量
变量优先级为就近原则

7.过滤器

过滤器使用一个管道字符（|）添加到表达式和指令中。

示例： 1、搜索过滤列表 2、价格计算

8.自定义过滤器

    var m1 = angular.module(‘myApp’,[]);//给字符串加“-”
    m1.filter('addline',function(){
            return function(str){
                return "-"+str;
            }
        });
    
    <p ng-init=“name=‘123’”>{{name  |    addline}}</p>//  -123

----指令----

1. ng-model 指令：

绑定 HTML 元素到应用程序数据。
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（见图表）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

2. ng-repeat 指令：

通过in的方式遍历每一项

例： <li ng-repeat="x in ['a','b','c']">{{x}}</li>

辅助功能:

$index ,  $first,  $middle,  $last, $even,  $odd ,  ng-repeat-start,  ng-repeat-end

3. 事件指令：

ng-click/dbclick/mousemove……
ng-copy
ng-cut
ng-paste
ng-change

4.绑定指令:

ng-bind
ng-bind-template（解析多个绑定的变量）
ng-bind-html(sanitize插件)
ng-cloak(解析之前是display:none,解析成功之后display:block)
ng-non-bindable(禁止解析)

4.样式相关指令：

ng-class（如果表达式中变量不为字符串，支持{{}}）
ng-style （表达式中变量需要加{{}}）
ng-href
ng-attr-*
ng-src

ng-show
ng-hide
ng-if(类似ng-show,dom操作除节点)

5.自定义指令：

directive 函数用来添加自定义的指令
使用驼峰法来命名一个指令， myDirective, 但在使用它时需要以 - 分割, my-directive:
要调用自定义指令，HTML 元素上需要添加自定义指令名

<body ng-app="myApp">
<my-directive></my-directive>

<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
    return {
        template : "<h1>我的自定义指令!</h1>"
    };
});
</script>

restrict 值:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
区分大小写，可以组合使用的
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
replace-
template
templateUrl

scope:

true:独立作用域 .表示每一条调用的指令都是一个单独的作用域
-- 隔离作用域{} :

绑定策略

@ 绑定的普通字符串
= 等作用域下的变量数据
& 函数

controller:共享的数据
link:（参数:scope,element,attr,reController）

----服务----

Angularjs中的服务指的是一些函数或者对象，他们可以在整个应用中持有某些行为和状态。每一个服务都只有一个实例，无论从应用中何处访问该服务，指向的都是同一个对象。

1.服务与控制器

在用angular进行开发的应用中，毫无疑问的会同时用到控制器和服务。控制器和服务满足了我们应用中某些方面的需求。下面的表可以概览控制器和服务器各自不同的职责。

2. Angular内置服务

Angular提供了许多个内置服务，这些服务可以在控制器中直接调用，无需访问服务所涉及的底层代码，从而确保整个应用的结构不被污染，这些服务在任何地方调用的方法都是统一的。下面是常用的内置服务：

$timeout
$interval
$http
$scope
       $apply
       $watch
$location
$log
$filter

3.$http服务

$http快捷方法与服务端交互

在angular中，页面与服务端交互的主要方式是调用$http服务模块,该模块的底层封装了javascript中的XMLHttpRequest对象，并接受一个对象作为参数，用于收集生成的HTTP请求的配置内容，同时返回一个promise对象,该对象拥有名为success和error的两个回调方法。根据类型的不同$http模块提供了不同的调用方式，通用格式如下：

$http.请求类型（url,[data],[config]）
.success(data,status,headers,config){//成功后的操作}
.error(data,status,headers,config){//失败后的操作}
请求类型包括POST、GET、JSONP、DELETE、PUT、HEAD

$http配置对象方式与服务端交互

在angular中，还可以将$http服务模板当成一个函数来使用，将构造XHR对象的所有配置项作为一个对象，并将对象定义为函数的形参，在调用时，只需将形参改对象中各属性值即可，调用格式如下：

$http({
    method:
    url:
    data:
    params: （字符串或对象，追加到url后，作为发送数据的一部分）
    transformRequest:（对请求头和请求体进行序列化，生成数组发送给服务端）
    transformREsponse:（解析服务器发送来的被序列化的数据）
    cache: (是否对请求返回的数据进行缓存)
    timeout: (延迟发送)
})

$http({
    //配置对象
}).success(fn1)
.error(fn2)
等价于
$http({
    //配置对象
}).then(fn1,fn2)

angular jsonp回调函数名一定是JSON_CALLBACK

4.自定义服务

创建自定义服务有两种方法：

1、使用内置的$provide服务(config)
2、调用模块当中的服务注册方法（factory,service,constant,value）

5.使用factory方式自定义服务

App.factory（name,fn）

6.使用service方式自定义服务

App.service（name,fn）

7.使用constant和value方式自定义服务

Constant方法调用格式：
App.constant(name,value)

Value方法调用格式：
App.value（name,value）

----插件----

ng-route

    引入对应版本的ng-route插件
设置显示容器ng-view
定义$routeProvider配置(config)
    when
        template
        templateUrl
        controller
    otherwise
        redirectTo

ng-sanitize

<ul>
    <li><a href=“#/”>默认项</a></li>
    <li><a href=“#/second”>第二项</a></li>
    <li><a href=“#/asdasdasd”>错误路由</a></li>
  </ul>
<div ng-view></div>
<script type="text/javascript">
    angular.module('routingApp', ['ngRoute'])
      .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {
          template: '<h5>这是一个默认页面</h5>'
        })
        .when('/second', {
          template: '<h5>这是第二个页面</h5>'
        })
        .otherwise({redirectTo: '/'});
      }]);
  </script>

ng-animate

Animation api
自带的类
.ng-enter
.ng-enter-active
.ng-leave
.ng-leave-active

Angular 动画第三方库

ng-cookies

var myApp = angular.module("myApp", ["ngCookies"]);

myApp.controller("NavCtr", ["$cookieStore", function NavCtr($cookieStore) {
    $cookieStore.put("AngularJs", "xcccc");
    var xx = $cookieStore.get("AngularJs");
    console.info(xx);
}]);

$cookieStore  有三个方法 ：

1:get(key)     获取cookie
2:put(key,value)   设置cookie
3:remove(key)    移除cookie