AngularJs练习Demo17 ngRoute
2016-06-21 23:10
267 查看
<!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练习Demo16 ngRoute
- AngularJs练习Demo15自定义服务
- AngularJs练习Demo14自定义服务
- AngularJs练习Demo13Provider_factory
- AngularJs练习Demo12Provider
- AngularJs练习Demo11引入Jquery
- AngularJs练习Demo10 ngInclude
- AngularJs练习Demo8 自定义过滤器
- AngularJs练习Demo7
- AngularJs练习Demo6
- AngularJs练习Demo5
- AngularJs练习Demo4
- AngularJs练习Demo3
- AngularJs练习Demo2
- AngularJs练习Demo1
- angularjs的表单验证
- AngularJS 避繁就简的路由
- AngularJS 学习记录
- AngularJS 动画和触摸服务
- Angularjs