angularjs里重要的route
写一段代码来解释吧!
<!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的更多相关文章
- 记项目中ES6+gulp+angularjs里的问题
AngualrJs中可用来注入的有三种类型,service.factory.provider,这三种写法不样,用法也都不一样.其中,service只实例化一次,其实就是单例模式的思想.无论我们在什么地 ...
- angularjs里对JS的lowercase和uppercase的完善
读angularjs的源码开头. var lowercase = function (string) { return isString(string) ? string.toLowerCase() ...
- 也说说angularJs里的evalAsync
虽说angular都快出2.0了,到了2.0这些东东都会被干掉.不过我们眼前的事还是要处理. $evalAsync和$timeout到底什么区别,网上说法很多,最近看到的是说在directive里就怎 ...
- angularjs学习总结 详细教程（转载）
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- [译]用AngularJS构建大型ASP.NET单页应用（二）
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 客 ...
- [学习笔记] 七步从AngularJS菜鸟到专家（7）：Routing [转]
这是＂AngularJS – 七步从菜鸟到专家＂系列的第七篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第四.五篇我们讨论了Angular内建的directives,上一篇了解 ...
- [转载]angularjs学习总结 详细教程
http://blog.csdn.net/yy374864125/article/details/41349417#t75 目录(?)[-] 前言 AngularJS概述 AngularJS是什么 A ...
- angularjs学习总结(~~很详细的教程)
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- 用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 ...
随机推荐
- juery悬浮框
现在的淘宝啊,京东啊等很多平台都用到了一个技术,就是当页面下拉时,某个div会一直悬浮在页面顶端.具体代码如下<p>jQuery实现页面滚动时层智能浮动定位</p><!D ...
- java源码剖析: 对象内存布局、JVM锁以及优化
一.目录 1.启蒙知识预热:CAS原理+JVM对象头内存存储结构 2.JVM中锁优化:锁粗化.锁消除.偏向锁.轻量级锁.自旋锁. 3.总结:偏向锁.轻量级锁,重量级锁的优缺点. 二.启蒙知识预热 开启 ...
- HYML / CSS和Javascript 部分
1 CSS实现垂直水平居中 HTML结构: <div class="wrapper"> <div class="content">&l ...
- checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- CTF中怎看phpinfo
CTF中怎么看phpinfo 在比赛中经常遇到phpinfo,这个页面可以看到很多配置信息,我们需要在这么多信息中,着重看一下几个内容: 1.allow_url_fopen和allow_url_inc ...
- myeclipse/eclipse 配置SSM框架错误之一解决方法
报错如下: 1. [org.springframework.web.context.ContextLoader] - Root WebApplicationContext: initializatio ...
- 分布式开放消息系统(RocketMQ)的原理与实践（转）
转自:http://www.jianshu.com/p/453c6e7ff81c 分布式消息系统作为实现分布式系统可扩展.可伸缩性的关键组件,需要具有高吞吐量.高可用等特点.而谈到消息系统的设计,就回 ...
- Java中的增强 for 循环 foreach
foreach 是 Java 中的一种语法糖,几乎每一种语言都有一些这样的语法糖来方便程序员进行开发,编译期间以特定的字节码或特定的方式来对这些语法进行处理.能够提高性能,并减少代码出错的几率.在 J ...
- innobackup全备与恢复
前提:xtrabackup.mysql安装完成,建立测试库reading.测试表test,并插入三条数据. 1.全备: innobackupex --user=root --password ...
- Apache localhost和局域网ip地址访问
今天忍无可忍重装了公司的电脑,所以把开发工具也都重新装一下. 安装wamp,localhost和局域网ip地址无法访问. 在C:\Windows\System32\drivers\etc\hosts文 ...