您的位置：首页 > Web前端 > AngularJS

AngularJS的内置服务和路由

2017-05-02 20:07 344 查看

内置服务：

AngularJS提供了大量的内置服务，通过这些内置服务就可以快捷的进行一些业务功能流程的自动处理了，如：

$window用于注入原生JS中的window对象

$document用于注入原生JS中的document文档对象

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

/* 请求失败时候的操作函数 */

}

);

快捷函数：

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

路由ng-router

路由是AngularJS构建单页面应用的基础。

什么是路由？

路由，就是网络数据或者请求进行分发的一个网络组件。

路由就是一个用于请求URL分发和跳转的一个应用组件，Angular中通过$routeProvider路由服务提供者进行核心的配置处理。

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

案例：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/lib/AngularJS/angular.min.js"></script>
<script src="../js/lib/AngularJS/angular-route.min.js"></script>
</head>
<body>
<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>
</body>
<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>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航