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>

[Angular-Scaled Web] 7. Refactor code into Models的更多相关文章

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

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

  2. VS Code 1.40 发布!可自行搭建 Web 版 VS Code!

    今天(北京时间 2019 年 11 月 8 日),微软发布了 Visual Studio Code 1.40 版本.让我们来看看有哪些主要的更新. 自建 Web 版 VS Code 前不久,微软正式发 ...

  3. 重磅!微软发布 Visual Studio Online:Web 版 VS Code + 云开发环境

    北京时间 2019 年 11 月 4 日,在 Microsoft Ignite 2019 大会上,微软正式发布了 Visual Studio Online (VS Online)公开预览版! 如今发布 ...

  4. Visual Studio Online 的 FAQ:iPad 支持、自托管环境、Web 版 VS Code、Azure 账号等

    北京时间 2019 年 11 月 4 日,在 Microsoft Ignite 2019 大会上,微软正式发布了 Visual Studio Online 公开预览版!发布之后,开发者们都为之振奋.同 ...

  5. Visual Studio Online & Web 版 VS Code

    Visual Studio Online & Web 版 VS Code https://online.visualstudio.com https://devblogs.microsoft. ...

  6. [Angular 2] 8. Better ES5 Code

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. vue,react,angular三大web前端流行框架简单对比

    常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http: ...

  8. Click Models for Web Search(1) - Basic Click Models

    这篇文章主要是介绍一些基本的click model,这些不同的click model对用户与搜索结果页的交互行为进行不同的假设. 为了定义一个model,我们需要描述出observed variabl ...

  9. web socket server code, 调用 shell exec child_process

    var child_process = require('child_process'); var ws = require("nodejs-websocket"); consol ...

随机推荐

  1. html --- canvas --- javascript --- 拖拽圆圈

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  2. C# 类和结构

    类和结构实际上都是创建对象的模板,每个对象都包含数据,并提供了处理和访问数据的方法 . 类定义了类的每个对象(称为实例)可以包含什么数据和功能. 例如,如 果一个类表示一个顾客,就可以定义字段 Cus ...

  3. bzoj1013

    这道题题解太多,只贴代码. #include<cstdio> #include<cmath> #include<algorithm> using namespace ...

  4. Windows Live Writer安装与使用

    无耻的转贴一份WLW的安转与使用指南 =========================转贴分隔线===========================   [Windows Live Writer安 ...

  5. 高效使用STL

    高效使用STL  参考:http://blog.jobbole.com/99115/ 仅仅是个选择的问题,都是STL,可能写出来的效率相差几倍:熟悉以下条款,高效的使用STL: 当对象很大时,建立指针 ...

  6. Rxjava, RxAndroid, Retrofit 等库的使用

    RxJava的基本用法: 关于 unSubscribe() 的调用问题: There is no need to unsubscribe in onCompleted. Take a look at  ...

  7. Codeforces 711 D. Directed Roads (DFS判环)

    题目链接:http://codeforces.com/problemset/problem/711/D 给你一个n个节点n条边的有向图,可以把一条边反向,现在问有多少种方式可以使这个图没有环. 每个连 ...

  8. HDU 4496 D-City (并查集)

    题意:给定一个图,问你每次删除一条边后有几个连通块. 析:水题,就是并查集的运用,倒着推. 代码如下: #include <cstdio> #include <string> ...

  9. 行为类模式(一):职责链(Chain Of Responsibility)

    定义 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系. 将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. UML 优点 将请求的发送者和接收者解耦 可以 ...

  10. Javascript 正则表达式校验数字

    $("input[datatype=number]").blur(function () {                      var str = $(this).val( ...