写一段代码来解释吧!

<!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. windows系统System32中各种实用的工具

    工具类 这些工具可以直接打开运行  输入名字就可以调出来了 我还会上传一个java程序,运行后会显示一个界面,直接调用这些工具 1.SnippingTool.exe   截图 2.calc.exe   ...

  2. 重新认识JavaScript里的创建对象（一）

    一.序 面向对象有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.ECMA-262把对象定义为"无序属性的集合,其属性可以包含基本值.对象或者函数&quo ...

  3. Memetic Algorithm(文化基因算法)

    1. 文化进化理论 威尔逊认为,从性质上来讲,文化进化总是以拉马克主义为特征的,即文化进化依赖于获得性状的传递,相对来说速度比较快:而基因进化是达尔文主义式的,依赖于经过几个世代的基因频率的改变,因而 ...

  4. 【机器学习】神经网络实现异或（XOR）

    注:在吴恩达老师讲的[机器学习]课程中,最开始介绍神经网络的应用时就介绍了含有一个隐藏层的神经网络可以解决异或问题,而这是单层神经网络(也叫感知机)做不到了,当时就觉得非常神奇,之后就一直打算自己实现 ...

  5. SpringＭＶＣ文件上传下载

    不多说,代码: Spring-config．xml<!-- spring可以自动去扫描base-pack下面的包或者子包下面的java文件, 如果扫描到有Spring的相关注解的类,则把这些类注 ...

  6. Redis和Spring整合

    Redis和Spring整合 Redis在这篇里就不做介绍了~以后系统的学学,然后整理写出来. 首先是环境的搭建 通过自己引包的方式,将redis和spring-redis的包引到自己的项目中,我项目 ...

  7. html 压缩工具 html-minifier

    https://github.com/kangax/html-minifier#options-quick-reference 1.参数列表 option Description Default re ...

  8. 【转】JDBC学习笔记(2)——Statement和ResultSet

    转自:http://www.cnblogs.com/ysw-go/ Statement执行更新操作 Statement:Statement 是 Java 执行数据库操作的一个重要方法,用于在已经建立数 ...

  9. JavaScript巧学巧用

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来, ...

  10. 视差滚动特效图片滑块-Sequence.js

    效果演示     插件下载