AngularJs的前端路由
2015-08-09 14:01
691 查看
该博文的实际练习项目请见: ionicApp
其中的 assets/www/app.js 中定义了路由。
部分代码片段如下:
实际使用
可以看到通过URL可以传递参数,参数在controller 中捕捉(需要注入$stateParams)
路由可以看作一个总控制器,它会根据页面的不同状态来填充页面的内容,这就是路由的主要用处。前端路由能极大地减少对服务器资源的请求数量,因此在前端做路由显得尤为重要。
因此如果应用到HybridApp上,可以将部分页面资源放在本地, 服务器专门负责数据处理,减少服务器和带宽压力。
路由与多视图 - 多视图应用
AngularJs学习心得-路由 - ui-router
其中的 assets/www/app.js 中定义了路由。
部分代码片段如下:
//声明模块 angular.module('starter', ['ionic','ngCordova','starter.controllers', 'starter.services']) //在项目启动前的配置 .config(function($stateProvider, $urlRouterProvider) { $stateProvider //定义路由 .state('app', { url: "/app", abstract: true, templateUrl: "templates/menu.html", controller: 'AppCtrl' }) .state('app.search', { url: "/search", views: { 'menuContent': { templateUrl: "templates/search.html" } } }) .state('app.playlists', { url: "/playlists", views: { 'menuContent': { templateUrl: "templates/playlists.html", controller: 'PlaylistsCtrl' } } }) .state('app.single', { url: "/playlists/:playlistId", views: { 'menuContent': { templateUrl: "templates/playlist.html", controller: 'PlaylistCtrl' } } }) ; // 默认路由 $urlRouterProvider.otherwise('/app/playlists'); });
实际使用
<ion-list> <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}"> {{playlist.title}} </ion-item> </ion-list>
可以看到通过URL可以传递参数,参数在controller 中捕捉(需要注入$stateParams)
.controller('PlaylistCtrl', function($scope, $stateParams) { console.log($stateParams.apiId); })
路由可以看作一个总控制器,它会根据页面的不同状态来填充页面的内容,这就是路由的主要用处。前端路由能极大地减少对服务器资源的请求数量,因此在前端做路由显得尤为重要。
因此如果应用到HybridApp上,可以将部分页面资源放在本地, 服务器专门负责数据处理,减少服务器和带宽压力。
参考资料
AngularJS路由介绍 - 简单直白路由与多视图 - 多视图应用
AngularJs学习心得-路由 - ui-router
相关文章推荐
- Angularjs中service与controller注入
- angularjs初学笔记
- AngularJS服务和路由
- Angularjs
- [AngularJS] 使用AngularCSS动态加载CSS
- angularJS(1)
- (一个)AngularJS获取贴纸Hello World
- [Angularjs]单页应用之分页
- AngularJs学习笔记__4、自定义指令
- 使用Google Analytics跟踪捕获JavaScript,AngularJS,jQuery的在线错误和异常
- AngularJs学习笔记__3、AngularJs模板
- angular基础入门文档以及博客汇集
- angularjs
- [AngularJS] 使用AngularAMD动态加载Service
- angularjs三级联动
- angularJS 转换UTC时间及DateFormat问题
- 使用ASP.NET MVC和AngularJS的Web模块化管理
- AngularJS笔记20150807
- AngularJS 模板
- AngularJS应用的解析