zoukankan      html  css  js  c++  java
  • [Angular-Scaled Web] 7. Refactor code into Models

    In the previous code, both categories and bookmarks are binded to $rootscope, or let says the same scope.

    eggly-app.js:

    angular.module('Eggly', [
        'ui.router',
        'categories',
        'categories.bookmarks'
    ])
        .config(function($stateProvider, $urlRouterProvider){
            $stateProvider
                .state('eggly', {
                    url:'',
                    abstract: true
                    //abstract: To prepend a url to all child state urls.
                });
    
            $urlRouterProvider.otherwise('/');
        })
    
        .controller('MainController', function ($scope , $state) {
            $scope.categories = [
                {"id": 0, "name": "Development"},
                {"id": 1, "name": "Design"},
                {"id": 2, "name": "Exercise"},
                {"id": 3, "name": "Humor"}
            ];
    
            $scope.bookmarks = [
                {"id": 0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
                {"id": 1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
                {"id": 2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
                {"id": 3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
                {"id": 4, "title": "MobilityW OD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
                {"id": 5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
                {"id": 6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
                {"id": 7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
                {"id": 8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
            ];
    
            $scope.isCreating = false;
            $scope.isEditing = false;
            $scope.currentCategory = null;
            $scope.editedBookmark = null;
    
        ...
    ...
    ... })

    It is not good to put those json array into the main script file. We have the file structure, which all the models are consided as common part.

    It likes MVC's model. 

    1. So cut the data part into a spreate json file.

    data/categories.json
    data/bookmarks.json

    bookmarks.json:

    [
        {"id":0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
        {"id":1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
        {"id":2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
        {"id":3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
        {"id":4, "title": "MobilityWOD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
        {"id":5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
        {"id":6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
        {"id":7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
        {"id":8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
    ]

    categories.json:

    [
        {"id": 0, "name": "Development"},
        {"id": 1, "name": "Design"},
        {"id": 2, "name": "Exercise"},
        {"id": 3, "name": "Humor"}
    ]

    2. Using Serivces to create model:

    Bookmarks-model.js:

    angular.module('eggly.models.categories', [
    
    ])
        .service('CategoriesModel', function () {
            var model = this,
                categories = [
                    {"id": 0, "name": "Development"},
                    {"id": 1, "name": "Design"},
                    {"id": 2, "name": "Exercise"},
                    {"id": 3, "name": "Humor"}
                ];
    
            model.getCategories = function() {
                return categories;
            }
        })
    ;

    categories-model.js:

    angular.module('eggly.models.categories', [
    
    ])
        .service('CategoriesModel', function () {
            var model = this,
                categories = [
                    {"id": 0, "name": "Development"},
                    {"id": 1, "name": "Design"},
                    {"id": 2, "name": "Exercise"},
                    {"id": 3, "name": "Humor"}
                ];
    
            model.getCategories = function() {
                return categories;
            }
        })
    ;

    categories.tmpl.html:

    <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 categoriesListCtrl.categories" ng-class="{'active':isCurrentCategory(category)}">
            <a ui-sref="eggly.categories.bookmarks({category:category.name})">
                {{category.name}}
            </a>
        </li>
    </ul>

    bookmarks.tmpl.html:

    <h1>{{bookmarksListCtrl.currentCategoryName}}</h1>
    <div ng-class="{active: isSelectedBookmark(bookmark.id)}"  ng-repeat="bookmark in bookmarksListCtrl.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>
  • 相关阅读:
    Java finally语句到底是在return之前还是之后执行?
    图文介绍openLDAP在windows上的安装配置
    ES之十:ElasticSearch监控工具 cerebro
    ES之八:ES数据库重建索引——Reindex(数据迁移)
    ES index的数据量大于1万的特殊处理场景
    Java中的Hashtable实现方法
    form表单回车提交问题(转)
    ES之九:ES Java客户端Elasticsearch Java client(ES Client 简介、Java REST Client、Java Client、Spring Data Elasticsearch)
    NetBeans 7.0 安装Python插件的方法
    python学习笔记
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4158148.html
Copyright © 2011-2022 走看看