代码案例：
 <html>

   <head>

       <meta charset="utf-8">

     <title>AngularJS 路由实例</title>

   </head>

   <body ng-app='routingDemoApp'>

     <h2>AngularJS 路由应用</h2>

     <ul>

       <li><a href="#/">首页</a></li>

       <li><a href="#/computers">分页1</a></li>

       <li><a href="#/printers">分页2</a></li>

       <li><a href="#/blabla">其他</a></li>

     </ul>

     <div ng-view></div>

     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

     <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> //注意：要引入Angular-route.js

     <script>

       angular.module('routingDemoApp',['ngRoute'])   //注意：依赖注入 ngRoute 模块

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

         $routeProvider

         .when('/',{template:'这是首页'})

         .when('/computers',{template:'这是分页1的页面'})

         .when('/printers',{template:'这是分页2页面'})

         .otherwise({redirectTo:'/'});    //找不到路径时跳转的页面

       }]);

     </script>

   </body>

 </html>

Angular.js路由 简单小案例的更多相关文章

  1. angular前端框架简单小案例

    一.angular表达式 <head> <meta charset="UTF-8"> <title>Title</title> &l ...

  2. Asp.Net Mvc+Angular.Js自测小Demo

    参考:http://www.cnblogs.com/eedc/p/6082052.html 一.引用anguler: 1.angular.js 2.angular-route.js 3.app.js ...

  3. angular中ng-bind指令小案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. JS高级---沙箱小案例

    沙箱小案例 substr截取, 从指定的字段开始截取 (function () { var str="小白喜欢小黑"; str=str.substr(2); console.log ...

  5. JS高级---闭包小案例

    闭包小案例 普通的函数 //普通的函数 function f1() { var num = 10; num++; return num; } console.log(f1()); //11 conso ...

  6. 关于Iscroll.js 的滑动和Angular.js路由冲突问题

    Iscroll主要应用于app移动端开发. 主要代码: window.onload=function(){ var myIscroll=new IScroll(".headerNav&quo ...

  7. 基于Pytorch的简单小案例

    神经网络的理论知识不是本文讨论的重点,假设读者们都是已经了解RNN的基本概念,并希望能用一些框架做一些简单的实现.这里推荐神经网络必读书目:邱锡鹏<神经网络与深度学习>.本文基于Pytor ...

  8. SpringMVC静态文件(图片)访问+js访问 简单小例子

    项目文件布局: web.xml文件: <?xml version="1.0" encoding="UTF-8"?> <web-app vers ...

  9. Vuex-全局状态管理【简单小案例】

    前言: Vuex个人见解: 1.state :所有组件共享.共用的数据.理解为不是一个全局变量,不能直接访问以及操作它.2.mutations : 如何操作 state 呢?需要有一个能操作state ...

随机推荐

  1. Web高级 JavaScript中的数据结构

    复杂度分析 大O复杂度表示法 常见的有O(1), O(n), O(logn), O(nlogn) 时间复杂度除了大O表示法外,还有以下情况 最好情况时间复杂度 最坏情况时间复杂度 平均情况时间复杂度 ...

  2. Linq查询语法(2)

    转:http://www.cnblogs.com/knowledgesea/p/3897665.html 1.简单linq查询 var ss = from r in db.Am_recProSchem ...

  3. [Web 前端] 018 css 清除浮动的四种方法

    清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...

  4. 全球编程语言薪资排行榜，Java竟然垫底！！！

    近日,Stack Overflow 发布了 2019 年度开发者调查报告,这次调查有来自全球的几乎将近 90000 名开发者参与,是对世界各地开发人员进行的规模最大,最全面的调查. 这次调查报告中总结 ...

  5. JavaScript数组增删方法总结

    数组是JavaScript中常见的一个对象,在这篇文章中主要整理数组增删改查方面的相关操作方法. 首先我们创建一个数组 添加元素: push(elment) 从后面添加元素,返回数组的长度   uns ...

  6. There is no Action mapped for namespace [/] and action name [TestAction] ass

    1.修改action的name值 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE strut ...

  7. git submodule删除多余模块

    rm -rf 子模块目录 删除子模块目录及源码 vi .gitmodules 删除项目目录下.gitmodules文件中子模块相关条目 vi .git/config 删除配置项中子模块相关条目 rm ...

  8. web开发中SESSION的本质

    有一点我们必须承认,大多数web应用程序都离不开session的使用.这篇文章将会结合php以及http协议来分析如何建立一个安全的会话管理机制.我们先简单的了解一些http的知识,从而理解该协议的无 ...

  9. 2019-8-14-win10-使用-SMB-v1

    title author date CreateTime categories win10 使用 SMB v1 lindexi 2019-08-14 08:55:55 +0800 2018-2-13 ...

  10. Power Designer将数据库表结构导出到Word

     一.   安装与运行PowerDesigner(本例中用的版本是15.1) 二.“File”→“New Model”→“Categories”→“Information”→“Physical Dat ...