Angularjs学习笔记——Ajax服务（跨域）&&ng路由

$http服务和SPA路由

$http服务

简介：$http服务是AngularJS的核心服务之一，这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程服务的数据请求！

代码：

$http({
method:”GET”,/* 请求发送方式 */
url:”http://......../com” /* 请求地址*/
}).then( /* then()函数表示请求完成之后的操作 */
function(response) {
/* 请求成功之后的操作函数 */
　　},
　　function(response) {
　　	/* 请求失败时候的操作函数 */
　　}
);

AngularJS为了方便开发人员进行快捷的异步数据请求的处理，提供了一系列的快捷函数如下：

　　　　 　$http.get()
$http.post()
$http.jsonp()
$http.header()
$http.patch()
$http.put()
$http.delete()
$http.get(“url”).then(fn1, fn2);     

例：$http.get(“url”).then(fn1, fn2);

关于传参问题：params/data 分别对应 get/post的请求方式

关于跨域  :设置白名单：>>>>

app.config(["$sceDelegateProvider",function($sceDelegateProvider
9e0f
){

$sceDelegateProvider.resourceUrlWhitelist([    		//跨域添加白名单
"self",
"http://datainfo.duapp.com/**"
]);
}
]);
$http({
     method:"JSONP",
     url:"http://datainfo.duapp.com/shopdata/getGoods.php",
     params:{classID:$stateParams.classID}
})

在config中注入$sceDelegateProvider服务使用resourceUrlWhitelist([])方法添加白名单

     跨域时将method的属性设置为"jsonp"就可以访问了

SPA路由

简介：路由是AngularJS构建单页面应用的基础。单页面应用，也称为SPA，是singleton page application的缩写。单页面应用：程序在执行的过程中，我们不论访问任何链接，都会在同一个页面中展示数据在整个项目执行过程中，客户看到的都是唯一的一个页面，不同的是~在整个页面中，会根据用户请求的内容的不同，动态的更新页面中的某一个部分的数据，在这样的模式下，项目运行只需要一个基础的页面即可，其他的都是模板。模板就是用于在这个基础页面中更新的数据。

ng-view 指令：用于展示对应模板的指令

        $routeProvider：Angular中路由服务提供者，用于配置路由信息

        $routeParams：Angular中进行路由参数传递时使用的一个内置服务
多个独立控制器之间的数据共享，方式一：使用$rootScope来进行数据共享

        多个独立控制器之间的数据共享，方式二：使用自定义服务进行数据的传递

        自定义服务主要的使用场景：用来进行不同控制器之间的数据共享和传递

代码：

<script src="../js/lib/AngularJS/angular-route.js"></script>

<!-- 在Angular1.5之前，锚链接跳转，使用#/开头即可 -->
<!-- 在Angular1.5开始，锚链接跳转，使用#!/开头即可 -->
<ul>
<li><a href="#!/">首页</a></li>
<li><a href="#!/login">登录</a></li>
<li><a href="#!/regist">注册</a></li>
<li><a href="#!/shopcart">购物车</a></li>
</ul>
<!-- 指定显示模板的位置 -->
<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);

/*
route:路由
provider:提供者
$routeProvider:AngularJS提供的用于进行路由配置的内置服务

app.config()函数主要用于进行《配置信息》的添加
*/
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl:"template/main.html"
}).when("/login", {
templateUrl:"template/login.html"
}).when("/regist", {
templateUrl:"template/regist.html"
}).when("/shopcart", {
templateUrl:"template/shopcart.html"
}).otherwise("/");
}]);
</script>