AngularJS的内置服务和路由

内置服务:

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>


  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值