Angularjs路由.让人激动的技术.真给前端长脸了.
先看文件的摆放
不废话,直接上代码.
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 ...
随机推荐
- HtmlEncode、HtmlDecode、UrlEncode、UrlDecode
HtmlEncode: 将 Html 源文件中不允许出现的字符进行编码.例如:"<".">"."&" 等. HtmlDe ...
- OpenJudge就算概论-过滤多余的空格
/*===================================== 过滤多余的空格 总时间限制: 1000ms 内存限制: 65536kB 描述 一个句子的每个单词之间也许有多个空格,过滤 ...
- Netflix Zuul 了解
Zuul 是提供动态路由,监控,弹性,安全等的边缘服务.Zuul 相当于是设备和 Netflix 流应用的 Web 网站后端所有请求的前门.Zuul 可以适当的对多个 Amazon Auto Scal ...
- 【转】.NET 安装和部署(Installer) 如何卸载上一个版本
前言 当使用.NET“安装项目”打包的安装文件,再次安装的时候会弹出如下提示,这个时候会让我们很郁闷,怎样才能自动卸载上一个安装的版本呢?方法很简单,只需简单的两个操作步骤即可解决. 操作步骤 主要由 ...
- 转: Ext拖拽分析
整个Ext架构中组件是其重要的组成部分,除了少部分(如树的结点)的界面表现元素不是在这样的一个体系中,大部分的页面表现元素都被绑定在这个体系之中,下面从这个体系的最底层即在这个继承体系的最高层进行研究 ...
- jsonp的简单例子
jsonp的简单例子 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- linux下查看进程运行的时间
原文链接:http://www.centoscn.com/CentOS/2014/0403/2724.html 可通过ps 来查看,通过参数 -o 来查看 例: ps -eo pid,tty,user ...
- android学习笔记46——File存储
File存储--IO操作文件 openFileOutput.openFileInput Context提供了如下两个方法来打开本应用程序的数据文件夹里面的文件IO流. 1.FileInputStrea ...
- java-Spring-1
1.@Autowired 自动寻找合适的类型注入,byType2.@Qualifier("userDAOImpl") 存在多个相同类型时,指定固定的一个bean,和上面1配合使用3 ...
- 2. redis的数据类型
一. string类型 字符串类型是redis中最基本的数据类型,它能存储任何形式的内容,包含二进制数据,甚至是一张图片(二进制内容).一个字符串类型的值存储的最大容量是1GB 命令 (1)setnx ...