Angular JS 入门学习

1、内置指令

ng-app 制定控制域，模型的意思。

ng-model 定义模型，与HTML元素绑定——-配合使用ng-init 数据模型初始化。

ng-bind 绑定ng-model，可用“｛｛｝｝”来代替。

ng-click 点击事件。 ng-dblclick(双击）

ng-hide、ng-show 赋值为true、false 显示或者隐藏页面元素。（效率比较低，不推荐）

ng-if 用来代替ng-hide、ng-show 拥有比较高的效率。

ng-repeat 常用来遍历显示集合与数组，

<tr ng-repeat="item in  intems"><td>{{item.id}}<td>{{item.name}}<td><tr>

<select ng-model="",ng-options="item.id  as (item.name) in items"></select>

ng-include 使用ng-include可以加载、编译并包含外部HTML片段到当前的应用中。模板的URL被限制 在与应用文档相同的域和协议下，可以通过白名单或包装成被信任的值来突破限制。

ng-switch 这个指令和ng-switch-when及on=”propertyName”一起使用，可以在propertyName发生变 化时渲染不同指令到视图中

<input type="text" ng-model="person.name"/>
<div ng-switch on="person.name">
<p ng-switch default>And the winner is</p>
<h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div>

2、常用过滤器：

语法：管道字符（|）+过滤器名称。

｜uppercase、|lowercase 大小写转换

｜currey 数值–货币

｜date: 格式，日期转换，demo：‘yyyy-MM-dd HH:mm:ss’字符串格式 代表 年-月-日 24时：分：秒

｜filter：

｜json :将JSON、JS转换成字符串

｜limitTo：ｐ　截取字符串　　参数为数值，正前　负后。

｜number：ｐ　数字转换成文本

｜order　排序

3、控制器

demo:

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

Angular.module(“appname”,function(scope)｛｝）；定义控制器注意：scope是将DOM元素连接至控制器，最常用的便是完成数据绑定。使用scope.ModelName来完成操作数据。scope是可以继承的，即如果在一个控制器中添加一个内置控制器，该控制器可以继承所有的外层控制其中的所有变量。

定义控制器的另一种方法：

function Mycontroller($scope){};Mycontroller为控制器的名称。

4、监听数据

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下：

watchExpression：监听的对象，它可以是一个angular表达式如’name’,或函数如function(){return $scope.name}。

listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

scope.$apply（）的使用

$$apply方法用来传播Model的变化。即可以使用$apply 来启动监听。

5、与外界通信（$http的使用）

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response.records;});
});

$http请求的配置对象

$http()接受的配置对象可以包含以下属性:

method:http请求方式，可以为GET,DELETE,HEAD,JSONP,POST,PUT

url:字符串，请求的目标

params:字符串或者对象，会被转换成为查询字符串追加的url后面

data:在发送post请求时使用，作为消息体发送到服务器

headers:一个列表，每个元素都是一个函数，返回http头

xsrfHeaderName(字符串)：保存XSFR令牌的http头的名称

xsrfCookieName:保存XSFR令牌的cookie名称

transformRequest:函数或者函数数组，用来对http请求的请求体和头信息进行转换，并返回转换后的结果。

transformResponse:函数或者函数数组，用来对http响应的响应体和头信息进行转换，并返回转换后的结果。

cache:布尔类型或者缓存对象，设置之后angular会缓存get请求。

timeout:数值，延迟请求

responseType：字符串，响应类型。可以为arraybuffer, blob,document,json, text, moz-blob, moz– - - chunked-text, moz-chunked-arraybuffer

$http请求的响应对象

angular传递给then方法的响应对象包括以下几个属性

data:转换之后的响应体

status:http响应状态码

headers:头信息

config:生成原始请求的设置对象

statusText:http响应状态的文本

拦截器

angular中通过拦截器我们可以从全局层面对请求以及响应进行拦截。

使用拦截器之前，我们通过factory()声明一个服务，然后通过$httpProvider注册拦截器。拦截器分为四种，两种成功拦截器，两种失败拦截器。

angular.module('test', []).factory('testInterceptor', function($q){
var interceptor = {
'request':function(config){
return config;
},
'response':function(resp){
return response;
},
'requestError':function(rejection){
return $q.reject(rejection);
},
'responseError':function(rejection){
return rejection
}
}
return interceptor;
})

angular.module('test', []).config(function($httpProvider){
$httpProvider.interceptors.push('testInterceptor');
})

6、指令的使用

指令的使用是为了重复利用模版，创建需要的HTML元素。

指令的定义：

angular.module("module",[]).directive("directive"，function(){return{}})

ng-app和ng-controller是特殊的指令，因为它们会修改嵌套在它们内部的指令的作用域。

介绍指令之前，要介绍前面一直在用的一些指令：

ng-app：任何具有ng-app属性的DOM元素将被标记为rootScope的起始点。rootScope是作用域链的起始点，任何嵌套在ng-app内的指令都会继承它。$rootScope的使用肯定不止这一点，将会在后面的学习中继续挖掘。通过run（）方法访问。

ng-controller：ng-controller的作用是为嵌套在其中的指令创建一个子作用域，避免将所有操作 和模型都定义在$rootScope上。

return 函数体：

restrict: String, ———-“EACM”元素、属性、类名、注释

priority: Number, ————优先级，默认为0

