Angular学习（8）- 路由
示例：
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>Study 12</title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
</head>
<body>
<div ng-view></div> <script type="text/ng-template" id="show.html">
<div ng-controller="PhoneListCtrl">
<h2>{{title}}</h2>
<a href="#/phones/:1">go to detail</a>
</div>
</script>
<script type="text/ng-template" id="put.html">
<div ng-controller="PhoneDetailCtrl">
<h2>{{title}} - {{id}}</h2>
<a href="#/phones">go to list</a>
</div>
</script> <script type="text/javascript">
var app = angular.module('MyApp', ["ngRoute"], function() { });
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', { templateUrl: 'show.html', controller: "PhoneListCtrl" }).
when('/phones/:id', { templateUrl: 'put.html', controller: "PhoneDetailCtrl" }).
otherwise({ redirectTo: '/phones' });
} ]);
app.controller('PhoneListCtrl', function($scope) {
$scope.title = 'List';
});
app.controller('PhoneDetailCtrl', function($scope, $routeParams) {
$scope.title = 'Detail';
$scope.id = $routeParams.id;
});
</script>
</body>
</html>
Angular学习（8）- 路由的更多相关文章
- Angular学习笔记—路由（转载）
创建路由 1.首先安装 Angular Router.你可以通过运行以下任一操作来执行此操作: yarn add @angular/router # OR npm i --save @angular/ ...
- Angular routing生成路由和路由的跳转
Angular routing生成路由和路由的跳转 什么是路由 路由的目的是可以让根组件按照不同的需求动态加载不同的组件. 根据不同地址,加载不同组件,实现单页面应用. Angular 命令创建一个配 ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- Angular 学习思路
近些年前端框架非常多,主流的有 Vue.React.Angular 等.我参与的项目中使用较多的是 Vue.因为 Vue 学习难度不大,上手很快,代码简洁,而且使用 Vue 全家桶(Vue + Vue ...
- angular学习资源
angular学习资源 angularjs库: https://developers.google.com/speed/libraries/devguide?hl=zh-CN#angularjs ...
- angular.js的路由和模板在asp.net mvc 中的使用
angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...
- angular学习一框架结构认识
angular学习所有内容均会与vue以及react框架进行对比. angular学习使用的编译器:webstorm 解决编译器屏蔽node_modules包问题: File-->setting ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- mysql重命名数据表
命令如下: rename table oldtablename to newtablename
- Yii 中的createUrl和redirectUrl
Yii 这两个url表示方法容易混淆,区别如下: $this->CreateUrl('控制器/方法',get参数); $this->CreateUrl('方法'); ...
- CentOS7.0关于libguestfs的bug
libguestfs,libguestfs-tools是用来在不启动虚拟机的情况下,快速简单访问虚拟机磁盘的工具. 今天在CentOS7.0系统上通过guestmount命令去mount虚拟机磁盘的时 ...
- 初始化IoC容器（Spring源码阅读）-我们到底能走多远系列（31）
我们到底能走多远系列(31) 扯淡: 有个问题一直想问:各位你们的工资剩下来会怎么处理?已婚的,我知道工资永远都是不够的.未婚的你们,你们是怎么分配工资的? 毕竟,对自己的收入的分配差不多体现了自己的 ...
- hdu 4253 Two Famous Companies BZOJ 2654 tree
[题意]:给出n个点,m条边,边分为两种,一种是A公司的,一种是B公司的.边上有权值,问用n-1条边把n个点连起来的最小费用是多少,其中A公司的边刚好有k条.题目保证有解. 思路:我们发现,如果我们给 ...
- Canvas俄罗斯方块
写在前面 潜水博客园多年,从未写过博客.最近才注册博客,遂将很久前写的俄罗斯方块分享出来.第一次写博客,不喜勿喷... 游戏说明 游戏操作:J向左,L向右,I旋转,K快速下降 游戏基于HTML can ...
- 为什么静态成员、静态方法中不能用this和super关键字
1. 在静态方法中是不能使用this预定义对象引用的,即使其后边所操作的也是静态成员也不行. 因为this代表的是调用这个函数的对象的引用,而静态方法是属于类的,不属于对象,静态方法成功加载 ...
- input type=file
(1)首先来说一下,如何让 <input type='file' >成为你想要的模样. 最简单的方法就是在让<input type='file' >的透明度为0(完全透明),然 ...
- 作业6 NABCD模型分析，产品Backlog
1.N(Need 需求): 随着生活水平的提高,每个家庭中都会有电脑和移动设备,可以更加快捷方便使用软件.以前孩子练习计算能力需要通做习题卷或老师出题目来进行,但现在只要通过这个四则运算的程序,可以自 ...
- HTTP详解(1)-工作原理
出处 http://blog.csdn.net/hguisu/article/details/8680808#t0 1. HTTP简介 HTTP协议(HyperText Transfer Protoc ...