zoukankan      html  css  js  c++  java
  • [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)">&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

  • 相关阅读:
    OC ----关于时间的处理
    OC-- 判断字符串是否是纯数字
    OC 判断字符串是否只存在只有空格
    将Json字符串转换为数组
    调用接口时对参数的排序、生成签名、生成随机数,获取唯一标示符
    关于UIAlertView弹出警告框自动消失
    AVAudioPlayer 获取语音的长度(时间)
    AFN 请求 https get
    TableView  — reloadData     刷新
    mapView 地图视图
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4074828.html
Copyright © 2011-2022 走看看