AngularJS route路由

route

通过Angular构建的单页面程序，用同一个url访问要展示不一样的效果可以使用到route，先到项目根目录依赖route。
　　npm instal angular-route　　下载不了到 CSDN下载

Paste_Image.png

在单页Web应用中 AngularJS 通过 # + 锚点标记+路由 实现展示指定的锚点，服务器一般不会处理#号之后跟随的信息。

路由需要配置好映射参数

var app = angular.module('app',['ngRoute']); //依赖ngRoute路由模块
app.config(['$routeProvider',function($routeProvider){ //为路由配置参数
        $routeProvider.when("锚点",{
              如果是这个锚点，会按照这个对象的配置参数处理。
        }).otherwise({
              否则按照这个对象的配置参数处理。
        });
}

即

$routeProvider.when(url, {
    template: string,
    templateUrl: string,  //不要与template同在
    controller: string, function 或 array, //对应的处理控制器
    controllerAs: string,
    redirectTo: string, function, //跳转
    resolve: object
});

Demo

相同url根据不同锚点进行不同的页面数据展示。

页面route2.html作为单页面程序的一部分

demos.gif