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. 一.JSP开发的工具下载与环境搭建

    JSP技术的强势: (1)一次编写,到处运行.在这一点上Java比PHP更出色,除了系统之外,代码不用做任何更改. (2)系统的多平台支持.基本上可以在所有平台上的任意环境中开发,在任意环境中进行系统 ...

  2. Page 16 Exercises 1.2.3 -------Introduction to Software Testing (Paul Ammann and Jeff Offutt)

    Below are four faulty programs. Each includes a test case that results in failure. Answer the follow ...

  3. 使用curl操作openstack swift

    openstack官网有专门的开发者文档介绍如何使用curl操作swift(http://docs.openstack.org/api/openstack-object-storage/1.0/con ...

  4. visual assistent 过期

    VA功能超级好使,下载的一般都有时间限制,但又不想买正版. 我的是32位系统 vs2008: 将VA_X.dll文件拷到 (x86)C:\Program Files\Visual Assist X\ ...

  5. Python 学习笔记(五)杂项

    1. Assert assert len(unique_characters) <= 10, 'Too many letters' #…等价于: if len(unique_characters ...

  6. 刚刚大学毕业,自己搭网站遇到的问题 一:tomcat中同时部署两个项目的问题

    最近直接把两个项目打成war包在tomcat下发布,出现了很多莫名奇妙的问题,就是不能发布成功,只能有一个项目能成功,在网上查了很多方法,以为是两个项目中jar包出现冲突,也按照网上的方法把两个项目中 ...

  7. xshell 上传 下载文件

    借助XShell,使用linux命令sz可以很方便的将服务器上的文件下载到本地,使用rz命令则是把本地文件上传到服务器. sz用法: 下载一个文件 sz filename 下载多个文件 sz file ...

  8. QQ群聊天记录文件分割

    嗯,如题 是个蛋疼物 目前QQ的聊天记录导出功能很让人郁闷 三种聊天记录格式的导出 1  TXT   没图 2  BAK  只能再导入QQ使用 3  MHT 有图有字,缺点是一旦聊天记录很多,文件体积 ...

  9. PHP获取本周开始时间

    /*先设置时区*/date_default_timezone_set('PRC');/*网上的写法:总觉得这周跨年或者跨月的时候会悲剧 未验证*/echo mktime(0,0,0,date('m') ...

  10. xcode XCTest录制后测试出错临时解决方法

    Xcode 使用 XCTest 做自动化测试,录制后在run UITest 的时候总是莫名报错,后来在方法执行前添加sleep()后,没有再出现错误,可能是xcode的一处BUG.