代码案例：
 <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. springSecurity5 重定向登录页面后 报错：尝试清除 Cookie.net::ERR_TOO_MANY_REDIRECTS status:200

    springSecurity5 使用: http.formLogin().loginPage("/login");报错如下图: springsucurity5 中 需要给 自己定义 ...

  2. oracle--表类型

  3. 2019春第十一周作业Compile Summarize

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 这里 我在这个课程的目标是 能按自己的想法解出题目 这个作业在那个具体方面帮助我实现目标 能朝着软件工程师方向发展 参考文献与网址 C语言 ...

  4. [Python3] 010 字符串：给你们看看我的内置方法 第二弹

    目录 少废话,上例子 1. isidentifier() 2. islower() 3. isnumeric() 4. isprintable() 5. isspace() 6. istitle() ...

  5. JAVA总结--Spring框架全解

    一.Spring简介 Spring 是个java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring 框架目标是简化Java企业 ...

  6. Git-第四篇廖雪峰Git教程学习笔记（3）远程仓库，克隆远端库

    1.本次连接的是gitHub仓库. 1>创建SSH Key. ssh-keygen -t rsa -C "youremail@example.com" lfy@lfy-PC ...

  7. Java学习day9面向对象编程2-方法的可变个数的参数和方法的参数传递

    一.方法的可变个数的参数. 问题:我们能够打印的信息都是来源于方法的参数,也就是形参的传递.那如何要给方法传递不同的参数? .1.采用数组形参来定义方法 public static void test ...

  8. Python2中range 和xrange的区别？？

    两者用法相同,不同的是range返回的结果是一个列表,而xrange的结果是一个生成器, 前者是直接开辟一块内存空间来保存列表,后者是边循环边使用,只有使用时才会开辟内存空间, 所以当列表很长时,使用 ...

  9. 靶形数独 （dfs+预处理+状态压缩）

    #2591. 「NOIP2009」靶形数独 [题目描述] 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们 ...

  10. RocksDB存储引擎测试

    一:安装搭建(两个节点都要安装) yum install http://www.percona.com/downloads/percona-release/redhat/0.1-4/percona-r ...