示例：

<!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）- 路由的更多相关文章

  1. Angular学习笔记—路由（转载）

    创建路由 1.首先安装 Angular Router.你可以通过运行以下任一操作来执行此操作: yarn add @angular/router # OR npm i --save @angular/ ...

  2. Angular routing生成路由和路由的跳转

    Angular routing生成路由和路由的跳转 什么是路由 路由的目的是可以让根组件按照不同的需求动态加载不同的组件. 根据不同地址,加载不同组件,实现单页面应用. Angular 命令创建一个配 ...

  3. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  4. Angular 学习思路

    近些年前端框架非常多,主流的有 Vue.React.Angular 等.我参与的项目中使用较多的是 Vue.因为 Vue 学习难度不大,上手很快,代码简洁,而且使用 Vue 全家桶(Vue + Vue ...

  5. angular学习资源

    angular学习资源   angularjs库: https://developers.google.com/speed/libraries/devguide?hl=zh-CN#angularjs ...

  6. angular.js的路由和模板在asp.net mvc 中的使用

    angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...

  7. angular学习一框架结构认识

    angular学习所有内容均会与vue以及react框架进行对比. angular学习使用的编译器:webstorm 解决编译器屏蔽node_modules包问题: File-->setting ...

  8. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  9. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  10. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

随机推荐

  1. 【avalon】parseData

    <div data-a="true" data-b="false" data-d="5" data-e="null" ...

  2. tcpdump抓包规则命令大全

    下面的例子全是以抓取eth0接口为例,如果不加”-i eth0”是表示抓取所有的接口包括lo. 1.抓取包含10.10.10.122的数据包 # tcpdump -i eth0 -vnn host 1 ...

  3. Linux启动Apache支持.htaccess伪静态文件方法

    第一.编辑httpd.conf文件 A - 在etc/httpd/conf/目录下的httpd.conf 文件,找到: LoadModule rewrite_module modules/mod_re ...

  4. 148. Sort List

    Sort a linked list in O(n log n) time using constant space complexity. 代码如下: /** * Definition for si ...

  5. avalon框架

    http://www.cnblogs.com/rubylouvre/p/4783966.html

  6. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  7. 虚拟化_KVM

    一.KVM介绍 1.KVM全称kernel vitual machine,是针对包含虚拟化扩展(InterVT或AMD-V)的x86硬件上的完全原生的虚拟化解决方案 2.KVM是以色列Qumranet ...

  8. spark新能优化之序列化

    概叙: 在任何分布式系统中,序列化都是扮演着一个重要的角色的.如果使用的序列化技术,在执行序列化操作的时候很慢,或者是序列化后的数据还是很大,那么会让分布式应用程序的性能下降很多.所以,进行Spark ...

  9. Linux-dd命令详解【转】

    转自http://www.cnblogs.com/dkblog/archive/2009/09/18/1980715.html   Linux-dd命令详解 dd 是 Linux/UNIX 下的一个非 ...

  10. 论文笔记之：Visual Tracking with Fully Convolutional Networks

    论文笔记之:Visual Tracking with Fully Convolutional Networks ICCV 2015  CUHK 本文利用 FCN 来做跟踪问题,但开篇就提到并非将其看做 ...