Angular基础（下）
2016-11-10 本文已影响52人
小纸人儿
$http
$http 服务是核心服务，用于与服务器通信，通过浏览器的 XMLHttpRequest 对象或通过 jsonp
要使用 $http 服务需要在 controller 中注入 $http 模块
$http 使用 promise 规范
1、$http method
设置请求的方式:get , post , jsonp , head , put , delete , patch
2、$http headers
设置请求头信息
var req = {
method: 'GET',
url: '/ajax/api/path',
headers: { 'Content-Type': 'pplication/json' }
}
$http(req).then(function(response){ //请求成功时}, function(error){ //请求失败时});
3、$http.get
$http.get("url").then(function(response){
//请求成功时
}, function(error){
//请求失败时
});
4、$http.post
$http.post("url").then(function(response){
//请求成功时
}, function(error){
//请求失败时
});
5、$http.jsonp
$http.jsonp("url").then(function(response){
//请求成功时
}, function(error){
//请求失败时
});
Angular路由
Angular路由用于集成外部文件，是三方插件提供的服务，并不属于Angular自身的服务
路由效果类似于选项卡，tab切换，不同的是路由可回退到上一次浏览的页面
路由一般有两种写法：ng-route（pc） 、ui-route（移动端）
1、载入实现路由的js文件 angular-route.js
（该js版本需低于引用的angular.min.js）
2、包含了ngRoute模块作为主应用模块的依赖模块
var app = angular.module( 'myapp' , ['ngRoute'] );
3、使用ngview指令，不用赋值
<div ng-view></div>
4、配置$routeProvider，用来定义路由规则
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title> Angular 路由 </title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-route.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-controller="mycont">
<h1>{{ title }}</h1>
<nav>
<a href="#page1">首页</a>
<a href="#page2">子页</a>
<a href="#page3">详情页</a>
<a href="#page4">购物车</a>
</nav>
<div ng-view></div>
</body>
<script type="text/javascript">
var app = angular.module('myapp' , ['ngRoute']);
// config 用来定义路由规则
app.config( function($routeProvider){
$routeProvider
.when('/page1' , {template:'<p>这是首页</p>'})
.when('/page2' , {template:'<p>这是子页</p>'})
.when('/page3' , {template:'<p>这是详情页</p>'})
.when('/page4' , {template:'<p>这是购物车</p>'})
.otherwise({redirectTo:'/page3'})
} )
app.controller('mycont' , function($scope){
$scope.title = '路由练习';
})
</script>
</html>
Paste_Image.png
