zoukankan      html  css  js  c++  java
  • Angular路由(三)

    AngularJs ng-route路由详解

    其实主要是$routeProvider搭配ng-view实现。

    ng-view的实现原理,基本就是根据路由的切换,动态编译html模板。

    前提

    首先必须在页面引入angular.js和angular-route,注意在angular-route之前引入angular

    <script type="text/javascript" src="js/angular.min.js" ></script>

    <script type="text/javascript" src="js/angular-route.js" ></script>

    讲解

    route和ng-view要搭配使用。ng-view相当于提供了页面模板的挂载点,当切换URL进行跳转时,不同的页面模板会放在ng-view所在的位置,然后需要routeProvider配置路由的映射。

    一般通过两个方法:

    when():配置路径和参数;

    otherwise:配置其他的路径跳转,可以想成default。

    说明一下when()的第二个参数:{

    controller:对应路径的控制器函数,或者名称。

    template:对应路径的页面模板,会出现在ng-view处,比如“<div>###</div>”

    templateUrl:对应模板的路径,比如“src/xxxx.html”

    }

    说明一下otherwise的参数:

    redirectTo:重定向地址

    具体代码如下:

    控制器的代码:

    var app = angular.module("app",["ngRoute"]);

    app.controller("ctrl",function($scope){
    })

    })

    路由的代码:

    app.config(["$routeProvider",function($routeProvider){
    $routeProvider
    .when("/aa",{
    templateUrl:"view/aa.html",
    controller:"ctrl"
    })
    .when("/bb",{
    templateUrl:"view/bb.html"
    })
    .otherwise({
    redirectTo:"/aa"
    })
    }])

  • 相关阅读:
    OO第三单元作业总结
    OO第二单元作业总结
    OO第一单元总结
    OO第四单元总结
    OO第三单元总结
    OO第二单元总结
    OO第一单元总结
    OO Unit4 总结
    OO Unit3 总结
    OO Unit2 总结
  • 原文地址:https://www.cnblogs.com/weiyz/p/7078033.html
Copyright © 2011-2022 走看看