angularjs 路由模块
1.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body ng-app="app"> <!-- ng-view 用来显示route的内容--> <div ng-view></div> <script src="js/angular.js"></script> <script> var app=angular.module('app',['ngRoute']); //路由配置,$routeProvider提供了两种方法处理路由:when和otherwise app.config(['$routeProvider',function($routeProvider){ // 方法when接收两个参数,第一个设置$location.path(). 第二个参数是配置对象 $routeProvider .when('/rest/1',{ //定义控制器 controller:'rest1', //template模板 template:'<div>模板rest1</div>', //templateUrl,一般加载html的路径 //templateUrl:'rest1.html' }) .when('rest/11',{ controller:'rest11', template:'<div>模板rest11</div>', //加载 type="text/ng-template"方式的模板,用的很少 //templateUrl:'r_temp' }) .when('rest/12',{ controller:'rest12', template:'<div>模板rest12</div>' }) //设置默认的访问路径 .otherwise({ redirectTo:'/rest/1' }) }]); app.controller('rest1',['$scope',function($scope){ $scope.name='控制器1'; }]); app.controller('rest11',['$scope',function($scope){ $scope.name='控制器11'; }]); app.controller('rest12',['$scope',function($scope){ $scope.name='控制器12'; }]); </script> <!--定义route模板的第二种方式--> <script id='r_temp' type="text/ng-template"> <div>模板rest11</div> </script> </body> </html>
2. 对于这种 http://hl.kawa.com/#/rest/1/1001 ,/rest/1/1001 ( /rest/1/为路由地址,1001为入参 )
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body ng-app="app"> <!-- ng-view 用来显示route的内容--> <div ng-view></div> <script src="js/angular.js"></script> <script> var app=angular.module('app',['ngRoute']); app.config(['$routeProvider',function($routeProvider){ $routeProvider //入参 ":" 表示占位符 "?"表示该参数可省略 .when('/rest/1/:param?',{ controller:'rest', templateUrl:'r_temp' }) }]); //$routeParams 对应route的入参 app.controller('rest',['$scope','$routeParams',function($scope,$routeParams){ $scope.name='控制器'; //获取入参 也可以写成$routeParams['param'] $routeParams.param }]); </script> <!--定义route模板的第二种方式--> <script id='r_temp' type="text/ng-template"> <div>模板rest</div> </script> </body> </html>
angularjs 路由模块的更多相关文章
- AnguarJS——第10章 路由
第10章 路由 一个应用是由若个视图组合而成的,根据不同的业务逻辑展示给用户不同的视图,路由则是实现这一功能的关键. 10.1 SPA SPA(Single Page Application)指的是通 ...
- 为什么推荐用ui-router替代ngRoute
初学angularjs,第一个实例是官网的phoneCat,里面路由用的是ngRoute,后来看到别的用ui-router,觉得好奇,ui-route是什么呢?百度一些,得到如下解释: ui-rout ...
- 7_nodejs angularjs
webstrom使用: ctrl+b/点击,代码导航,自动跳转到定义 ctrl+n跳转指定类 ctrl+d复制当前行ctrl+enter另起一行ctrl+y删除当前行 ctrl+alt/shift+b ...
- AngularJS之高级Route【三】(八)
前言 我们知道默认的路由提供(Route Provider)在复杂的应用程序中是不太适合应用场景,它存在诸多限制,所以在Angular 1.2之后此时我们不得不将路由提供作为一个单独的模块当我们需要使 ...
- angularJs基础
AngularJs是为了克服Html在构建应用上的不足而设计的.Html是一门很好的为静态文件展示设计的声明式语言,但是要构建web应用的话就显得乏力了.所以我做了一些工作来让浏览器做我瞎向要的事. ...
- AngularJS实现单页应用的原理——路由(Route)
AngularJS实现单页应用的原理——路由(Route) 路由:告诉你一个通往某个特定页面的途径 http://127.0.0.1/index.html#/start http://127.0.0. ...
- ionic之AngularJS扩展 移动开发(视图导航一)
目录: 内联模板 : script 路由机制 : 状态机 导航视图 : ion-nav-view 模板视图 : ion-view 导航栏 : ion-nav-bar 回退按钮 : ion-nav-ba ...
- AngularJS PhoneCat代码分析
转载自:http://www.tuicool.com/articles/ym6Jfen AngularJS 官方网站提供了一个用于学习的示例项目:PhoneCat.这是一个Web应用,用户可以浏览一些 ...
- AngularJs学习笔记7——四大特性之模块化设计
模块化设计 1.引用自定义模块并调用 自定义模块中,如果有一些服务.封装好笑模块,在另外一个模块中(声明的时候,在依赖列表中加入要引入的模块) var app02 = angular.module(' ...
随机推荐
- Spring——<aop:scoped-proxy/>理解
首先看一下Spring文档上的两个例子对比: <bean id="userPreferences" class="com.foo.UserPreferences&q ...
- Python Number(数字)
---Number类型的细节,其包含的基本数字类型 ---Number基本数字类型之间的数值转换 ---Number上面的数学函数,有些可以直接调用,有些需要导入库 参见http://www.runo ...
- autoLayer:一基本布局
我不会写博客,写的不好请物见怪,这个autoLayer我就直接上图了: 本人环境:IDE(Xcode6)SDK(IOS8) 准备工作:找一个横图psd(由于我不会切图,我只会简单的描述一下图片处理), ...
- 让我的分页类获取sessionFactory
我们知道在Hibernate里比较重要的sessionFactory,经过Spring的管理可以很好地为Spring里注入使用的bean服务(提供数据源的使用),但是,当我们所要使用的类不是像我们尝试 ...
- mac下重启apach
打开终端 重启apache:sudo /usr/sbin/apachectl restart 关闭apache:sudo /usr/sbin/apachectl stop 开启apache:sudo ...
- HTTP协议(四)
第一步:新建一个header.php页 <?php header('Location:http://www.baidu.com');//默认是302重定向 ?> 第二步:分析 如何制定重定 ...
- js中的this关键字,setTimeout(),setInterval()的执行过程
var test1 = { name: 'windseek1', showname: function () { console.log(this.name); } } var test2 = { n ...
- 所谓“脚本(Script)”——个人见解浅谈
编程初学者,在学习的时候总会听人说到或者看到“脚本”这个词汇,我初学的时候也不清楚脚本是什么,所以每每看到有人说你会写“脚本”的时候,总以为是一些高深深奥的编程技术.然而事实正好相反,脚本语言是一种比 ...
- [转]SecureCRT右键粘贴的设置
1.习惯用putty的朋友,一般都习惯鼠标右键自动粘贴的功能,对于SecureCRT6.0.2 ,这个功能也已经是默认配置了. 老版本的SecureCRT其实也有这个功能,只是不是默认设置,很多人不知 ...
- (iOS)sqlcipher和FMDB的使用总结(原创)
写这篇文章的原因是之前接触到了关于sqlite数据库加密的问题,一般数据库加密,无非是数据加密和数据库文件加密,当然数据库文件加密对手机效率可能更高一些. 下面就讲一下,自己对sqlcipher和fm ...