ngRoute插件
angular中可以使用插件,例如ngRoute插件就是用与路由控制。
首先要在模块中引入即可:
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',{
template : '<p>课程的内容</p>{{name}}',
controller : 'Ccc'
})
.otherwise({
redirectTo : '/aaa'
}); }]);
如上,通过when方法来制定不同的hash值对应不同的视图,hash只后面还可以带上参数num,
如何改变hash值?
1.可以通过a链接的href属性
2.通过$location.path()方法来改变
m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){ $scope.name = 'hello';
$scope.$location = $location; console.log( $routeParams ); }]);
还可以在run方法中监听路由事件。
m1.run(['$rootScope',function($rootScope){ $rootScope.$on('$routeChangeStart',function(event,current,pre){
console.log(event);
console.log(current);
console.log(pre);
}); }]);
ngRoute插件的更多相关文章
- angularjs之插件ngRoute和ngAnimate
使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html l ...
- angularjs 路由 ngRoute tab切换
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- 转AngularJS路由插件
AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析 标签: angular源码angularjs 2016-05-04 13:14 916人阅读 评论(0) ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告
最近在做基于jenkins ant junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件
昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...
- 使用Visual Studio SDK制作GLSL词法着色插件
使用Visual Studio SDK制作GLSL词法着色插件 我们在Visual Studio上开发OpenGL ES项目时,避免不了写Shader.这时在vs里直接编辑shader就会显得很方便. ...
- 工欲善其事,必先利其器 之 VS2013全攻略(安装,技巧,快捷键,插件)!
如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...
随机推荐
- ES6学习笔记(2)
变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,被称为解构(Destructuring); 数组的解构赋值 let [a, b, c] = [1, 2, 3]; cons ...
- UI颜色值
UI颜色值 http://xh.5156edu.com/page/z1015m9220j18754.html
- CountDownLatch如何使用
正如每个Java文档所描述的那样,CountDownLatch是一个同步工具类,它允许一个或多个线程一直等待,直到其他线程的操作执行完后再执行.在Java并发中,countdownlatch的概念是一 ...
- VUE 入门基础(8)
十,组件 使用组件 注册 可以通过以下这种方式创建一个Vue实例 new Vue({ el: '#some-element', }) 注册一个全局组件,你可以使用Vue.component(tagNa ...
- jQuery iframe之间相互调用
,子iframe内调用父类函数方法: window.parent.func(); ,子Iframe中获取父界面的元素: $("#xx", window.parent.documen ...
- [转]在WPF中区别TextBlock和Label
TextBlock和Label都是用来显示少量数据的.好多文章对Label存在的描述都是它允许使用"快速获取"."快速获取"就是允许你用Alt加上其它的按键快速 ...
- [小哥Allegro72讲速成视频]
http://v.qq.com/vplus/df932a993679cf80a0b6c87bb849e22c 第01讲 Allegro常用组件介绍 视频链接:http://v.qq.com/boke/ ...
- linux 学习 软件工具
_____secureCRT 远程通信工具 第二行第二个快速连接,输入主机名,即ip地址,和用户名,root .其它默认:端口22,协议ssh2,防火墙 none. 保存会话,连接.需要输入用户密码. ...
- S5PV210的电阻触摸屏&ADC控制器
一.ADC与触摸屏控制器结构框图 1.S5PV210一共支持10路模拟输入,分别为AIN0-AIN9.其中AIN0和AIN1是只做模拟输入的,AIN2-AIN9分别可以支持2个电阻式触摸屏,所以这个就 ...
- 运行Java cmd程序 找不到或无法加载主类怎么解决
//这个问题原因有以下几种,但是和环境变量并没有太大的关系 //能够执行java 和 javac 就证明你的环境变量已经配置好了,其实 classpath 可以不配置 //假如有如下文件:H:\cod ...