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>
