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