首页 > 代码库 > angular路由(自带路由篇)

angular路由(自带路由篇)

一、angular路由是什么?

  为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器。所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换。

二、文件总览

  技术分享

  1.新建文件  

    一级目录新建ngRoute.html(为主页面,里面进行路由配置)

    一级目录新建view文件夹,里面再新建三个子页面aboutus.html,home.html,order.html

    一级目录存放angular.js和angular-route.js文件,文件存放位置依自己喜好即可

  

  2.ngRoute.html代码展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="angular.min.js"></script>
        <script src="angular-route.js"></script>
    </head>
    <body ng-app=‘myApp‘>
        <a href="#/home">HOME</a>
        <a href="#/aboutus">AHOUTUS</a>
        <a href="#/order">ORDER</a>
        <!--ng-view相当于之前的div#container,用来展示子视图-->
        <ng-view></ng-view>
        <!--ng-view和下面的代码等价-->
        <!--<div id="container" ng-view></div>-->
    </body>
    <script>
        var app=angular.module("myApp",[ngRoute]);
        //配置路由
        app.config(function($routeProvider){
            //如果是home 让ng-view里面的视图是home.html
            $routeProvider
            .when(/home,{
                templateUrl:view/home.html,
                controller:homeVC
            })
            .when(/aboutus,{
                templateUrl:view/aboutus.html,
                controller:aboutusVC
            })
            .when(/order,{
                templateUrl:view/order.html,
                controller:orderVC
            })
            .otherwise({
                redirectTo:/home  //重定向到home页面
            })
        });
        //配置Controller
        app.controller(homeVC,function($scope,$routeParams){
            console.log($routeParams);
            $scope.title=我是homeVC
        });
        app.controller(aboutusVC,function($scope){
            $scope.title=我是aboutusVC
        });
        app.controller(orderVC,function($scope){
            $scope.title=我是orderVC
        });
        
    </script>
</html>

  页面定义了三个路由,并默认重定向到了home页面,三个页面分别配置控制器controller,里面都定义了变量title的值。结构层的a标签通过#/参数的形式给url添加参数,然后根据定义的路由找到相应的参数,将相应的子页面放入ng-view容器中。

  

  3.子页面代码展示

<h1>{{title}}</h1>

  为了简化操作,三个子页面都只存放了一条相同的代码。title变量因为控制器赋值不同而展示不同的信息。

 

三、效果展示

  打开页面,默认展示home子页面信息,如下:

技术分享

  点击AHOUTUS,子页面进行切换,如下:

技术分享

  点击ORDER,如下:

技术分享

  这样就实现了angular一级路由的切换效果,用来实现移动端导航还是很使用的,但若是需要二级路由,三级路由,这时我们就需要用到第三方路由,由于是采用的第三方插件,所以写法和用法有些差异,angular路由(第三方路由篇)做详细介绍。

 

angular路由(自带路由篇)