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的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- 云数据库 Bmob
/**************************************************************************************** * 云数据库 Bmo ...
- 《JavaScript模式》第1章 简介
@by Ruth92(转载请注明出处) 第1章 简介 模式 模式:是指一个通用问题的解决方案. 设计模式 编码模式 反模式:常见的.引发问题比解决的问题更多的一种方法. JavaScript 基本概念 ...
- js 中对字符串操作的函数
concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf() – 返回字符串中一个子串第一处出现的索引.如果没有匹配项,返回 -1 . charAt() – 返回指定 ...
- getDefinitionByName getDefinition 区别
一闺密用flash开发IOS应用是遇到一个问题,她把声音资源放到swf里,然后load到主程序中使用,但是ios提示不支持这个swf,我在想是不是因为有声音的原因 于是我让她换种做法,不用swf,用s ...
- linux shell 逻辑运算符、逻辑表达式详解
shell的逻辑运算符 涉及有以下几种类型,因此只要适当选择,可以解决我们很多复杂的判断,达到事半功倍效果. 一.逻辑运算符 逻辑卷标 表示意思 1. 关于档案与目录的侦测逻辑卷标! -f 常用!侦测 ...
- HDU 5748 最长上升子序列的长度nlogn(固定尾部)
Bellovin Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total ...
- 论XCODE工程里使用的宏定义.
在XCODE开发过程中,经常会遇到引用头文件,引用库路径的问题,如果不是直接的源码引入,则需要在工程中增加设置.虽然现在有了Pod这类集合管理工具,但有时为了一个很小的lib引入Pod这尊大神还是有点 ...
- 通过ros节点发布Twist Messages控制机器人--10
原创博客:转载请表明出处:http://www.cnblogs.com/zxouxuewei/ 1.到目前为止,我们已经从命令行移动机器人,但大多数时间你将依靠一个ros节点发布适当的Twist消息. ...
- UVa 10082 WERTYU
UVa 10082 题目大意:把手放在键盘上时,稍微不注意就会往右错一位.这样,输入Q就会变成输入W,输入J会变成输入K等等, 输入一个错位后敲出的字符串(所有字母均大写),输出程序员本来想打的句子. ...
- Python学习(4)——for语句
Python中range()函数的用法 >>> range(5) [0, 1, 2, 3, 4] >>> range(0,5) [0, 1, 2, 3, 4] &g ...