写一段代码来解释吧!

<!DOCTYPE html>
<html ng-app="mainApp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div ng-view></div>
<script type="text/ng-template" id="template">
    <h1>{{title}}</h1>
</script>
<ul>
    <li><a href="#/a">A</a></li>
    <li><a href="#/b">B</a></li>
    <li><a href="#/c">C</a></li>
</ul>
</body>
<script src="angular.min.js" type="text/javascript"></script>
<script src="angular-route.min.js"></script>
<script>
    (function(angular){
        var app=angular.module('mainApp',['ngRoute']);
        //配置一个路由服务
        app.config(['$routeProvider', function($routeProvider) {
            $routeProvider
                    .when('/students/:name?', {controller: 'StudentsController',templateUrl: 'template'})
                    .when('/a',{controller:'controllerA',templateUrl:'template'})
                    .when('/b',{controller:'controllerB',templateUrl:'template'})
                    .when('/c',{controller:'controllerC',templateUrl:'template'})
                    .otherwise({redirectTo:'/a'});
        }]);
        app.controller('StudentsController',['$routeParams','$scope',function($routeParams,$scope){
            $scope.title=$routeParams['name']+'---hahhha';
            console.log($scope.title);
        }]);
        app.controller('controllerA',['$scope',function($scope){
            $scope.title='春天来了！！！';
        }]);
        app.controller('controllerB',['$scope',function($scope){
            $scope.title='夏天来了！！！';
        }]);
        app.controller('controllerC',['$scope',function($scope){
            $scope.title='秋天来了！！！';
        }]);
    })(angular)
</script>
</html>

angularjs里重要的route的更多相关文章

  1. 记项目中ES6+gulp+angularjs里的问题

    AngualrJs中可用来注入的有三种类型,service.factory.provider,这三种写法不样,用法也都不一样.其中,service只实例化一次,其实就是单例模式的思想.无论我们在什么地 ...

  2. angularjs里对JS的lowercase和uppercase的完善

    读angularjs的源码开头. var lowercase = function (string) { return isString(string) ? string.toLowerCase() ...

  3. 也说说angularJs里的evalAsync

    虽说angular都快出2.0了,到了2.0这些东东都会被干掉.不过我们眼前的事还是要处理. $evalAsync和$timeout到底什么区别,网上说法很多,最近看到的是说在directive里就怎 ...

  4. angularjs学习总结 详细教程（转载）

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  5. [译]用AngularJS构建大型ASP.NET单页应用（二）

    原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 客 ...

  6. [学习笔记] 七步从AngularJS菜鸟到专家（7）：Routing [转]

    这是＂AngularJS – 七步从菜鸟到专家＂系列的第七篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第四.五篇我们讨论了Angular内建的directives,上一篇了解 ...

  7. [转载]angularjs学习总结 详细教程

    http://blog.csdn.net/yy374864125/article/details/41349417#t75 目录(?)[-] 前言 AngularJS概述 AngularJS是什么 A ...

  8. angularjs学习总结(~~很详细的教程)

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  9. 用angular来思考问题How do I “think in AngularJS” if I have a jQuery background?

    [翻译]How do I “think in AngularJS” if I have a jQuery background? 1. 不要先设计页面,然后再使用DOM操作来改变它的展现 在jQuer ...

随机推荐

  1. 1 IDEA 安装 及 IDEA开发 spring的环境搭建

    摘要: 主要讲解使用 IDEA 开发 Spring MVC 的环境搭建,Maven的简单教学. 参考1:https://my.oschina.net/gaussik/blog/385697 参考2:h ...

  2. 如何高效实现扫描局域网IP、主机名、MAC和端口

    近几年工作经常使用RFID识读器,智能家居网关,温湿度传感器.串口服务器.视频编码器等,一般是有串口和网口,由于现场原因一般较少使用串口,大多使用网口.连接方法是IP地址和端口,有的设备带搜索软件,有 ...

  3. C#调用WebService接口实现天气预报在web前端显示

    本文使用web (C#)调用互联网上公开的WebServices接口: (http://www.webxml.com.cn/WebServices/WeatherWebService.asmx)来实现 ...

  4. jQuery的发展史

    jQuery的发展史,你知道吗? 每天多学一点知识,就少写一行代码2006年1月,jQuery的第一个版本面世,至今已经有6年多了(注:这个时间点是截止至出书时间).虽然过了这么久,但它依然以其简洁. ...

  5. STM32学习笔记（四）——串口控制LED（中断方式）

    目录: 一.时钟使能,包括GPIO的时钟和串口的时钟使能 二.设置引脚复用映射 三.GPIO的初始化配置,注意要设置为复用模式 四.串口参数初始化配置 五.中断分组和中断优先级配置 六.设置串口中断类 ...

  6. leetcode水题(一)

    Two Sum 1 public int[] twoSum(int[] numbers,int target){ Map<Integer,Integer> map = new HashMa ...

  7. [.NET] 《C# 高效编程》（一） - C# 语言习惯

    C# 语言习惯 目录 一.使用属性而不是可访问的数据成员 二.使用运行时常量(readonly)而不是编译时常量(const) 三.推荐使用 is 或 as 操作符而不是强制类型转换 四.使用 Con ...

  8. 关于String类和String[]数组的获取长度方法细节

    一.在Java中,以下代码段有错误的是第(  )行 public static void main(String[] args) { String name = "小新";     ...

  9. Linux基础测试--11道题

    000.创建一个目录/data mkdir /data 001.在/data 下面创建一个文件oldboy.txt touch /data/oldboy.txt 002.为oldboy.txt 增加内 ...

  10. Ubuntu16.04安装opencv for python/c++

    Ubuntu16.04安装opencv for python/c++ 网上关于opencv的安装已经有了不少资料,但是没有一篇资料能让我一次性安装成功,因此花费了大量时间去解决各种意外,希望这篇能给一 ...