AngularJs练习Demo17 ngRoute
Posted 编程猴子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs练习Demo17 ngRoute相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <script src="../Scripts/angular.min.js"></script> 8 <script src="../Scripts/angular-route.min.js"></script> 9 10 <script src="../Scripts/angular-animate.js"></script> 11 <style type="text/css"> 12 <!--animate class样式的写法，如果是ng-show的话使用的写法是不一样的 --> 13 .box { 14 width: 200px; 15 height: 200px; 16 background: red; 17 transition: 1s all; 18 } 19 20 .box.ng-enter { 21 opacity: 0; 22 } 23 24 .box.ng-enter-active { 25 opacity: 1; 26 } 27 28 .box.ng-leave { 29 opacity: 1; 30 } 31 32 .box.ng-leave-active { 33 opacity: 0; 34 } 35 </style> 36 37 </head> 38 <body> 39 <div ng-app="myApp"> 40 <div class="header" ng-controller="firstController"> 41 42 <!-- 例子 1 超链接跳转 43 44 <a href="#div1" >第一个div</a> 45 <a href="#div2">第二个div</a> 46 <a href="#div3">第三个div</a> 47 <a href="#content/12">点击去内容12</a> 48 49 --> 50 <!--例二 js跳转 51 通过$location来跳转 52 一般情况下是没办法在这里直接使用$location 53 因为我们在控制器的时候有给 $scope.$location 赋值所以这里才能直接使用 54 --> 55 <a ng-click="$location.path(‘/div1‘)">第一个div</a> 56 <a ng-click="$location.path(‘/div2‘)">第二个div</a> 57 <a href="#div3">第三个div</a> 58 <a href="#content/12">点击去内容12</a> 59 60 </div> 61 <div ng-view class="box"> 62 63 64 </div> 65 66 67 <script type="text/javascript"> 68 var app = angular.module("myApp", [‘ngRoute‘, "ngAnimate"]); 69 //$routeChangeStart 70 //$routeChangeSuccess/Error 71 app.run(["$rootScope", function ($rootScope) { //可以在run方法里注册路由切换的事件 72 $rootScope.$on("$routeChangeStart", function (event, current, pre) { 73 74 }); 75 }]); 76 77 78 app.config([‘$routeProvider‘, function ($routeProvider) { 79 $routeProvider.when("/div1", { 80 templateUrl: ‘template1.html‘, //templateUrl 81 controller: "div1Controller" 82 }).when("/div2", { 83 template: "<p>这是div2{{text}}</p>", 84 controller: "div2Controller" 85 }).when("/div3", { 86 template: "<p>这是div3{{text}}</p>", 87 controller: "div3Controller" 88 }).when("/content/:id", { //传值 名称为id 89 template: "<p>这是div4{{text}} id={{id}}</p>", 90 controller: "div4Controller" 91 }).otherwise({ 92 redirectTo: "/div1" 93 }); 94 }]); 95 96 app.controller("div1Controller", function ($scope) { 97 $scope.text = "PhoneGap中文网div1Controller"; 98 }); 99 app.controller("div2Controller", function ($scope) { 100 $scope.text = "PhoneGap中文网div2Controller"; 101 }); 102 app.controller("div3Controller", function ($scope) { 103 $scope.text = "PhoneGap中文网div3Controller"; 104 }); 105 app.controller("div4Controller", function ($scope, $routeParams) {//通过$routeParams来获取参数 106 $scope.text = "PhoneGap中文网div4Controller"; 107 $scope.id = $routeParams.id; 108 109 }); 110 app.controller("firstController", function ($scope, $location) { 111 $scope.$location = $location; 112 }); 113 114 115 </script> 116 117 </div> 118 </body> 119 </html>
以上是关于AngularJs练习Demo17 ngRoute的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS、AngularUi（引导程序）和 NgRoute
AngularJS：使用ngRoute路由时未加载组件控制器