[Angular-Scaled web] 4. Using ui-router's named views
In the previous post, we use $stateProvider deriect to root url and using MainCtrl, categories.tmpl.html.
.config(function($stateProvider){
$stateProvider
.state('eggly', {
url:'/',
controller: 'MainCtrl',
templateUrl: 'app/categories/categories.tmpl.html'
});
})
Because Categories.tmpl.html contains both categories and bookmarks, what we want is to divide categories and bookmarks into spreate views. This is benefit scaled web project.
1. Modify the categories.tmpl.html, contains only categories content
<a ng-click="setCurrentCategory(null)"><img class="logo" src="assets/img/eggly-logo.png"></a>
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories" ng-class="{'active':isCurrentCategory(category)}">
<a ng-click="setCurrentCategory(category)">
{{category.name}}
</a>
</li>
</ul>
2. Modify the bookmarks.tmpl.html, contains only bookmarks content
<div ng-class="{active: isSelectedBookmark(bookmark.id)}" ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}">
<button type="button" class="close" ng-click="deleteBookmark(bookmark)">×</button>
<button type="button" class="btn btn-link" ng-click="setEditedBookmark(bookmark);startEditing();" ><span class="glyphicon glyphicon-pencil"></span>
</button>
<a href="{{bookmark.url}}" target="_blank">{{bookmark.title}}</a>
</div>
<hr/>
<!-- CREATING -->
<div ng-if="shouldShowCreating()">
<button type="button" class="btn btn-link" ng-click="startCreating()">
<span class="glyphicon glyphicon-plus"></span>
Create Bookmark
</button>
<form class="create-form" ng-show="isCreating" role="form" ng-submit="createBookmark(newBookmark)" novalidate>
<div class="form-group">
<label for="newBookmarkTitle">Bookmark Title</label>
<input type="text" class="form-control" id="newBookmarkTitle" ng-model="newBookmark.title" placeholder="Enter title">
</div>
<div class="form-group">
<label for="newBookmarkURL">Bookmark URL</label>
<input type="text" class="form-control" id="newBookmarkURL" ng-model="newBookmark.url" placeholder="Enter URL">
</div>
<button type="submit" class="btn btn-info btn-lg">Create</button>
<button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelCreating()">Cancel</button>
</form>
</div>
<!-- EDITING -->
<div ng-show="shouldShowEditing()">
<h4>Editing {{editedBookmark.title}}</h4> <form class="edit-form" role="form" ng-submit="updateBookmark(editedBookmark)" novalidate>
<div class="form-group">
<label>Bookmark Title</label>
<input type="text" class="form-control" ng-model="editedBookmark.title" placeholder="Enter title">
</div>
<div class="form-group">
<label>Bookmark URL</label>
<input type="text" class="form-control" ng-model="editedBookmark.url" placeholder="Enter URL">
</div>
<button type="submit" class="btn btn-info btn-lg">Save</button>
<button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelEditing()">Cancel</button>
</form>
</div>
3. Paste the containers of categories and bookmarks to the index.html, add vi-view to categories and bookmarks.
<div class="container-fluid">
<!-- paste in -->
<div class="row">
<div class="col-sm-3 col-md-2 sidebar" ui-view="categories"> </div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ui-view="bookmarks"> </div>
</div>
<!-- end-->
</div>
4. Now need to modiy the js file to define child view.
abstract: true; which prepend a url to all child state urls: read more: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-state-usage-examples,
Using $urlRouterPorvider to setup rederiect ti root url. Notice here, 'eggly' is somehow partent state.
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('eggly', {
url:'',
abstract: true
//abstract: To prepend a url to all child state urls.
}); $urlRouterProvider.otherwise('/');
})
5. Go to categories.js, add config()
.config(function ($stateProvider) {
$stateProvider
.state('eggly.categories', {
url: '/',
//define the child view, here we spreate the bookmarks and categories
views: {
// as normal, each view can have a controller and templateUrl
'categories@': {
controller: 'CategoriesCtrl',
templateUrl: 'app/categories/categories.tmpl.html'
},
'bookmarks@': {
controller: 'BookmarksCtrl',
templateUrl: 'app/categories/bookmarks/bookmarks.tmpl.html'
}
}
});
})
6. Here, we still need to define
CategoriesCtrl and BookmarksCtrl
.controller('CategoriesCtrl', function ($scope) { }) .controller('BookmarksCtrl', function($scope){ })
Now we have spreate the categories and bookmarks views by using router named views. This is good scaled web project.
Read More:
https://egghead.io/lessons/angularjs-using-ui-router-s-named-views
https://github.com/eggheadio/egghead-angularjs-eggly-architecture/tree/04-named-views
https://github.com/angular-ui/ui-router
[Angular-Scaled web] 4. Using ui-router's named views的更多相关文章
- angular : $location & $state(UI router)的关系
次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
- 混合开发 Hybird Ionic Angular Cordova web 跨平台 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- ngRoute 与ui.router区别
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- ngRoute 和 ui.router 的使用方法和区别
在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
随机推荐
- jquery实用的一些方法
做个购物车功能,需要修改下前端页面 有些实用的方法总结一下 当你想实现最基本的加减法的时候,对于转换number实用Number(str)即可 首先明确下页面的每一行是动态的,这个时候绑定事件的时候不 ...
- Linux 下安装gmpy2
GMP(GNU Multiple Precision Arithmetic Library,即GNU高精度算术运算库),它是一个开源的高精度运算库,其中不但有普通的整数.实数.浮点数的高精度运算,还有 ...
- 【BZOJ 4665】 4665: 小w的喜糖 (DP+容斥)
4665: 小w的喜糖 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 94 Solved: 53 Description 废话不多说,反正小w要发喜 ...
- 【BZOJ 2298】 2298: [HAOI2011]problem a (DP)
2298: [HAOI2011]problem a Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1326 Solved: 637 Descript ...
- BZOJ1038 瞭望塔
学习了半平交面. 我这里写的是训练指南中的双端队列,每次判断是否删去更优然后更新. 看hzwer中有一处不太明白就是为何要将两段加入队列 后来对拍出错才知道是因为精度,当两线重合时他们叉积返回值是一个 ...
- [HEOI2013]SAO
题目大意: 一个有向无环图上有n个结点, 现在告诉你n-1个条件(x,y),表示x和y的先后关系. 问原图共有几种可能的拓扑序? 思路: 树形DP. f[i][j]表示对于第i个结点,有j个点在它前面 ...
- bzoj 1780
这是一道环上的问题,我们先将一个环展开,再复制一次. 这样,任何一个合法方案一定对应在转换后的序列的一些连续的区间,使得它们的并的长度大于等于圈长. 然后,我们将区间合并一下(就是将一些被其他区间包含 ...
- bzoj 1231: [Usaco2008 Nov]mixup2 混乱的奶牛 -- 状压DP
1231: [Usaco2008 Nov]mixup2 混乱的奶牛 Time Limit: 10 Sec Memory Limit: 162 MB Description 混乱的奶牛 [Don Pi ...
- 区间DP POJ 1141 Brackets Sequence
Brackets Sequence Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 29520 Accepted: 840 ...
- 2015 UESTC 数据结构专题G题 秋实大哥去打工 单调栈
秋实大哥去打工 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/59 Descr ...