先看文件的摆放
不废话,直接上代码.
detail.html:
<hr/>
<h3>路由 <span style="color: red;">{{id}}</span>: detail.html </h3>
list.html:
<hr>
<h1>List.html</h1>
<h2>{{myName}}</h2>
<ul>
<li ng-repeat="id in [1,2,3]">
<a href="#/list/{{id}}">链接{{id}}</a>
</li>
</ul>
demo-route.html
<!DOCTYPE html>
<html ng-app="routeModule">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/angular1.4.3.js"></script>
<script type="text/javascript" src="../js/angular-route.js"></script>
</head>
<body>
<h1>Angular的路由案例</h1>
<div ng-view></div>
<script>
var routeApp = angular.module('routeModule',['ngRoute']);
routeApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'views/route/list.html',
controller: 'ListRouteController'
})
.when('/list/:id', {
templateUrl: 'views/route/detail.html',
controller: 'DetailRouteController'
})
.otherwise({
redirectTo: '/list'
});
}]); routeApp.controller('ListRouteController',function($scope) {
$scope.myName="思思博士";
});
routeApp.controller('DetailRouteController',function($scope, $routeParams) {
$scope.id = $routeParams.id;
});
</script>
</body>
</html>
注意看我引入的js版本.现在的route模块从angular中提取出来了.所以需要单独引用.
单击链接或修改id好,就能看到神奇的效果了.
Angularjs路由.让人激动的技术.真给前端长脸了.的更多相关文章
-
AngularJS路由使用案例
AngularJS路由使用案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
-
还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features- ...
-
AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...
-
Angularjs路由需要了解的那点事
Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...
-
【转】AngularJS路由和模板
1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...
-
AngularJS路由和模板
前言 如果想开发一款类似gmail的web应用,我们怎么做呢? 以jQuery的思路,做响应式的架构设计时,我们要监听所有点击事件,通过事件函数触发我们加载数据,提交,弹框,验证等的功能:以 Angu ...
-
AngularJS路由跳转
AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是 ...
-
AngularJS 路由精分
AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...
-
AngularJS进阶(二)AngularJS路由问题解决
AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...
随机推荐
-
DLL导出函数和类的定义区别 __declspec(dllexport)
DLL导出函数和类的定义区别 __declspec(dllexport) 是有区别的, 请看 : //定义头文件的使用方,是导出还是导入 #if defined(_DLL_API) #ifndef D ...
-
下一代Asp.net开发规范OWIN（2）—— Katana介绍以及使用
接上篇OWIN产生的背景以及简单介绍,在了解了OWIN规范的来龙去脉后,接下来看一下Katana这个OWIN规范的实现,并看看如何使用在我们的Web开发中. 阅读目录: 一. Katana项目的结构和 ...
-
mac下开发IOS代码管理
1.安装和配置subversion服务器 在windows 服务器上安装VisualSVN-Server,下载地址http://www.visualsvn.com/server/download/.采 ...
-
opencv的学习笔记2
继续昨晚的学习总结,昨晚看到轨迹条的创建就没有看下去了,今天继续: 1.轨迹条的创建: 轨迹条往往会和一个回调函数配合使用,当轨迹条发生改变,就调用这个轨迹条的回调函数 int createTrack ...
-
安装hadoop2.4.0遇到的问题
一.执行start-dfs.sh后,datenode没有启动 查看日志如下: 2014-06-18 20:34:59,622 FATAL org.apache.hadoop.hdfs.server.d ...
-
JavaSE复习日记 : 条件判断语句
/* 条件控制语句:if(){}else{} 语法: 第一种结构:有不执行的情况 if(boolean表达式){ //第一位真,就执行里面的语句,为假就不执行 java语句; } 第二种结构: if( ...
-
【Python】迭代器
对迭代器和生成器的概念一直很混乱,总结一下: 迭代器: 1.所谓的迭代器,就是具有__next__()方法的对象: 2.__iter__()方法返回一个迭代器对象,这个对象必须具有__next__() ...
-
admui框架使用经验
刚开始接触admui框架时确实有些迷茫,不知道怎么使用,摸索了一段时间后才发现这个框架很简单!以下是我遇见的一些坑,总结一下啦! 1.使用框架第一步就是开启服务器,我给公司写项目时开启的是5000端口 ...
-
node通过QQ邮箱发送邮件
在nodejs里面使用插件,不多说,首先下载: npm install emailjs 下载好之后,先别急着写代码,应该先设置一下,我这里用QQ邮箱举例子. 首先登陆QQ邮箱,然后点击:设置-> ...
-
[LeetCode&;Python] Problem 883. Projection Area of 3D Shapes
On a N * N grid, we place some 1 * 1 * 1 cubes that are axis-aligned with the x, y, and z axes. Each ...