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的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- Java 中空指针处理方法
空指针异常(Null Pointer Exception)是我们平时最容易碰到的,也是最令人讨厌的异常.本文介绍如何避免出现空指针异常. 首先我们看如下的示例: private Boolean isF ...
- ld链接问题解决
http://stackoverflow.com/questions/480764/linux-error-while-loading-shared-libraries-cannot-open-sha ...
- matlab自带princomp(PCA降维方式)
matlab 中自带的函数就不必怀疑. princomp:principal componet analysis (PCA). [COEFF,SCORE,latent,tsquare]=princom ...
- [转载]python 爬虫总结
1.基本抓取网页 get方法 import urllib2 url = "http://www.baidu.com" response = urllib2.urlopen(url) ...
- 使用dropbox 同步任意文件夹（MAC）
使用dropbox自动同步自己mac上的文件夹: -My_Programs /Users/foreverycc/Dropbox/My_Program # . must be full absolute ...
- 关于 System.IO.FileAttributes 的 Reparse Points
关于Reparse Points找到下面的解释,要是能有更进一步的解释说明就更好了 Reparse Points其实是一个用户自定义的数据集合,它可以包含在一个文件或目录中.这种格式的数据能够被特定的 ...
- I’m stuck!（BFS）
I’m stuck! 给定一个R行C列的地图,地图的每一个方格可能是'#', '+', '-', '|', '.', 'S', 'T'七个字符中的一个,分别表示如下意思: '#': 任何时候玩家都不能 ...
- click 绑定（二）带参数的click 事件绑定
注1:传参数给你的click 句柄 最简单的办法是传一个function包装的匿名函数: <button data-bind="click: function() { viewMode ...
- java多线程：并发包中的信号量和计数栓的编程模型
一:信号量的编程模型 package com.yeepay.sxf.test.atomic.test; import java.util.concurrent.Semaphore; /** * 测试信 ...
- mysql SQL SERVER 的算法
Filesort Probes http://dev.mysql.com/doc/refman/5.7/en/dba-dtrace-ref-filesort.html http://dev.mysql ...