$http服务和路由
内置服务
$timeout用于注入封装的原生JS中的setTimeout()函数处理过程
$interval用于注入封装的原生JS中的setInterval()函数处理过程
$location用于注入原生JS中的location对象方便对于URL地址等操作
$http用于注入封装的Ajax操作进行异步数据请求等等
内置服务:$http
$http服务是AngularJS的核心服务之一,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程服务的数据请求!
常规的语法结构:
$http({
method:”GET”,/* 请求发送方式 */
url:”http://......../com” /* 请求地址*/
}).then( /* then()函数表示请求完成之后的操作 */
function(response) {
/* 请求成功之后的操作函数 */
},
function(response) {
/* 请求失败时候的操作函数 */
}
);
以登录页面为例:
引入的文件:
<script src="js/lib/AngularJS/angular.min.js"></script>
css页面
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="g in goodsList">
<span ng-bind="g.classID"></span>*****
<span ng-bind="g.className"></span>
</li>
</ul>
</div>
js页面:
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", ["$scope", "$http",
function ($scope, $http) {
$scope.goodsList = [];//保存所有商品的数组
// 异步请求获取数据
$http({
method:"GET",
url:"http://datainfo.duapp.com/shopdata/getclass.php"
}).then(
function success(resp){
console.log(resp);
$scope.goodsList = resp.data;
},
function error(resp){
console.log("errorLLLLLL" + resp);
}
);
}]);
</script>
AngularJS为了方便开发人员进行快捷的异步数据请求的处理,提供了一系列快捷函数方便开发,主要有以下函数:
必须掌握的是:
$http.get()
$http.post()
$http.jsonp()
了解的是:
$http.header()
$http.patch()
$http.put()
$http.delete()
例:
$http.get(“url”).then(fn1, fn2);
其实快捷方式就是简单的封装$http服务,常规项目开发时,使用较多的是原始的内置服务$http({}).then(fn1,fn2)函数
进行异步数据处理
路由-ng-router
路由是AngularJS构建单页面应用的基础。单页面应用,也称为SPA,是singleton page application的缩写。
单页面应用:
程序在执行的过程中,我们不论访问任何链接,都会在同一个页面中展示数据
在整个项目执行过程中,客户看到的都是唯一的一个页面,不同的是~在整个页面中,会根据用户请求的内容的不同,动态的更新页面中的某一个部分的数据,在这样的模式下,项目运行只需要一个基础的页面即可,其他的都是模板。模板就是用于在这个基础页面中更新的数据。
传统项目中,通过大量的页面之间的跳转,来实现不同的功能的业务处理,如index.html主要用于系统首页数据的展示、login.html页面主要用于用户登录业务的处理,而相对应的regist.html页面主要用于新用户的注册业务的处理,一个项目中会充斥着大量的页面和页面之间的跳转处理,如果项目的业务非常复杂的情况下,网页的开发和维护就会造成大量重复的工作,同时也提升了开发和维护的复杂度。
什么是路由?
路由,就是网络数据或者请求进行分发的一个网络组件。
路由就是一个用于请求URL分发和跳转的一个应用组件,Angular中通过$routeProvider路由服务提供者进行核心的配置处理。
ng路由主要分三个组成部分:路由指令、路由服务、路由服务提供者
路由指令:ng-view
描述:
ngView指令主要用于将路由指向的页面渲染到当前页面的布局中。
指令概述:
指令会创建自己独立的作用域
语法:
<ng-view [οnlοad=”string”] [autoscroll]=”string”></ng-view>
onload:当视图发生改变时执行属性值中的表达式
autoscroll:当视图发生改变时自动触发$anchorScroll事件
事件:
路由视图一旦加载时,就会自动触发$viewContentLoaded事件
路由提供者:$routeProvider
描述:
内置服务对象$routeProvider主要用于进行路由配置
该服务的使用必须依赖ngRoute模块,也就是项目中必须添加animate-route.js
以下为例:
引入的文件:
<!-- 引入核心框架文件 -->
<script src="../js/lib/AngularJS/angular.min.js"></script>
<!-- 引入Angular路由模块文件 -->
<script src="../js/lib/AngularJS/angular-route.js"></script>
css页面:
<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>
js页面:
<script>
var app = angular.module("myApp", ["ngRoute"]);
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>
主要方法:
when(path, route);用于在访问path路径时,跳转到route指定的视图
|-- path:路由跳转的路径
|-- route:路由对象<组件对象>,一个JSON对象
otherwise(params);用于在访问不存在的路径时,跳转的默认路径或者视图
|-- params:指定路径或者路由对象
内置服务<路由服务>:$route & $routeParams
$route服务被用于进行深层超链接信息的描述,它会监听$location.url()地址并进行url地址和指定的路由视图之间的映射关系。
$routeParams服务允许开发人员可以进行路由中参数的处理。