示例：

<!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. Git命令整理

    说在前面: 刚开始在实习时接触git,是用git可视化工具,但是仅限于克隆库.切换分支.抓取和推送,对于其中的原理不甚了解.看了廖雪峰老师Git教程,获益颇丰.特别要感谢我工作中的同事,是他强烈建议我 ...

  2. 一个js对象的代码结构

    初步理解的js里一个对象的写法: GameLayer   GameLayer.js   var GameLayer = cc.Layer.extend({   //私有属性(带下划线"_&q ...

  3. Spring AOP配置文件

    在<aop:config>...</aop:config>报错: Multiple annotations found at this line: - cvc-complex- ...

  4. win7将 esc与 capslock 互换

    一天手软,于是买了一个机械键盘.cherry g80-3494 红轴各方面都不错就是有一个问题我经常用vim,其中esc.及F键区离主键盘区实在是太远了. 习惯于vim模式的人都有一种懒症,就是手指非 ...

  5. ABAP DEMO

    sap Program DEMO 介绍 Program Description BALVBT01 Example SAP program for displying multiple ALV repo ...

  6. 《C标准库》—之<assert.h>实现

    首先,贴出标准库中<assert.h>的实现源码: #undef assert #ifdef NDEBUG #define assert(test)((void)0) #else void ...

  7. T语言TC发布脚本方法

    代码模式的注册码发布脚本方法 注册码项目模式的发布脚本方法 1.注册码项目发布版 2.注册码项目代理版 这两种方法都是基于注册码项目来实现的,所以在使用之前,需要先创建注册码项目.

  8. AttributeError: 'NoneType' object has no attribute 'bytes' python3.4 win64

    解决方法: easy_install -U pip 详见: https://github.com/pypa/pip/issues/2669

  9. 机器翻译 2010年NOIP全国联赛提高组

    题目描述 Description 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义 来替换.对于每个英 ...

  10. zoj3261 带权并查集

    题意:有很多颗星球,各自有武力值,星球间有一些联系通道,现在发生战争,有一些联系通道会被摧毁,而一些星球会通过还没有被摧毁的联系通道直接或者间接联系能够联系到的武力值最高的星球求救,如果有多个武力值都 ...