发表于: 2016-11-28 00:28:11
1 1828
今天完成的事情:
angularJS Ajax:
核心服务为$http,通过XMLHttpRequest或JSONP与远程HTTP服务交流。
$http:接受一个设置对象,制定如何创建HTTP请求;返回promise对象,提供两个方法:success和error。
[code]$http.get({url:"/xxx.action"}).success(function(data){
alert(data);
}).error(function(){
alert("error");
});
可接受配置项:
method
方法url
路径params
GET请求的参数data
post请求的参数headers
头transformRequest
请求预处理函数transformResponse
响应预处理函数cache
缓存timeout
超时毫秒,超时的请求会被取消withCredentials
跨域安全策略的一个东西
var p = $http({
method: 'JSONP',
url: '/json',
params: {callback: 'JSON_CALLBACK'}
});
p.success(function(response, status, headers, config){
console.log(response);
$scope.name = response.name;
});
AngularJS 控制器:ng-controller
ng-controller定义应用程序控制器,给所在的 DOM 元素创建了一个新的 $scope 对象,并将这个 $scope 对象包含进外层 DOM 元素的 $scope 对象里。
$scope 是一个把 view(一个DOM元素)连结到 controller 上的对象(JavaScript对象)
每一个 Angular 应用都会有一个 $rootScope。这个 $rootScope 是最顶级的 scope,它对应着含有 ng-app 指令属性的那个 DOM 元素。所有scope都遵循
原型继承。
<div ng-app="" ng-controller="personController">
名: <input type="text" ng-model="person.firstName"><br>
姓名: {{fullName()}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe",
};
$scope.fullName = function() {
var x;
x = $scope.person;
return x.firstName + " " + x.lastName;
};
}
</script>
AngularJS 模块:
默认模块ng,提供 $http , $q 等等服务;
angular.module定义模块,调用时声明对其它模块的依赖,并定义“初始化”函数。
内置服务以及自定义服务;
AngularJS 路由:
单独的模块,包含:
- 服务
$routeProvider
用来定义一个路由表,即地址栏与视图模板的映射 - 服务
$routeParams
保存了地址栏中的参数,例如{id : 1, name : 'tom'}
- 服务
$route
完成路由匹配,并且提供路由相关的属性访问及事件,如访问当前路由对应的 controller - 指令
ngView
用来在主视图中指定加载子视图的区域
定义路由:
1、引进文件和依赖:在页面上引入 angular-route.min.js 并在模块中注入对 ngRoute 的依赖;
var app = angular.module('MyApp', ['ngRoute']);
2、定义路由表:$routeProvider 提供定义路由表的服务,有两个核心方法:when(path,route)
和 otherwise(params)
when(path,route):
path为string类型,表示该条路由规则所匹配的路径,与地址栏的内容($location.path)值进行匹配。若匹配参数,在path中使用冒号加名称的的形式:path为 /show/:name ,如果地址栏是 /show/tom ,那么参数 name 和所对应的值 tom 便会被保存在 $routeParams 中
{name : tom}
route 参数是一个 object,用来指定当 path 匹配后所需的一系列配置项,包括:
controller
function 或 string 类型。在当前模板上执行的 controller 函数,生成新的 scope;controllerAs
string 类型,为 controller 指定别名;template
string 或 function 类型,视图所用的模板,这部分内容将被 ngView 引用;templateUrl
string 或 function 类型,当视图模板为单独的 html 文件或是使用了<script type="text/ng-template">
定义模板时使用;resolve
指定当前 controller 所依赖的其他模块;redirectTo
重定向的地址。
3、在主视图模板中指定加载子视图的位置
模板中使用此 ngView 指令:
<div ng-view></div>
<code>1111</code>
评论