<!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <meta charset="utf-8" />

     <script src="../Scripts/angular.min.js"></script>

     <script src="../Scripts/angular-route.min.js"></script>

 </head>

 <body>

     <div ng-app="myApp">

         <div ng-controller="firstController">

             {{text}}

         </div>

         <script type="text/javascript">

             var app = angular.module("myApp", ['ngRoute']);

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

                 $routeProvider.when("/aaa/:num", {

                     template: '<p>首页的内容</p>{{name}}', //templateUrl

                     contorller:"Aaa"

                 }).when("/bbb", {

                     template: "<p>学员的内容</p>{{name}}",

                     contorller:"Bbb"

                 }).when("/ccc", {

                     template: "test.html",

                     contorller:"Ccc"

                 }).otherwise({

                      redirectTo:"/aaa"

                 });

             }]);

         </script>

     </div>

 </body>

 </html>

AngularJs练习Demo16 ngRoute的更多相关文章

  1. AngularJS 路由：ng-route 与 ui-router

    AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL. 通俗来讲,ng-route模块中的$routeService监测$location.url()的变化, ...

  2. angularjs之插件ngRoute和ngAnimate

    使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html l ...

  3. AngularJS Best Practices: ngRoute

    app/----- components/---------- users/--------------- controllers/-------------------- users.control ...

  4. AngularJs练习Demo17 ngRoute

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. [AngularJS] AngularJS系列(2) 中级篇之路由

    目录 原理 angular-route ui-router 事件 深度路由 原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on(' ...

  6. angularjs 路由回退，返回到上一个路由

    在现阶段比较流行的angularjs框架中:路由是一个比较重要的应用:angularjs的单页面是其强大功能之一: 所有的页面其实就只是在一个页面就实现的:angularjs通过对路由的控制来进行页面 ...

  7. AngularJS基础总结

    w3shools    angularjs教程  wiki   <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...

  8. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

  9. AngularJs轻松入门（七）多视图切换

    在AngularJs应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图 ...

随机推荐

  1. image转文件

    UIImage  *image = self.imageCompainPhoto.image; NSData *imageData = UIImagePNGRepresentation(image); ...

  2. html5 js跨域

    介绍 当我们使用XMLHttpRequest发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Acce ...

  3. apache配置多站点

    在httpd.conf文件中,有如下配置(注:舍去httpd.conf文件的注释内容) Listen 80 ServerName localhost <Directory /> Allow ...

  4. JQUERY1.9学习笔记 之基本过滤器(五) 大于选择器

    大于选择器:jQuery( ":gt(index)" )jQuery( ":gt(-index)" ) 例:大于TD5 到TD8 用黄色背景,TD8用红色文字. ...

  5. linux磁盘空间用满的处理方法

    linux下空间满可能有两种情况 可以通过命令 df -h  查看磁盘空间占用,实际上是查看磁盘块占用的文件(block) df -i  查看索引节点的占用(Inodes) 磁盘块和索引节点其中之一满 ...

  6. Cstring类

    GetLength: 获取CString类的对象包含的字符串的长度(字节数) IsEmpty: 测试CString类的对象包含的字符串是否为空 Empty: 使CString类的对象包含的字符串为空字 ...

  7. Uubntu E: Sub-process /usr/bin/dpkg returned an error code问题的解决办法

      cd /var/lib/dpkg   sudo mv info info.bak   sudo mkdir info      apt-get --reinstall install udev m ...

  8. FlashPaper组件——api

    属性摘要 属性 说明 documentPath:String FlashPaper文件的路径. borderThickness:Number 边框宽度. borderColor:String 边框颜色 ...

  9. delphi7调用webservice Java 传入参数为空

    在delphi7中,new-webservices-wsdl importer中输入wsdl地址,会自动生成wsdl单元代码.在调用时,传入参数到服务器端时为空了. 网上说缺少 InvRegistry ...

  10. 黑马程序员_Java集合框架

    集合类 1,为什么出现集合类? 面向对象语言对食物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一种方式. 2,数组和集合类同是容器,有何不同? 数组 ...