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)">&times;</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的更多相关文章

  1. angular : $location & $state(UI router)的关系

    次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...

  2. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  3. angular 的ui.router 定义不同的state 对应相同的url

    Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...

  4. 混合开发 Hybird Ionic Angular Cordova web 跨平台 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  5. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  6. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

  7. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  8. ngRoute 与ui.router区别

    angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...

  9. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

  10. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

随机推荐

  1. java 简单类

    package 面向对象编程_封装性; //1.类名称必须存在有意义,例如Book.Emp //2.类之中所有的属性必须用private封装,封装后的属性必须提供有setter和getter方法 // ...

  2. Linux下c++常用调试

    进程调试 自己写的代码,直接gdb r/bt就可以了. 正在运行的进程,先ps ax找到进程id.然后gdb进入之后attach 进程id.stop/continue暂停和继续进程. core了,有c ...

  3. 【Java】SpringBoot入门学习及基本使用

    SpringBoot入门及基本使用 SpringBoot的介绍我就不多说了,核心的就是"约定大于配置",接下来直接上干货吧! 本文的实例: github-LPCloud,欢迎sta ...

  4. 「ZJOI2009」多米诺骨牌

    「ZJOI2009」多米诺骨牌 题目描述 有一个n × m 的矩形表格,其中有一些位置有障碍.现在要在这个表格内 放一些1 × 2 或者2 × 1 的多米诺骨牌,使得任何两个多米诺骨牌没有重叠部分,任 ...

  5. Week Three

    2018.12.10 1.[BZOJ 4818][P 3702] 2.[AGC007 A] 3.[AGC007 B] 4.[AGC007 C] 5.[AGC007 D] 2018.12.11 1.[B ...

  6. bzoj 2440

    题意:有一个从小到大的由不包含平方约数的数组成的数列,从1开始,求第k项. “满足某种限制的数的第k个”+二分答案="前n个数有多少个数满足限制“ 求[1,n]中有多少个数没有平方约数,我们 ...

  7. LCA POJ 1330 Nearest Common Ancestors

    POJ 1330 Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24209 ...

  8. 使用sklearn进行交叉验证

    模型评估方法 假如我们有一个带标签的数据集D,我们如何选择最优的模型? 衡量模型好坏的标准是看这个模型在新的数据集上面表现的如何,也就是看它的泛化误差.因为实际的数据没有标签,所以泛化误差是不可能直接 ...

  9. OpenVPN Server端配置文件详细说明(转)

    本文将介绍如何配置OpenVPN服务器端的配置文件.在Windows系统中,该配置文件一般叫做server.ovpn:在Linux/BSD系统中,该配置文件一般叫做server.conf.虽然配置文件 ...

  10. IDA 显示函数名称技巧

    http://blog.csdn.net/safedebug/article/details/17061735v