terminal: Boolean, ———–这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当指令 优先级相同的指令还是会被执行。（不常用）

@template: String or Template Function function(tElement, tAttrs) (…}, : ——-模版，一般独立书写。

templateUrl: String, ————-加载模版的路径

replace: true, ——-可被渲染，默认为否。

scope: Boolean or Object, ———接受参数的设置。当scope设置为true时，会从父作用域继承并创建个新的作用域对象。绑定策略，隔离外作用域的前提下。

scope: {

ngModel: ‘=’, // 将ngModel同指定对象绑定

onSend: ‘&’, // 将引用传递给这个方法

fromName: ‘@’ // 储存与fromName相关联的字符串

}

transclude: Boolean,—— 只有当你希望创建一个可以包含任意内容的指令时，才使用transclude: true。（感觉很重要啊）

controller: String or

function(scope, element, attrs, transclude, otherInjectables) { … },

controllerAs: String,

require: String, ————require参数可以被设置为字符串或数组，字符串代表另外一个指令的名字。require会将控 制器注入到其值所指定的指令中，并作为当前指令的链接函数的第四个参数。

link: function(scope, iElement, iAttrs,ngModel) { … }, —-该函数在指令编译时执行。

compile: // 返回一个对象或连接函数，如下所示： ———compile和link选项是互斥的。如果同时设置了这两个选项，那么会把compile 所返回的函数当作链接函数，而link选项本身则会被忽略。

function(tElement, tAttrs, transclude) {

return {

pre: function(scope, iElement, iAttrs, controller) { … },

post: function(scope, iElement, iAttrs, controller) { … }

}

指令的书写对于引入外部JS具有重要意义。

ngModel 的简单使用

$viewValue为视图值，

即显示在视图（页面）的实际值（就是上面例子中input输入框的值）

modelValue为模型值，即赋给ng−model的值（与控制器绑定的值）两者不一定相等，因为viewValue同步到$modelValue要经过一系列的操作（经过三个管道）。

虽然大多数情况下两者是相等的（例如上面的例子）

$parsers

为一个执行它里面每一个元素（每一个元素都是一个函数）的数组，

主要是用来做验证和转换值的过程，

ngModel从DOM读取的值会被传入到其中的函数

它会依次执行每一个函数，把每一个函数执行的结果传个下一个函数，

而最后一个函数执行的值将会传到model中，

我们可以将函数push进去，那样它就会执行。

$formatters

也是一个执行它里面每一个元素（每一个元素都是一个函数）的数组，

主要用来对值进行格式化和转换，以便在绑定了这个值的控件中显示。

当数据的模型值发生变化的时候，里面的函数会被一一执行，

同样我们就可以将函数push进去，让它执行

$viewChangeListeners的值也是一个由函数组成的数组

当视图的值发生变化的时候里面的函数会被一一调用，

实现跟$watch类似的功能。

$render函数负责将模型值同步到视图上， 如果模型值被改变,需要同步视图的值

$$setViewValue用于设置视图值(上面的例子就是将input的value值赋值给$viewValue)

$error 一个包含所有error的对象

$setPristine 设置为原始状态，会添加ng-pristine的class类名，移除ng-dirty的class类名

7、服务的基本使用

服务提供了一种能在应用的整个生命周期内保持数据的方法，它能够在控制器之间进行通 信，并且能保证数据的一致性。

服务是一个单例对象，在每个应用中只会被实例化一次（被$injector实例化），并且是延迟 加载的（需要时才会被创建）。服务提供了把与特定功能相关联的方法集中在一起的接口。

Demo：//

angular.module('myApp', []) .factory('UserService', function($http) {
var current_user;
return {
getCurrentUser: function() { return current_user; },
setCurrentUser: function(user) { current_user = user; }
}; });

注册一个服务：使用angular.module的factory API创建服务。

angular.module('myApp.services', []) .factory('githubService', function() {
var serviceInstance = {}; // 我们的第一个服务
return serviceInstance;
});

同创建控制器的方法一样，服务的工厂函数既可以是一个函数也可以是一个数组（前面有漏讲）：

// 用方括号声明工厂

angular.module(‘myApp.services’, []) .factory(‘githubService’, [function($http) { }]);

服务的使用：可以在控制器、指令、过滤器或另外一个服务中通过依赖声明的方式来使用服务。

依赖声明：

- 推断式注入声明—-injector.invoke(function($$http, greeter) {});

- 行内注入声明—-

angular.module('myApp') .controller('MyController',['scope', 'greeter',
function(scope, greeter) {
}
]);

显式注入声明。

将服务的名字当作参数传递给控制器函数，可以将服务注入到控制器中。当服务成为了某个 控制器的依赖，就可以在控制器中调用任何定义在这个服务对象上的方法。

angular.module('myApp', ['myApp.services'])
.controller('ServiceController', function($scope, githubService) {
// 我们可以调用对象的事件函数
$scope.events = githubService.events('auser');
});

共有5种方法用来创建服务：

-factory()

angular.module('myApp') .factory('myService', function() { return { 'username': 'auser' }; });

service()

var Person = function($http) {
this.getName = function() { return $http({ method: 'GET', url: '/api/user'});
};
};
angular.service('personService', Person);

constant()

provider('myService', { $get: function() { return { 'username': 'auser' }; } });

value()

provider()