AngularJS路由-白红宇

AngularJS路由

阅读量：4288 次

发布时间：2019-05-27

本文共 3076 字，大约阅读时间需要 10 分钟。

AngularJS路由

需要引用 angular-route.min.js 文件，

特别说明，默认的路由不能指定远程文件，异步加载

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记实现

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现 # 号后面内容的功能实现。

AngularJS 路由就通过 # + 标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

使用步骤：

1.载入实现路由的js文件：angular-route.js

2.使用ngView指定

改div内的HTML内容会根据路由的变化而变化。

3.创建包含了ngRoute模块作为主应用的依赖模块。

4.配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

第一个参数是 URL 或者 URL 正则规则。

第二个参数是路由配置对象。

路由配置对象

AngularJS 路由也可以通过不同的模板来实现。

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

路由配置对象语法规则如下：

$routeProvider.when(url, {    template: string,    templateUrl: string,    controller: string, function 或 array,    controllerAs: string,    redirectTo: string, function,    resolve: object
   
    });

参数说明：

1.template：如果我们仅需要在ng-view中插入简单的html内容，则使用该参数：

.when('/computers',{template:'这是电脑分类页面'})

2.templateUrl:

如果我们需要在ng-view中插入HTML模板文件，则使用该参数

$routeProvider.when('/computers', {    templateUrl: 'views/computers.html',});

特别说明：HTML模板加载，仅显示HTML全部内容，但不包含HTML、Head、Body标记，并且，不执行javascript代码。

3.controller

function，string或数组类型，在当前模板上执行的controller函数，生成新的scope。

4.controllerAs:

string类型，为controller指定别名。

5.redirectTo:

重定向的地址。

6.resolve

指定当前controller所依赖的其他模块。

实例1、指定简单内容模板

引用：

HTML：


       
    AngularJs 路由应用
    
            
     首页
        
     电脑
        
     打印机
        
     其他

js：

//AngularJs 路由指定简单内容angular.module('routingDemoApp', ['ngRoute']).config(['$routeProvider', function ($routeProvider) {    $routeProvider    .when('/', { template: '这是首页页面' })    .when('/computers', { template: '这是电脑分类页面' })    .when('/printers', { template: '这是打印机页面' })    .otherwise({ redirectTo: '/' });}]);

显示：

实例二、指定远程模板

JS：

//AngularJS 指定远程模板var app = angular.module('ngRouteDemo', ['ngRoute'])    .controller('HomeController', function ($scope, $route) { $scope.$route = $route; })    .controller('AboutController', function ($scope, $route) {        $scope.$route = $route;        $scope.users = [        { name: '张三', msgCount: 3 },        { name: '李四', msgCount: 4 },        { name: '王五', msgCount: 5 }        ];        console.info($scope);    })    .config(function ($routeProvider) {        $routeProvider.        when('/home', {            templateUrl: '../template/home.html',            controller: 'HomeController'        }).        when('/about', {            templateUrl: '../template/about.html',            //controller: 'AboutController'   //可以手动指定controller，也可以在模板内容中指定controller        }).        otherwise({            redirectTo: '/home'        });    });

实例三、指定controller控制器文件

模板同上

更多参考：

你可能感兴趣的文章