示例：

<!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. 《你不知道的JavaScript》第二部分：this 详解

    第1章 关于this this 是自动定义在所有函数的作用域中的关键字,用于引用合适的上下文对象. ☞ 为什么要使用 this ? this 提供了一种更优雅的方式来隐式"传递"一 ...

  2. （理论篇）53个要点提高PHP编程效率

    用单引号代替双引号来包含字符串,这样做会更快一些.因为php会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数"( ...

  3. 解决：导入第三方jar包后，仍然出现java.lang.NoClassDefFoundError的错误

    最近,在运行某个Android工程的时候,一直抛出java.lang.NoClassDefFoundError异常. 按照异常所给出的信息,应该是程序使用到的第三方jar包出了问题. 但是,这些第三方 ...

  4. haar-like特征(转载)

    浅析人脸检测之Haar分类器方法  [补充] 这是我时隔差不多两年后, 回来编辑这篇文章加的这段补充, 说实话看到这么多评论很是惊讶, 有很多评论不是我不想回复, 真的是时间久了, 很多细节我都忘记了 ...

  5. 用CSS变形创建圆形导航

    http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html 本文由陈毅根据SARA SOUE ...

  6. leetcode 125. Valid Palindrome ----- java

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  7. linux下c语言实现计算磁盘剩余空间

    #include <sys/statfs.h> unsigned ; size_t mbFreedisk = ; unsigned ; size_t mbTotalsize = ; str ...

  8. poj2553 强连通

    题意:定义了一个图的底(bottom),是指在一个图中能够被所有点到达的点,问途中有哪些点是图的底. 首先是同一个强连通分量中的点都能够互相到达,强连通分量中一个点能到达其他点,也必然代表该强连通分量 ...

  9. 越狱Season 1-Episode 21: Go

    Season 1, Episode 21: Go -Michael: I need you to let me get us out of here. 我需要你帮我出去 -Patoshik: If y ...

  10. 【转】 iOS日常学习 - iOS10上关于NSPhotoLibraryUsageDescription等问题

    原文网址:http://blog.csdn.net/wang631106979/article/details/52578001 最近升级了Xcode8.0,真是很多坑啊,填完一个来另外一个,今天又遇 ...