AngularJs练习Demo17 ngRoute
<!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练习Demo17 ngRoute的更多相关文章
- AngularJS 路由：ng-route 与 ui-router
AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL. 通俗来讲,ng-route模块中的$routeService监测$location.url()的变化, ...
- angularjs之插件ngRoute和ngAnimate
使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html l ...
- AngularJS Best Practices: ngRoute
app/----- components/---------- users/--------------- controllers/-------------------- users.control ...
- AngularJs练习Demo16 ngRoute
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- [AngularJS] AngularJS系列(2) 中级篇之路由
目录 原理 angular-route ui-router 事件 深度路由 原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on(' ...
- angularjs 路由回退，返回到上一个路由
在现阶段比较流行的angularjs框架中:路由是一个比较重要的应用:angularjs的单页面是其强大功能之一: 所有的页面其实就只是在一个页面就实现的:angularjs通过对路由的控制来进行页面 ...
- AngularJS基础总结
w3shools angularjs教程 wiki <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...
- ngRoute 和 ui.router 的使用方法和区别
在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...
- AngularJs轻松入门（七）多视图切换
在AngularJs应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图 ...
随机推荐
- jquery 获取 outerHtml 包含当前节点本身的代码
在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然后我们有时候确需要,找遍jQuery api文档也没有任何方法可以拿到. 看到有的人通过pare ...
- CentOS 网络设置修改 指定IP地址 DNS 网关（转）
CentOS 网络设置修改 指定IP地址 DNS 网关(实测 笔记) 环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G) 系统版本:Centos-6.5-x86_64 ...
- Apple Pay 应用 demo --备用哦
"iOS8.1就已经有这个功能了,只是木有现在这么的火,现在的趋势是要火的节奏,因此很多电商平台B2B,P2P,C2C,X2X都有可能需要这个屌丝的付款功能了,在此简单的研究一下." ...
- 设计模式 ( 二十一 )：Vistor访问者模式 -- 行为型
1.概述 在软件开发过程中,对于系统中的某些对象,它们存储在同一个集合collection中,且具有不同的类型,而且对于该集合中的对象,可以接受一类称为访问者的对象来访问,而且不同的访问者其访问方式有 ...
- 【Linux】部署apache
部署前的准备: 1.安装apr #wget http://mirror.bit.edu.cn/apache/apr/apr-1.4.8.tar.gz #tar -zxvf apr-1.4.8.tar. ...
- 消除JavaScript闭包的一般方法
JavaScript 的闭包是一个其主动发展的特性, 也是一个被动发展的特性. 也就是说, 一方面, JS 有了闭包能更好解决一些问题. 另一方面, JS 为了解决某些问题, 而不得不使用闭包勉强来解 ...
- lua的几个时间相关处理函数
随手写的,项目中没用,不一定对,只作参考. --游戏时间相关函数 local gt = {} local math = math local ONE_HOUR = ONE_MINUTE * ONE_M ...
- (转)实战p12文件转pem文件
需要实现这个功能的一般都是app开发证书不支持通配符(即com.xxx.xxx.xxx格式),在业务需求上类似消息推送这样的业务. 1.首先生成一个ssl的证书 选择app IDS 后实现下面这个(这 ...
- Server Job: error: String or binary data would be truncated. The statement has been terminated.
"String or binary data would be truncated. The statement has been terminated" most probabl ...
- 基于年纪和成本（Age & Cost）的缓存替换(cache replacement)机制
一.客户端的缓存与缓存替换机制 客户端的资源缓存: 在客户端游戏中,通常有大量的资源要处理,这些可能包括贴图.动作.模型.特效等等,这些资源往往存在着磁盘文件->内存(->显存)的数据通路 ...