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的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- val() 和attr() 取值的问题
- android studio 中怎么使用adb无线调试
之前再eclipse下进行安卓开发,但谷歌却抛弃了eclipse而力挺android studio开发环境,没办法只好跟着走. 在eclipse下开发时调试用adb无线方式特别方便,但是在androi ...
- supervisor很赞！
最近,公司进行了新的架构设计,原来一个区服一组进程,变成了对外只有一台服,后面N组多进程进行服务的模式.于是,管理进程就变成了一个头痛的问题.原来是在写代码的目录里放置各种脚本解决的,关闭脚本,开启脚 ...
- OpenHCI - Data Transfer Types
There are four data transfer types defined in USB(USB中有4种数据传输类型). Each type is optimized to match th ...
- oc小总结
oc的一些总结 下面几个问题是oc中需要掌握的内容 1.如何掌握一个方法的方法名 2.一个对象调用一个autorelease,什么时候释放 3.字典和数组,集合都有什么特点 4.如何定义一个类 5.类 ...
- 使用labview对kinect进行开发
一.必要工具: LabVIEW 2011 或更高版本 用于Microsoft Kinect的Kinesthesia工具包 - 利兹大学(University of Leeds) 详情参见(先注册ni) ...
- Codeforces Round #372 (Div. 2) A B C 水 暴力/模拟 构造
A. Crazy Computer time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- Codeforces Round #303 (Div. 2) D 贪心
D. Queue time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...
- js部分---for循环练习题
1有一张0.0001米的纸,对折多少次可以达到珠穆朗玛峰的高度8848: <script> /*var h=0.0001; var biao=0; for(;;) { h=h*2; if( ...
- linux 下查看机器是cpu是几核的（转）
几个cpu more /proc/cpuinfo |grep "physical id"|uniq|wc -l 每个cpu是几核(假设cpu配置相同) more /proc/cpu ...