angularJS $routeProvider

O‘Reilly书上的伪代码

var someModule = angular.module(‘someModule‘,[...module dependencies]);

someModule.config(function($routeProvider){
    $routeProvider
        .when(‘url‘,{controller:aController, templateUrl:‘/path/to/template‘})
        .when(...)//other mappings for your app
        .otherwise(...)//what to do if nothing else matches
});

$route被用于URLS到controller和view(HTML模板)之间的链接,它会监控$location.url()并试图对此路径及对应的路由配置进行映射,使用时需要注入安装ngroute模块。

var someModule = angular.module(‘someModule‘,[‘ngRoute‘]);

举个详细的栗子

var app = angular.module(‘app‘, [‘ngRoute‘]);
    app.config(function ($routeProvider){
        $routeProvider
            .when(‘/other‘, {
                controller: ‘otherCtrl‘,
                templateUrl: ‘content/views/other.html‘,
                publicAccess: true
            })
            .when(‘/‘, {
                controller: ‘homeCtrl‘,
                templateUrl: ‘content/views/home.html‘
            })
            .when(‘/other/:id‘, {
                controller: ‘otherDetailCtrl‘,
                templateUrl: ‘content/views/otherDetail.html‘,
                publicAccess: true
            })
            .otherwise({
                redirectTo: ‘/‘
            });
    }

app.controller(‘homeCtrl‘,function($scope,$http){
    console.log(‘i am home page‘);
    $scope.title = ‘i am home page‘;
});

app.controller(‘otherCtrl‘,function($scope){
    console.log(‘i am other page‘);
    $scope.title = ‘i am other page‘;
});

app.controller(‘otherDetailCtrl‘,function($scope, $routeParams, $location){
    var id = $routeParams.id;
    if(id == 0) {
        $location.path(‘/other‘);
    }
    console.log(‘i am otherDetailCtrl page‘);
    $scope.title = ‘i am otherDetailCtrl page‘;
});

在$route(路由)中,提供了两个依赖性服务:$location、$routeParams。

$location、$routeParams均可在controller中使用,如上otherDetailCtrl中,可通过$routeParams获取路由时所传参数,可通过$location进行路由跳转。

时间: 2024-10-12 21:48:32

angularJS $routeProvider的相关文章

Scope in AngularJS

From the RUNBOOM.COM, it said: Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. While, how many scopes can we have? is there any structure in it? I got those question when I come to it. After a tough time r

angularjs 路由 $routeProvider

Angularjs路由描述:定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中. 主界面index.html <!DOCTYPE html> <html> <head></head> <body> <div ng-app="routeApp"> <h3>路由</h3> <div

今天学的angularJS

首先引入js文件angular.min.js,引入控制器:controllers.js其中可以定义多个控制器:比如var PhoneListCtrl = ['变量','变量',function(变量,变量){//为布局中的变量赋值,比如$http.get(XXX).success(function(data){$scope.phones = data;});}];var PhoneDetailCtrl = ['$scope','$routeParams',function($scope, $ro

angularjs $routeProvider template 函数及参数解惑

在angularjs官方文档关于$routeProvider的配置中,对template和templateUrl的配置有这么一段话 if it is a function, it will be called with the following parameters: {Array.<Object>} - route parameters extracted from the current$location.path() by applying the current route 读起来相

[后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs

一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用程序.在开始使用AngularJs开发SPA之前,我觉得有必要详细介绍下AngularJs所涉及的知识点.所有也就有了这篇文章. 二.AngularJs介绍 AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并可扩展的服务,包括数据绑定.DOM操作.MVC和依赖注

浅谈angularJs

在家都知道,angular 可以实现双项数据绑定,其中它的占位符是{{}},他是是MVC数据分离, 首先要在<html>或<body>中建一个<body ng-app=""> <p>我的第一个表达式: {{ 5 + 5 }}</p> </body> ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素. 所有 AngularJS 应用都必须要要一个根元素. HTML 文档中只允许有一个 ng-a

拥抱AngularJS

文中一些地方AngularJS简称ng 简介: ng诞生于2009年,由Misko Hevery等创建,后被Google收购,为克服HTML在构建应用上的不足而设计. 是一款优秀的前端JS框架,核心特性:MVVM(Model-View-ViewModel).模块化.双向数据绑定.依赖注入. 官网:https://angularjs.org/ 中文网:http://www.apjs.net/ 入门: 图灵社区 书籍: 用AngularJS开发下一代Web应用  AngularJS权威教程 源码:

【MVC5】First AngularJS

※本文参照<ASP.NET MVC 5高级编程(第5版)> 1.创建Web工程 1-1.选择ASP.NET Web Application→Web API 工程名为[atTheMovie] 1-2.添加AngularJS 在Package Manager Console执行如下命令: Install-Package AngularJS.core 1-3.添加EntityFramework 在Package Manager Console执行如下命令: Install-Package Entit

摆脱DOM操作,从TodoMVC看angularJS

取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解...... 根据之前的经验,就现有的前端项目,如果最初没有良好的设计,做到一定阶段一定会变得难以维护,就算最初有设计,变化无常的PM也会让你的项目BUG丛生. 一个页面的复杂程度不断的增加,依赖模块也会变得混乱,而其中最为头疼的就是页面级随心所欲的DOM操作了! MVC类的框架可以很好的解决以上问