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){        $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>






                                             
        2        0           
	
				
	
					   
Angularjs学习笔记——Ajax服务（跨域）&&ng路由
	  	   
angularjs学习笔记01--ng-view和路由的使用
	  	   
AngularJS学习（二）——表达式，ng-bind,ng-app,ng-init,ng-repeat,ng-model
	  	   
AngularJS学习(六) 路由控制 ng-route
	  	   
AngularJS学习笔记ng-repeat
	  	   
AngularJS学习笔记ng-class
	  	   
angularjs ng-class学习笔记
	  	   
angularjs学习笔记 ng-class
	  	   
前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite
	  	   
Angularjs学习笔记——服务
	  	   
angularJS 路由 ng-route
	  	   
AngularJS——ng-repeat指令以及Ajax的应用
	  	   
angularjs学习笔记--服务
	  	   
#学习笔记#(48)angularjs ng-include
	  	   
AngularJs ng的路由机制
	  	   
AngularJs ng-route路由详解
	  	   
关于AngularJs ng-router路由
	  	   
AngularJs ng-route路由详解
	     		  
	  	   
java面试知识点总结
	  	   
低功耗蓝牙BLE之广播
	  	   
Node版本切换n
	  	   
正则表达式封装
	  	   
Java
	  	   
Angularjs学习笔记——Ajax服务（跨域）&&ng路由
	  	   
搭建Hbase集群
	  	   
java_高级_多线程
	  	   
蓝桥杯  算法训练 Hankson的趣味题  （唯一分解定理）
	  	   
遍历HashMap的四种方法
	  	   
Python中的面向对象特性（更新中……）
	  	   
快速排序算法分析
	  	   
JDBC连接数据库及具体实现代码
	  	   
Oil Deposits