AngularJS路由的应用

路由是AngularJS构建单页面的应用基础，是单页面应用基础。也成为SPA，是singleton page application的缩写。

单页面基础：是指在程序执行过程中，我们不论访问那个链接，都会在同一个页面中展示数据，在整个执行过程中，客户看到的都是唯一的一个页面

不同的是在整个网页中，根据用户不同要求而动态的区更新页面中某一部分的数据!这样的模式，项目运行只需要一个基础页面，其他都是模板

路由，通过字面意思可能会联想到路由器，其实AngularJS路由与路由器的功能大同小异，为什么那？原因有以下几点

如上图所绘，页面中会有很多的模板，但是如何知道用户选择的是那个模板？

根据用户不同的请求，或者点击链接，然后路由进行接收，然后去寻找相对应的模板。然后返回

AngularJS路由的操作方式：

1.先引入内容

<!--引入框架-->
    <script src="../../js/angular.min.js"></script>
    <!--引入路由模块文件-->
    <script src="../../js/angular-route.min.js"></script>

2.如何根据不同的要求去配置不同的模板

 var app=angular.module("myApp",["ngRoute"]);
    $routeProvider是AngularJS提供的路由配置
    app.config(["$routeProvider",function ($routeProvider) {
        $routeProvider
            .when("/",{
                templateUrl:"route/index.html"
                /模板文件与不需要发生改变的页面文件在同一目录下，模板在同一目录下的另一个单独目录中/
        }).when("/login",{
                 templateUrl:"route/login.html"        }).when("/shop",{
            templateUrl:"route/shop.html"
        }).otherwise("/");
    }]);

3.内容输入位置

<!--如何配置路由？-->
<ul>
    <li><a href="#!/">首页</a></li>
    <li><a href="#!/login">登录</a></li>
    <li><a href="#!/shop">购物车</a></li>
</ul>
<!--通过ng-view来控制显示在什么位置-->
<div ng-view></div>