以下是演示angular路由切换的demo.

主页：index.html

<!doctype html>
<html ng-app="bookStoreApp">

<head>
    <meta charset="UTF-8">
    <title>BookStore</title>
    <script src="framework/1.3.0.14/angular.js"></script>
    <script src="framework/1.3.0.14/angular-route.js"></script>
    <script src="framework/1.3.0.14/angular-animate.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js"></script>
</head>

<body>
    <div ng-view>
    </div>
</body>

</html>

模板文件(html碎片文件)tpls/:

hello.html:

<p>{{greeting.text}},Angular</p>

bookList.html:

<ul>
    <li ng-repeat="book in books">
        书名:{{book.title}}&nbsp;&nbsp;&nbsp;作者:{{book.author}}
    </li>
</ul>

控制器文件js/：

controllers.js:

var bookStoreCtrls = angular.module('bookStoreCtrls', []);

bookStoreCtrls.controller('HelloCtrl', ['$scope',
    function($scope) {
        $scope.greeting = {
            text: 'Hello'
        };
    }
]);

bookStoreCtrls.controller('BookListCtrl', ['$scope',
    function($scope) {
        $scope.books =[
         {title:"《AngularJS从入门到精通》",author:"中华烟云"},
         {title:"《AngularJS权威指南》",author:"中华烟云"},
         {title:"《用AngularJS开发下一代WEB应用》",author:"中华烟云"}
        ]
    }
]);

/**
 * 这里接着往下写，如果控制器的数量非常多，需要分给多个开发者，可以借助于grunt来合并代码
 */

最后实现路由功能的是app.js:

var bookStoreApp = angular.module('bookStoreApp', [
    'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
    'bookStoreServices', 'bookStoreDirectives'             //[]内的为依赖注入的模块，ng开头的为angular自带的模块
]);

bookStoreApp.config(function($routeProvider) {         //$routeProvider是angular-route.js提供的原生路由对象，可以通过$routeProvider.when({}).when({})....otherwise({});这种链式写法来配置路由
    $routeProvider.when('/hello', {                              //'/hello'为路由路径，即在哈希符#后面动态输入的路径字串，如：....#/hello
        templateUrl: 'tpls/hello.html',                            //当路径为...#/hello时，调用模板文件'tpls/hello.html'
        controller: 'HelloCtrl'                                        //当路径为...#/hello时，调用控制器文件'js/HelloCtrl.js
    }).when('/list',{                                                  //：此时若切换到...#/list路径下
     templateUrl:'tpls/bookList.html',                          //当路径为...#/list时，调用模板文件'tpls/bookList.html'
     controller:'BookListCtrl'                                      //当路径为...#/list时，调用控制器文件'js/BookListCtrl.js
    }).otherwise({                                                   //：否则默认跳转到...#/hello路径下
        redirectTo: '/hello'
    })
});

注：angular-route.js提供的原生路由对象有个缺陷，就是不能深层次嵌套。要实现深层次嵌套，还得用UI-Router,源文件为angular-UI-Router.js.

UI-Router路由插件将在下一篇讲解.

--@angularJS--路由、模块、依赖注入的更多相关文章

  1. angular路由 模块 依赖注入

    1.模块 var helloModule=angular.module('helloAngular',[]); helloModule.controller('helloNgCrtl',['$scop ...

  2. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  3. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

  4. 详解AngularJS中的依赖注入

    点击查看AngularJS系列目录 依赖注入 一般来说,一个对象只能通过三种方法来得到它的依赖项目: 我们可以在对象内部创建依赖项目 我们可以将依赖作为一个全局变量来进行查找或引用 我们可以将依赖传递 ...

  5. AngularJS学习之依赖注入

    1.什么是依赖注入:简称DI,是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端 ...

  6. AngularJS中的依赖注入

    依赖注入 | Dependency Injection 原文链接: Angular Dependency Injection翻译人员: 铁锚翻译时间: 2014年02月10日说明: 译者认为,本文中所 ...

  7. AngularJS源码分析之依赖注入$injector

    开篇 随着javaEE的spring框架的兴起,依赖注入(IoC)的概念彻底深入人心,它彻底改变了我们的编码模式和思维.在IoC之前,我们在程序中需要创建一个对象很简单也很直接,就是在代码中new O ...

  8. 细数Javascript技术栈中的四种依赖注入

    作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道 ...

  9. Angular依赖注入：全面讲解（翻译中）

    在实际使用Angular依赖注入系统时,你需要知道的一切都在本文中.我们将以实用易懂并附带示例的形式解释它的所有高级概念. Angular最强大.最独特的功能之一就是它内置的依赖注入系统. 大多数时候 ...

  10. 4.了解AngularJS模块和依赖注入

    1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...

随机推荐

  1. linux下的安装百度云网盘

    linux下的百度网盘 (2014-10-20 18:01:14) 标签: linux 百度网盘 网盘 百度 forlinux 分类: 技术博文 百度网盘说实话,其实我挺喜欢的,好处什么的,就不说了, ...

  2. MVC和三层架构的区别

    MVC是一种设计模式,Modal,View,Controller,三层分开,解开耦合,方便替换. 三层架构包括 UI层,业务逻辑层,Dao层.UI层负责展示数据,业务逻辑层具体处理数据,Dao层负责和 ...

  3. Java基于Socket文件传输示例

    http://www.blogjava.net/sterning/archive/2007/10/13/152508.html 最近需要进行网络传输大文件,于是对基于socket的文件传输作了一个初步 ...

  4. PL\SQL学习笔记

    注释 单行--多行 一.declare一般用于做变量的申明.begin 程序体开始执行  end; 程序体结束exception .. dbms_output.put_line('绝对值'||v_ab ...

  5. JQuery收集

  6. typedef和block

    为block类型对象取别名 1.没有使用typedef的情况 int (^block_add)(int, int) = ^(int value1, int value2) { return value ...

  7. js动画（三）

    咳咳咳咳,感冒了感冒了,鼻塞,蓝瘦啊!嘴巴也开裂,哎,心疼自己.想到这是第三只唇膏了!只怪,放荡不倔爱自由, 行驶在冷风路上么,北风那个吹啊吹啊吹啊,好了,发神经发完了,接下来进入正题,严肃脸.(字数 ...

  8. CentOS 7 安装配置 NFS

    CentOS 7  安装配置 NFS 环境 nps 192.168.1.97 client 192.168.1.98 一.yum 安装 yum -y install nfs-utils rpcbind ...

  9. Codeforces#362

    A题 题意:给定一串数列,t,t+s,t+s+1,t+2s,t+2s+1......问某一个数是否是数列当中的 题意:只需判断(x-t)与(x-t-1)能否整除s即可,注意起始时的判断 #includ ...

  10. Ubuntu Nginx安装

    1.先更新ubuntu系统 更新命令 sudo apt-get update sudo apt-get upgrade 2 添加ubuntu nginx更新源镜像 cd /etc/apt/ sudo ...