AngularJs练习Demo17 ngRoute
2024-08-26 00:04:27
<!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>
最新文章
- Socket异步通讯
- linux下常见的字符串处理
- SQLServer控制用户访问权限表
- Saving changes is not permitted in SQL Server
- LabelControl文本居中显示
- laravel 5.3 学习之路——路由（资源，别名）
- VMware虚拟机的CentOS无法上网的解决方法
- linux下的文件操作——批量重命名
- c#安全性、稳定性、高性能需要注重的点
- LINUX 下mysql数据库导出
- c++封装性
- 数学之路(3)-机器学习(3)-机器学习算法-PCA
- 使用canvas绘制时钟 （http://heeroluo.net/Article/Detail/95）
- Java之冒泡算法实现
- AES/CBC/PKCS7Padding加密方式
- SpringBoot使用事务
- 《剑指offer》第四十六题（把数字翻译成字符串）
- NGINX 资料
- Disable Oracle Automatic Jobs
- 【ArcGIS for JavaScript api】Clusterlayer聚簇类