昨天学到$http的快捷方式
<body ng-app="app">
<div ng-controller="ctrl">
<h3>请输入你的信息：</h3>
<form id="userForm">
用户名：<input type="text" name="user" ng-model="params.user" /><br />
喜欢的图书:<select multiple="multiple" name="books" ng-model="params.books">
<option value="java">疯狂</option>
<option value="javaee">ddd</option>
<option value="ajax">sdsd</option>
<option value="xml">aaaa</option>
</select><br />
<input id="load" type="button" value="异步发送post" ng-click="send();" />
</form><hr />
<div ng-bind-html="show"></div>
</div>
<script>
angular.module('app',['ngSanitize'])
.config(function($httpProvider){
$httpProvider.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';
})
.controller('ctrl',['$scope','$http','$httpParamSerializer',
function($scope,$http,$httpParamSerializer){
$scope.send =function(){
$http.post('pro',$httpParamSerializer($scope.params))
.then(function successCallback(response){
$scope.show = "服务器响应状态为："+response.status+"<br />" +response.data;
},function errorCallback(response){
$scope.show = '服务异常';
});
};
}]);
</script>
</body>
这个是发送post请求，大体和http请求差不多
多视图和路由
对于一个复杂的前端页面，设计者需要将页面分解与不同的视图模板中，而用户却感觉整个应用依然停留在一个页面内，这需要ng的多视图和路由支持来实现
ng路由允许开发者通过不同的URl访问不同的内容，从而实现多视图的单页web应用
$routeProvider配置路由规则
当用户使用ng应用的时候，路由可以让用户从一个视图导航到另一个视图
虽然现在网页可以实现单页面应用，也就是在一个页面完成各种功能的实现，不跳转，普通用户依然使用传统导航模式。
传统导航模式：
1.在地址栏输入URL，浏览器导航到相应页面
2.在页面中单击连接，，浏览器地址栏会发生改变，页面导航到另一个新页面
3.单击浏览器的前景和后退按钮，浏览器会向前或向后导航
AngularJS的路由借鉴了这个模型，他把浏览器中的url看做一个操作指南，即使在单页web中也可以使用url导航，甚至可以把参数传给支撑视图的相应组件，帮他们决定具体该展现哪些内容
开发者为页面中的链接绑定一个路由，但用户单击链接的时候，会被导航到应用中的相应视图。但用户单击按钮，从下拉框选取，或响应来自任何地方的事件时，都可以在代码控制下导航。路由器还在浏览器的历史日志中记录下这些活动，这样浏览器的前进和后退按钮也能照常工作
AngularJS使用$routeProvider服务配置，可通过多个when（）和otherwise（）方法进行配置，这些方法的语法格式如下：
when(path,route)--------当用户请求的url为path的时候，ng使用route路由进行处理
otherwise(route)---------当用户请求的url不匹配when（）配置的path时，用otherwise处理
route参数是一个js对象，他支持下列属性
controller-该属性指定处理该路由的控制器参数，该属性的值既可以是函数名，也可以是直接定义的函数
controllerAs----该控制器指定一个别名，指定该属性后，该控制器会被添加到$scope中
template----该属性指定处理该路由的html模板字符串
templateUrl-------该属性指定处理该路由的html模板URL
resolve-----该属性指定一个JS对象，要包含key-value键对
resolveAs-----为resolve指定的对象指定一个别名，如果不指定别名，默认为$resolve
redirectTo-----将路由器重定向到摸个url，如果指定了该属性，前面的controller和template都不用了
reloadOnSerach-----是否只有当$location.search()和$loaction.hash（）返回true时才会重新加载路由，默认true
caseInsensitiveMatch--------是否区分大小写，默认false
<body ng-app="app">
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#!/">首页</a></li>
<li><a href="#!/add">电脑</a></li>
<li><a href="#!/view">打印机</a></li>
<li><a href="#!/edit">其他</a></li>
</ul>
<div ng-view></div>
<script>
angular.module('app',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{
// controller:'ListController',
template:'list.html'
})
.when('/add',{
// controller:'AddController',
template:'add.html'
})
.when('/view',{
// controller:'DetailController',
template:"detail.html"
})
.when('/edit',{
// controller:'EditController',
template:'edit.html'
})
.otherwise({redirectTo:'/'});
}
]);
</script>
</body>
4个when（）方法对模块进行配置了4个路由，这四个路由指定用户请求的字符串与控制器、html模板之间的对应关系
创建多视图
下面先为路由配置中的控制器提供函数，可通过调用angular.module中的controller（）方法来添加控制器。
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
