Angular路由

今天我们来说一下路由，当你看到这个名词第一时间是不是想到家用的路由器呢?当我看到是第一时间想到的就是家里用的路由器，那AngularJS种的路由又是什么呢？我们一起来说说吧......
1.路由是什么？
angularjs路由是指一款用angularjs前端语言设计出程序和框架的路由器。
2.Angular中的路由，主要依赖的模块：angular-route.js
 
 


 
 
3.路由的使用
 
 

  
  

 
 
 
 

  
  首先要引入AngularJS的文件:
 
 
 
 

  
  
  
  
 <script src="../js/lib/AngularJS/angular.min.js"></script>
 <script src="../js/lib/AngularJS/angular-route.js"></script>
  
  

   
   

  
  
上述代码中引入的第一个文件为核心框架文件,第二个为路由模块文件
 
 
 
 

  
  

 
 
 
 

  
  接着为html页面：
 
 
 
 

  
  
  
  
<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>
  
  
上述中的指令“ng-view”指的是用于展示对应模板的指令
 
 
 
 

  
  我们是利用a标签的锚点跳转
 
 
 
 

  
  

 
 
 
 

  
  在此我们应该注意：
 
 
 
 

  
  在Angular1.5之前，锚链接跳转，使用#/开头
在Angular1.5开始，锚链接跳转，使用#!/开头
 
 
 
 

  
  

 
 
 
 

  
  最后是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>
  
  

 
 
 
 

  
  在js代码中：route是路由的意思，provider是提供者用于配置路由信息，而$routeProvider:AngularsJS是提供的用
 
 
 
 

  
  于进行路由配
  
  置
  
  的内置服务，app.config（）函数主要用于进行《配置信息》的添加，这段代码与之前AngularJS代
 
 
 
 

  
  码不同的地
  
  方是：var app = angular.module("myApp",[
  
  "ngRoute"
  
  ]),要特别的注意第二个参数，不要忘记写。
 
 
 
 

  
  

 
 
 
 

  
  在页面显示的效果为：
 
 
 
 

  
  

 
 
 
 

  
  


 
 
 
 

 
 

  
  它的文件的目录为：
 
 
 
 

  
  

 
 
 
 

  
  

 
 
 
 

  
  

 
 
 
 

  
  说起路由就少不了说起单页面应用，也称为SPA，是singleton pageapplication的缩写。
 
 
 
 

  
  

 
 
 
 

  
  什么是单页面应用？
 
 
 
 

  
  

 
 
 
 

  
  单页面应用：程序在执行的过程中，我们不论访问任何链接，都会在同一个页面中展示数据，在整个项目执行过
  
  程
 
 
 
 

  
  中，客户看到的都是唯一的一个页面，不同的是~在整个页面中，会根据用户请求的内容的不同，动态的更新页面中
 
 
 
 

  
  的某一个部分的数据，在这样的模式下，项目运行只需要一个基础的页面即可，其他的都是模板。模板就是用于在
 
 
 
 

  
  这个基础页面中更新的数据。
 
 
 
 

  
  
  
  
SPA通过路由功能，让我们的WEB应用，在运行过程中，依托于某一个页面模板进行业务处理，在SPA应用中，我们可
  
  
以通过一个模板页面和其他的业务页面进行不同的路由组合来完成复杂和庞大的页面逻辑和业务的处理！
  
  

 
 
 
 

  
  

 
 
 
 

  
  SPA应用中，单页面中就会出现多个独立的控制器

 
 
 
 

  
  

 
 
 
 

  
  多个独立控制器之间的数据共享，方式一：使用$rootScope来进行数据共享

 
 
 
 

  
  多个独立控制器之间的数据共享，方式二：使用自定义服务进行数据的传递

 
 
 
 

  
  自定义服务主要的使用场景：用来进行不同控制器之间的数据共享和传递

 
 
 
 

  
  

 
 
 
 

  
  例如：
 
 
 
 

  
  
  
  
<script>
    var app = angular.module("myApp", ["ngRoute"]);

  
    app.config(["$routeProvider", function($routeProvider) {
        $routeProvider
            .when("/", {
                templateUrl:"template/main.html",
                controller:function($rootScope,$scope) {
                    $scope.user = $rootScope.user;
                }
            }).when("/login", {
                templateUrl:"template/login.html",
                controller:function($scope, $http, $location,$rootScope) {
                    $scope.loginFn = function() {
                        $http({
                            method:"GET",
                            url:"http://datainfo.duapp.com/shopdata/userinfo.php",
                            params:{
                                status:"login",
                                userID:$scope.username,
                                password:$scope.password
                            }
                        }).then(
                            function(resp) {
                                console.log("请求成功");
                                if(resp.data instanceof Object) {
                                    console.log("登录成功,跳转到首页");
                                    $rootScope.user = resp.data;
                                    $location.path("/");
                                } else {
                                    console.log("账号或者密码有误");
                                }
                            },
                            function(resp) {
                                console.log("请求失败[系统繁忙，请稍后再试]");
                            }
                        );
                    }
                }
            })
	}])
</script>
  
  
实现显示登陆的用户需要用到多个控制器，效果在页面上显示用户正在访问页面。