先看文件的摆放

不废话,直接上代码.

detail.html:

 <hr/>

 <h3>路由 <span style="color: red;">{{id}}</span>: detail.html </h3>

list.html:

 <hr>

         <h1>List.html</h1>

         <h2>{{myName}}</h2>

         <ul>

             <li ng-repeat="id in [1,2,3]">

                 <a href="#/list/{{id}}">链接{{id}}</a>

             </li>

         </ul>

demo-route.html

 <!DOCTYPE html>

 <html ng-app="routeModule">

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript" src="../js/angular1.4.3.js"></script>

     <script type="text/javascript" src="../js/angular-route.js"></script>

   </head>

 <body>

     <h1>Angular的路由案例</h1>

     <div ng-view></div>

 <script>

     var routeApp = angular.module('routeModule',['ngRoute']);

     routeApp.config(['$routeProvider',function ($routeProvider) {

         $routeProvider

                 .when('/list', {

                     templateUrl: 'views/route/list.html',

                     controller: 'ListRouteController'

                 })

                 .when('/list/:id', {

                     templateUrl: 'views/route/detail.html',

                     controller: 'DetailRouteController'

                 })

                 .otherwise({

                     redirectTo: '/list'

                 });

     }]);

     routeApp.controller('ListRouteController',function($scope) {

         $scope.myName="思思博士";

     });

     routeApp.controller('DetailRouteController',function($scope, $routeParams) {

         $scope.id = $routeParams.id;

     });

 </script>

 </body>

 </html>

注意看我引入的js版本.现在的route模块从angular中提取出来了.所以需要单独引用.

单击链接或修改id好,就能看到神奇的效果了.

Angularjs路由.让人激动的技术.真给前端长脸了.的更多相关文章

  1. AngularJS路由使用案例

    AngularJS路由使用案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. 还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features- ...

  3. AngularJS 路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...

  4. Angularjs路由需要了解的那点事

    Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...

  5. 【转】AngularJS路由和模板

    1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...

  6. AngularJS路由和模板

    前言 如果想开发一款类似gmail的web应用,我们怎么做呢? 以jQuery的思路,做响应式的架构设计时,我们要监听所有点击事件,通过事件函数触发我们加载数据,提交,弹框,验证等的功能:以 Angu ...

  7. AngularJS路由跳转

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是 ...

  8. AngularJS 路由精分

    AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...

  9. AngularJS进阶(二)AngularJS路由问题解决

    AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...

随机推荐

  1. JavaScript 札记（数据类型和变量、）

    1. 变量名由:字母.下划线.$.数字组成,只可以字母.下划线.$开头. 2.JavaScript区分大小写! 3.命名规范:匈牙利命名法(不论是变量名还是函数名). 4.基本类型(3种):字符串.数 ...

  2. SLA了解

    许多企业正要求服务品质协议(SLA),SLA 可以保证企业为之付费的 IT 服务的可靠性.随着 Web 服务成为主流,客户将要求保证服务质量的 SLA.在本文中,Judith M. Myerson 说 ...

  3. 更简单的跨域解决方案 - CORS

    跨域问题是前端开发经常遇到的了,大家可能常用的就是JSONP了, JSONP非常方便,只要前后端约定好一个方法名,就可以沟通了,但JSONP也有一定的局限,JSONP只支持GET请求,还有当你想提供一 ...

  4. Innodb 存储引擎（转)

    第一部分:线程 Innodb是一个多线程的,各个线程负责不同的任务.主要的线程有:Master Thread.IO Thread.Purge Thread.Page Cleaner Thread. 一 ...

  5. Android SDK Manager 更新失败的解决方法

    Android SDK Manager 更新失败的解决方法 原文地址 最近使用Android SDK Manager 更新Android SDK tools 发现经常更新失败,获取不到更新信息: Fe ...

  6. PHP 生成指定大小随机图片

    PHP 生成指定大小随机图片 <?php $image_width = 100; $image_height = 100; $image_str = ''; if (isset($_GET['w ...

  7. sphinx 配置sphinx.conf

    sphinx的配置文件是在配置的时候最容易出错的了: 基本概念: source:数据源,数据是从什么地方来的. index:索引,当有数据源之后,从数据源处构建索引.索引实际上就是相当于一个字典检索. ...

  8. (转) 在Eclipse中进行C/C++开发的配置方法（20140721最新版）

    本文转载自:http://blog.csdn.net/baimafujinji/article/details/38026421 Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其 ...

  9. Oracle11g中Exp命令空表不能导出的问题

    http://www.jb51.net/article/43894.htm 一.不能导出空表的原因 1.Oracle11g默认对空表不分配segment,故使用exp导出Oracle11g数据库时,空 ...

  10. SVN switch 用法详解

    一直知道SVN有个switch命令,但是对它的介绍教程却很少,大多是生硬的svn帮助文档里的文字,从而一直不怎么会用.今天看了这篇文章,突觉豁然开朗,整理下来以备查阅. 使用SVN,自然是需要与别人合 ...