angularjs1-路由
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js"></script>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
<div ng-bind-html="text"></div>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp',['ngSanitize']);//依赖
app.controller('firstController',['$scope','$interval',function($scope,$interval){
$scope.text = '<h1>hello</h1>';//解析html，
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div class="header">
<a href="#div1">第一个div</a>
<a href="#div2">第二个div</a>
<a href="#div3">第三个div</a>
<a href="#content/13/5">点击去内容12</a>
</div>
<div ng-view></div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", ['ngRoute']);
app.run(['$rootScope',function($rootScope){
$rootScope.$on('$routeChangeStart',function(event,current,pre){
console.log(event);
// console.log(current);
// console.log(pre);
});
}]);
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/div1',{
templateUrl : '../template1.html',
controller : 'div1Controller'
})
.when('/div2',{
template : '<p>这是div2{{text}}</p>',
controller : 'div2Controller'
})
.when('/div3',{
template : '<p>这是div3{{text}}</p>',
controller : 'div3Controller'
})
.when('/content/:id/:cateid',{
template : '<p>这是content{{id}}</p>',
controller : 'div4Controller'
})
.otherwise({
redirectTo : '/div3'
});
}]); app.controller('div1Controller',function($scope){
$scope.text='phonegap中文网 外部页面';
});
app.controller('div2Controller',function($scope){
$scope.text='div2Controller';
});
app.controller('div3Controller',function($scope){
$scope.text='div3Controller';
});
app.controller('div4Controller',['$scope','$routeParams',function($scope,$routeParams){
console.log($routeParams);
$scope.id=$routeParams.num;
$scope.text='div4Controller';
}]);
/*
* app.controller('firstController',function($scope){
//$scope.text='phonegap中文网';
});
* */
</script>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
<script>
var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/aaa/:num',{
template : '<p>首页的内容</p>{{name}}',
controller : 'Aaa'
})
.when('/bbb',{
template : '<p>学员的内容</p>{{name}}',
controller : 'Bbb'
})
.when('/ccc',{
templateUrl : 'test.html',
controller : 'Ccc'
})
.otherwise({
redirectTo : '/aaa'
});
}]);
m1.run(['$rootScope',function($rootScope){//run是module初始化的时候，
$rootScope.$on('$routeChangeStart',function(event,current,pre){//on监听触发的事件，
console.log(event);
console.log(current);
console.log(pre);
});
}]);
m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){
$scope.name = 'hello';
$scope.$location = $location;
console.log( $routeParams );
}]);
m1.controller('Bbb',['$scope',function($scope){
$scope.name = 'hi';
}]);
m1.controller('Ccc',['$scope',function($scope){
$scope.name = '你好';
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<a href="" ng-click="$location.path('aaa/123')">首页</a>
<a href="" ng-click="$location.path('bbb')">学员</a>
<a href="" ng-click="$location.path('ccc')">课程</a>
<div ng-view></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div class="header" ng-controller="firstController">
<a ng-click="$location.path('div1')">第一个div</a>
<a ng-click="$location.path('/div2')">第二个div</a>
<a href="#div3">第三个div</a>
<a href="#content/13/5">点击去内容12</a>
</div>
<div ng-view></div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", ['ngRoute']);
app.run(['$rootScope',function($rootScope){
$rootScope.$on('$routeChangeStart',function(event,current,pre){
console.log(event);
// console.log(current);
// console.log(pre);
});
}]);
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/div1',{
templateUrl : 'template1.html',
controller : 'div1Controller'
})
.when('/div2',{
template : '<p>这是div2{{text}}</p>',
controller : 'div2Controller'
})
.when('/div3',{
template : '<p>这是div3{{text}}</p>',
controller : 'div3Controller'
})
.when('/content/:id/:cateid',{
template : '<p>这是content{{id}}</p>',
controller : 'div4Controller'
})
.otherwise({
redirectTo : '/div1'
});
}]);
app.controller('div1Controller',function($scope){
$scope.text='phonegap中文网 外部页面';
});
app.controller('div2Controller',function($scope){
$scope.text='div2Controller';
});
app.controller('div3Controller',function($scope){
$scope.text='div3Controller';
});
app.controller('div4Controller',['$scope','$routeParams',function($scope,$routeParams){
console.log($routeParams);
$scope.id=$routeParams.num;
$scope.text='div4Controller';
}]);
app.controller('firstController',function($scope,$location){
$scope.$location= $location;
$scope.text='phonegap中文网';
});
</script> </body>
</html>
angularjs1-路由的更多相关文章
- AngularJS1.6版本中ui-router路由中/#!/的解决方法 - zhuan
本地编译出的文件可以正常运行,但是服务器编译后到了测试那里路由上就莫名的出现了/#!/,这导致了很多问题. 后来查了下是服务器编译器把AngularJS升级到了1.6版本,而我本地的依旧是1.5. 但 ...
- AngularJs1.X学习--路由
[三种使用说明:] $stateProvider.state('station.printQRCode', { //params: { 'parentOfficeId': null }, //一次性参 ...
- AngularJS-chapter2-7-前端路由
Form表单提交会导致页面之间的切换,没法实现单页应用 Ajax请求不会留下History记录(在后台管理系统,没有后台历史记录还可以) ,但在网络型应用或门户型应用(用户没有办法给改页面加标签或分享 ...
- javascript基础修炼(6)——前端路由的基本原理
[造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章.为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习官方 ...
- AngularJS1.X版本基础
AngularJS 知识点: DataBinding Providers Validators Directives Controllers Modules Expressions Factori ...
- Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- nodejs进阶(3)—路由处理
1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...
- .NetCore MVC中的路由（2）在路由中使用约束
p { margin-bottom: 0.25cm; direction: ltr; color: #000000; line-height: 120%; orphans: 2; widows: 2 ...
- .NetCore MVC中的路由（1）路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
随机推荐
- firewalld使用
1.firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status f ...
- BPM使用ligerUI实现主从表显示
先看一下效果图: 界面有待美化,嘿嘿,下面说一下实现过程,当然,我的代码可能不对,就比如后台给前端返回JSON对象,应该包括状态和消息和数据,我这里直接给返回了JSON对象,所以,如果有大神,您知道怎 ...
- Core篇——初探IdentityServer4(OpenID Connect模式)
Core篇——初探IdentityServer4(OpenID Connect客户端验证) 目录 1.Oauth2协议授权码模式介绍2.IdentityServer4的OpenID Connect客户 ...
- Css float 盒子模型 position
属性: float 浮动 浮动的内容用div包起来,给div设置宽高 clear 清除浮动. box-sizing 标准模式下的盒模型 content-box:(默认属性) padding和borde ...
- HTML5 audio 如何实现播放多个MP3音频
<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...
- 解决java float double 浮点型参与计算失精度
本人前段时间做一个社区电商应用,发现了一个 天坑 ...................让我哭会 . 下面听听我的踩坑之路吧 ,电商肯定跟￥打交道了,计算少不了的.由于本人太菜 单纯的以为 fl ...
- mysql数据库索引原理及其常用引擎对比
索引原理 树数据结构及其算法简介 B+/-树: - 多路搜索树; - 时间复杂度O(logdN);h为节点出度,d为深度 红黑树: - 节点带有颜色的平衡二叉树 - 时间复杂度O(log2N);h节点 ...
- sublime text 3 上安装xdebug
安装完成之后启动xdebug,缺省设置下会显示warning等信息,很不方便. 可以参考 https://github.com/martomo/SublimeTextXdebug/blob/maste ...
- Java将数据以Excel文件形式导出后台代码实现
下面代码实现所需jar包: tomcat-embed-core-8.5.11.jar: commons-lang3-3.0.1.jar: commons-io-2.5.jar: poi-3.9.jar ...
- js常用正则表达式大全--如：数字，字符等
一.校验数字的表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和非零开头的数字:^(0|[1-9 ...