angular.js入门汇总（上）

                                                               总体把握

angular.js5大核心：

1，mvc模式  

2，双向数据绑定

3，依赖注入

4，模块系统

5，指令系统

 

mvc模式：

function  app($scope){

$scope.name="bob";   //这是mvc中的model

}

<div  ng-controller="app">  //这是mvc中的control

{{name}}            //这是mvc中的view

</div>

依赖注入：

函数中的形参并不是自己随意定义的，而是依赖于angular内部，已经自动注入了形参，直接调用即可

function  aaa($rootscope){

$rootscope.name="bob";

}

function bbb($scope){

}

<div ng-controller="bbb">

{{name}}    //虽然在bbb中找不到name，但是在aaa中包含rootscope，即全局作用域中有name;

</div>

指令系统：

ng-app，ng-controller

双向数据绑定：

mvvm（数据改变---视图改变，视图改变--数据改变），

$timeout（相当于js中的settimeout，由于settimeout不能实时修改angular中视图的数据，所以使用angular中的$timeout来替代)

ng-model，ng-click

|currency:'￥'

                                                                细节部分

1，angular.js是以js形式发布的框架文件，引入地址：

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

2，一个angular.js互相引用的前提是他们都在一个ng-app下：

实例：

<div  ng-app="first">

     <input  type="text"   ng-model="firstname">

    <p > {{ firstname}}  </p>     //引用ng-model中的内容，input和p元素必须在同一个ng-app="first"下，否则没用；

</div>

3，表达式：

{{   }}中可以添加变量，运算符，字母，数字，对象方法属性的引用，数组中的值；若括号中不含数字或者绑定的变量，会直接将{{ 字母，运算符}}全部显示到页面；

但是如果{{  }}中包含数字或者变量，会直接显示它们忽略字母；

{{  }}与ng-bind有异曲同工之妙；

实例：

<div ng-app=' '>

     <p  ng-init="people={person:bob,age:12}" ></p>

    <p   ng-bind="people.person">{{people.age}}</p>  //仅仅返回bob,直接将{{  }}中值屏蔽；

</div>

4，内置指令：

ng-app:,

ng-init:

ng-model:整个模型都需要它

ng-bind:在某个标签中绑定某个ng-init的初始值，用于显示数据；

ng-show:用于验证邮箱显示错误信息；

ng-repeat:angular不可以使用循环语句，但是通过ng-repeat，可以使用 x  in  arr来进行数组遍历并以html方式输出；

5，内置方法：

app.directive

app.controller

 

5，自制指令：

var app=angular.module("myapp",[ ]);

app.directive("myownApp",function(){

return { template:   "hello"  };

});  //此时定义好了一个指令，调用它会返回值hello;

E:<myown-app></myown-app>  //显示hello;

A:<p myown-app></p>     //显示hello;

C:<p class="myown-app"></p>

M:<!--directive:myown-app-->

6，刚才讲有四种方法可以调用自定义指令：现在我们限制它被调用的类型；

var  app=angular.moduel("myapp", [ ]);

app.directive("runOob" ,function(){
return{

district:  A/B/C/D/E;

template: "hello";

}

7，模型（ng-model)：

单向绑定：

ng-model:  将angular.js创建的变量绑定到输入域（input);

<div ng-app="mymode"  ng-controller="control">

<input type="text"   ng-model="cuteage">       //输入域显示：12

</div>

var app=angular.module("mymode",[ ]);

app.controller("control",function($scope){

$scope.cuteage="12"; //为输入域创建一个变量

}

双向绑定：

          1，angular.js创建一个变量绑定到输入域

          2，输入域输入值，将值传递到表达式{{  }}中；

           所以，只需要在html的标签中加一个表达式：

          <p>{{ cuteage}}</p>

验证邮箱格式：

<form    ng-app="hello"  name="tb" >

<input  type="mail"  name="dot" ng-model="a" >

<span  ng-show="tb.dot.$error.email"></span>

</from>

虽然这里面仿佛ng-app和ng-model随意修改值并不影响正确判断邮箱的正误，但是如若省略则出错

检查输入框的状态：required不可忽略

<form name="tb1"  ng-app=" ">

<input  name="inp"  type="email"  ng-model="my"  required>

状态：

{{tb1.inp.$valid}}                  //格式为email的input，输入的邮箱格式是否正确；

{{ tb1.inp.$dirty}}                 //输入框的内容是否被修改；

</form>

利用整个特性可以设置css的 class类:

input.ng-invalid{

background-color:red;
}   未被污染的input背景色

<form name="tb"  ng-app=' '>

<input name="inp"  ng-model="my"  required>

</form>

常见：ng-valid/ng-invalid是否有效

           ng-dirty是否被污染

           ng-empty/ng-not-empty是否为空

           ng-touched/ng-untouched是否被触摸

           ng-pristine:原始的；

           ng-pending:待定的；

8，控制器：ng-controller

<div ng-app="my"  ng-controller="control">

<input  ng-model="firstname">

<input ng-model="lastname">

{{firstname+lastname}};

</div>

<script>

var app=angular.moduel("my", [ ]);

app.controller("control", function（$scope){

$scope.firstname="a";

$scope.lastname="f";

})

</script>

以上的html和js合起来就像是一个程序（函数）：

首先ng-app定义了作用域，是在my中有效，接着ng-controller定义了函数名称，是control,

接着$scope作为control函数的参数对象，调用作用域my内属性firsetname,lastname，而这两个属性被ng-model绑定表示；

既然如此，有属性也可以有方法：

$scope.fullname=function(){

return   $scope.firstname+$scope.lastname;

}

既然把控制器看作函数名了，那么当然可以将script中的程序封成js文件，从外部引入文件即可

9，作用域：

不需要多说，但是有一点，$scope作为参数对象可以设置相对应作用域中的属性，有点类似原型链的意思，他们都又一个共同的根对象: &rootScope,也可以设置属性，方法；

10，过滤器：过滤器描述了将一些数据以怎样的方式展示出来；

例子：

<div  ng-app=""  ng-controller="control">

<input type="text" ng-model="firstname">

{{firstname|upercase}}    //输入框中的内容将全部以大写的方式展示到界面上；

</div>

uppercase      大写

lowercase     小写

orderBy [name]     按属性name首字母升序排列

currency      输入的数字前面将自动添加$，即以货币的形式展示数据；

filter: [ng-model中的值]  根据输入框的内容筛选，过滤；

像自定义控制器那样，也可以自定义过滤器：

var  smart=angular.module("hello",[ ]);

smart.controller("hi",function($scope){

$scope.name="mike";      //必须定义控制器，且控制器$scope参数对象必须赋初值，如果不想有值也得赋为空；否则会报错；

}）

smart.filter("reverse",function(){

return function(t){

return t.split("").reverse().join(" ");  //其中参数t，可以是任意字母，但是必须上下一致，且必须定义；

}});

定义完毕可以使用：

<div ng-app="hello" ng-controller="hi">

<input  ng-moduel="name" type="text">

{{ name|reverse}}

</div>