angularjs学习笔记--组件$http$qmodule
Posted 艳阳天
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs学习笔记--组件$http$qmodule相关的知识，希望对你有一定的参考价值。
1-组件
创建组件，使用angularjs模块的conponent()方法，component(name,options);使用编译器注册组件定义，表示应用程序中的一个独立的UI组件。组件定义通常仅由模板和控制器组成。name为组件名，options为组件定义对象，其属性包括：controller（应该与新创建的作用域相关联的控制器构造函数或作为字符串传递的注册控制器的名称）、controllerAs（用于在组件范围内引用控制器的标识符名称）、template（html模板作为一个字符串或函数返回一个HTML模板作为一个字符串，应该被用作这个组件的内容，默认为空字符串）、templateUrl（路径或函数，返回一个应该用作该组件内容的HTML模板的路径）、bindings（定义DOM属性与组件属性之间的绑定，组件属性始终绑定到组件控制器）、transclude（是否启用内容泄露）、require（要求其他指令的控制器并将其绑定到该组件的控制器）、$...（附加到指令工厂函数和控制器构造函数的附加属性，组件路由器用于注释）
定义组件的例子：
var myMod = angular.module(‘phonecatApp1‘, []);
//1
myMod.component(‘myComp‘,{
template:‘<div>My name is {{$ctrl.name}}</div>‘,
controller:function(){
this.name = ‘shahar‘;
}
});
//2
myMod.component(‘myComp‘,{
template:‘<div>My name is {{$ctrl.name}}</div>‘,
bindings:{name:‘@‘}
});
//3
myMod.component(‘myComp‘,{
templateUrl:‘views/my-comp.html‘,
controller:‘MyCtrl‘,
controllerAs:‘ctrl‘,
binds:{name:‘@‘}
})
ps：定义组件时其名可以为myComp类似命名的组件，但在HTML 中引入时则需要使用类似<my-comp></my-comp>形式的命名法。
使用组件形式实现ul电话列表：
Component.html文件：
<!DOCTYPE html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular/angular.js"></script>
<script src="../scripts/app1.js"></script>
<script src="../scripts/component1.js"></script>
</head>
<body>
<phone-list></phone-list>
</body>
</html>
app1.js：
angular.module(‘phonecatApp‘,[]);
component.js：
angular.module(‘phonecatApp‘).component(‘phoneList‘,{
template:
‘<ul>‘ +
‘<li ng-repeat = "phone in $ctrl.phones">‘ +
‘<span>{{phone.name}}</span>‘ +
‘<p>{{phone.snippet}}</p>‘ +
‘</li>‘ +
‘</ul>‘,
controller:function PhoneListController(){
this.phones = [
{
name:‘Nexus S‘,
snippet:‘The Next,Next Generation tablet.‘
},
{
name:‘Motorola XOOM with wifi‘,
snippet:‘The Next,Next Generation tablet.‘
},
{
name:‘MOTOROLA XOOM‘,
snippet:‘The Next,Next Generation.‘
}
];
}
});
2--$http
$http({
url:‘data.json‘, //可以利用json文件模拟
method:‘GET‘,
Params:{
‘username’:’tan’
}
}).success(function(data,header,config,status){ //响应成功
}).error(function(data,header,config,status){ //处理响应失败
});
// 修改全部消息状态为已读
function initialize() {
var deferred = $q.defer();//生成deferred异步对象
$http({
url: ‘/api/Message/initialize‘,
method: ‘POST‘
}).success(function (result) {
deferred.resolve(result);
//执行到这里，改变deferred状态为执行成功，返回result为从后台取到的数据，可以继续执行then、done
}).error(function (result) {
deferred.reject(result);
//执行到这里，改变deferred状态为执行失败，返回data为报错，可以继续执行fail
});
return deferred.promise;
//起到保护作用，不允许函数外部改变函数体内的deferred状态，控制异步执行完成
}
Ps:url为绝对或相对的请求目标。params（字符串map或对象），会被转换成查询字符串追加到URL后面，如果不是字符串，将会被json序列化。data这个数据代表转换过后的响应体。status表示响应的HTTP状态码，headers这个函数是头信息的getter函数，可以接受一个参数，用于获取对应名字值。config这个对象用来生成原始请求的完整设置对象。statusText是响应的HTTP状态文本。
ps：
$q用于ajax异步请求数据的回调控制deferred。angularjs中自己封装的一种promise实现。一种内置服务，可以异步执行函数，且当函数完成时或异常时允许使用函数的返回值或返回执行状态通知。
$q常用方法：defer()创建一个deferred对象，该对象可以执行几个常用方法，如resolve、reject、notify等,all()传入promise的数组，批量执行，返回一个promise对象，when()传入一个不确定参数，若符合promise标准就返回一个promise对象。promise中定义的三种状态：完成状态、等待状态、拒绝状态。状态的变更是不可逆的，等待状态可以变成完成或拒绝状态。
promise/deferred：承诺/延迟
promise帮助开发者用同步的方式编写异步的代码。一种对执行结果不确定的一种预先定义，如果成功做什么事，失败做什么事，像是事先给了承诺。
defer，延迟，$defer()可以创建一个defer延迟对象实例，表示将会完成的任务的对象。$q中，使用resolve方法变成完成状态，使用reject方法，变成拒绝状态。
3--module
module是angularjs代码的入口，首先需要声明module，然后才定义angularjs中的其他组件元素，如controller、service、filter、directive、config代码块、run代码块等。
angular.module()可传入三个参数：模块的名称（必选参数，在其他地方可以被其他模块注入或在ngApp指令中声明应用程序主模块）、模块的依赖（本模块需要依赖的其他模块的参数，若此处无声明，则无法在模块中使用依赖模块的任何组件）、模块的启动配置函数（在angularjs config阶段会调用该函数，对模块中的组件进行实例化对象实例之前的特定配置，如$routeProvider配置一样程序的路由信息）。
参考学习并感谢：
https://docs.angularjs.org/tutorial/step_00
http://www.runoob.com/angularjs/angularjs-tutorial.html
以上是关于angularjs学习笔记--组件$http$qmodule的主要内容，如果未能解决你的问题，请参考以下文章