[Angular-Scaled Web] 7. Refactor code into Models-优快云博客

本文介绍了一个使用AngularJS开发的应用如何通过分离模型数据并利用服务创建模型来优化其代码结构，提高了可维护性和扩展性。

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>