写一段代码来解释吧!

<!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. 面试题(一)—Java基础(上)

    1.面向对象的三大特征 (1)封装      封装性指的是隐藏了对象的属性和实现细节,对外仅提供公共的访问方式.      好处: 将变化隔离,提供复用性和安全性. (2)继承      提高代码的复 ...

  2. Nginx Access Log日志统计分析常用命令

    Nginx Access Log日志统计分析常用命令 IP相关统计 统计IP访问量 awk '{print $1}' access.log | sort -n | uniq | wc -l 查看某一时 ...

  3. C# 事务之SqlTransaction

    private static void Execute(string connectionString) { using (SqlConnection connection = new SqlConn ...

  4. Extjs6官方文档译文——应用架构简介（MVC，MVVM）

    应用架构简介 Extjs 同时提供对于MVC和MVVM应用架构的支持.这两个架构方式共享某些概念,而且都旨在沿着逻辑层面划分应用程序代码.每种方法在选择如何划分应用组件上都有其各自的优势. 本指南的目 ...

  5. JavaScript中的数据结构及实战系列（1）：队列

    开题 张三丰教无忌太极剑法: 还记得吗? 全都记得. 现在呢? 已经忘却了一小半. 啊,已经忘了一大半. 不坏不坏,忘得真快,那么现在呢? 已经全都忘了,忘得干干净净. 好了,你上吧. 长时间写前端代 ...

  6. 拦截器的四种拦截方式以及Filter的执行顺序（17/4/8）

    一:拦截方式 需要在配置文件web.xml配置 在对应filter-mapping节点下 如下 <filter-mapping> <filter-name>BFilter< ...

  7. html基础认识，高手别看

    HTML5是一种用于在万维网上构建和呈现内容的符号言语.它是HTML规范的第五和当时版别.它是由万维网联盟(W3C)在十月发布的2014 [ 2 ] [ 4 ]和最新的多媒体支持进步言语,一起坚持它简 ...

  8. collection and map and Collections

    两者的区别: 两者都是接口: Collectoin是java集合框架的一个顶级接口,存储的元素可以是任意类型的对象: Map是java集合框架的映射接口,以键值对的形式存储对象: 也就是说,colle ...

  9. 在国内使用maven下载jar包非常慢的解决方法

    在国内使用maven下载jar包非常慢的解决方法 1.原因: 很多jar包在国外环境,所以会很慢. 2.解决方法 maven支持镜像环境下载,所以首先找到maven的conf目录中的settings. ...

  10. ICDM评选：数据挖掘十大经典算法

    原文地址:http://blog.csdn.net/aladdina/article/details/4141177 国际权威的学术组织the IEEE International Conferenc ...