<!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>

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

     <style type="text/css">

         <!--animate class样式的写法，如果是ng-show的话使用的写法是不一样的 -->

         .box {

             width: 200px;

             height: 200px;

             background: red;

             transition: 1s all;

         }

             .box.ng-enter {

                 opacity: 0;

             }

             .box.ng-enter-active {

                 opacity: 1;

             }

             .box.ng-leave {

                 opacity: 1;

             }

             .box.ng-leave-active {

                 opacity: 0;

             }

     </style>

 </head>

 <body>

     <div ng-app="myApp">

         <div class="header" ng-controller="firstController">

             <!--  例子 1  超链接跳转

                 <a  href="#div1" >第一个div</a>

             <a href="#div2">第二个div</a>

             <a href="#div3">第三个div</a>

             <a href="#content/12">点击去内容12</a>

                 -->

             <!--例二 js跳转

                  通过$location来跳转

                 一般情况下是没办法在这里直接使用$location

                 因为我们在控制器的时候有给 $scope.$location 赋值所以这里才能直接使用

                 -->

             <a ng-click="$location.path('/div1')">第一个div</a>

             <a ng-click="$location.path('/div2')">第二个div</a>

             <a href="#div3">第三个div</a>

             <a href="#content/12">点击去内容12</a>

         </div>

         <div ng-view class="box">

         </div>

         <script type="text/javascript">

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

             //$routeChangeStart

             //$routeChangeSuccess/Error

             app.run(["$rootScope", function ($rootScope) { //可以在run方法里注册路由切换的事件

                 $rootScope.$on("$routeChangeStart", function (event, current, pre) {

                 });

             }]);

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

                 $routeProvider.when("/div1", {

                     templateUrl: 'template1.html', //templateUrl

                     controller: "div1Controller"

                 }).when("/div2", {

                     template: "<p>这是div2{{text}}</p>",

                     controller: "div2Controller"

                 }).when("/div3", {

                     template: "<p>这是div3{{text}}</p>",

                     controller: "div3Controller"

                 }).when("/content/:id", { //传值 名称为id

                     template: "<p>这是div4{{text}}  id={{id}}</p>",

                     controller: "div4Controller"

                 }).otherwise({

                     redirectTo: "/div1"

                 });

             }]);

             app.controller("div1Controller", function ($scope) {

                 $scope.text = "PhoneGap中文网div1Controller";

             });

             app.controller("div2Controller", function ($scope) {

                 $scope.text = "PhoneGap中文网div2Controller";

             });

             app.controller("div3Controller", function ($scope) {

                 $scope.text = "PhoneGap中文网div3Controller";

             });

             app.controller("div4Controller", function ($scope, $routeParams) {//通过$routeParams来获取参数

                 $scope.text = "PhoneGap中文网div4Controller";

                 $scope.id = $routeParams.id;

             });

             app.controller("firstController", function ($scope, $location) {

                 $scope.$location = $location;

             });

         </script>

     </div>

 </body>

 </html>

AngularJs练习Demo17 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练习Demo16 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. HDU 4606 Occupy Cities (计算几何+最短路+最小路径覆盖)

    转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents    by---cxlove 题目:给出n个城市需要去占领,有m条线段是障碍物, ...

  2. js 邮箱正则匹配

    $(function(){ var valAttr = '746979855qq.com'; \-])+\.)+([a-zA-Z0-]{,})+$/; var tmpresult = mail_fil ...

  3. ubuntu 14.下 netbeans 自体锯齿 消除

    Ubuntu下NetBeans消除字体锯齿的方法 在netbeans.conf 文件的netbeans_default_options的最后添加 -J-Dswing.aatext=true -J-Da ...

  4. pip安装第三方库以及版本

    这篇blog只是写给自己看看的. 今天突然遇到sqlalchemy映射到数据库时,一个字段类型是datetime(6),我这边死活访问不上,之前一直没有问题,最后查明原因,原来是第三方库的版本问题,真 ...

  5. OpenStack REST API使用

    以前一直想写博客,但因各种因素一直没写.最近在做OpenStack,而OpenStack对外提供REST API,今天就简要介绍一下OpenStack REST API 使用,关于什么是REST AP ...

  6. Spring碎点知识

    1.依赖注入:不仅可以为Bean注入普通的属性值,还可以注入其他Bean的作用.通过配置文件组织在一起,这里的Bean是Java对象 说明:关于依赖注入与控制反转的这两个名字,表达的都是同一个意思,只 ...

  7. Sicily connect components in undirected graph

    题目介绍: 输入一个简单无向图,求出图中连通块的数目. Input 输入的第一行包含两个整数n和m,n是图的顶点数,m是边数.1<=n<=1000,0<=m<=10000. 以 ...

  8. 剑指offer之O(1)算法删除指针所指向的节点

    题目如图: 1.把要删除pToBeDeleted的节点的后面节点覆盖点要删除的节点pToBeDeleted 2.要考虑如果删除的节点是最后一个节点怎么办 3.要考虑如果总共只有一个节点,删除的是头结点 ...

  9. 一道考验你设计能力的C++编程题

    http://www.cppblog.com/weiym/archive/2012/06/12/178472.html

  10. HTTP数据包头解析---之温故而知新！

    [转]HTTP请求模型和头信息参考 参考: http://blog.csdn.net/baggio785/archive/2006/04/13/661410.aspx模型: http://blog.c ...