$http服务和路由

内置服务

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) {　　/* 请求失败时候的操作函数 */　　});

以登录页面为例：

引入的文件：

    <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 [onload=”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服务允许开发人员可以进行路由中参数的处理。