给AngularJS官网入门教程的angular-phonecat-snapshots实例增加浏览历史的功能。
效果如下:
具体实现:
1.修改phone-list.html,增加view
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
浏览历史:
<ul>
<li ng-repeat="phone in historys">
<a href="#/phones/{{phone.id}}" ng-click="eventHandler.addToHistorys(phone)">{{phone.name}}</a>
</li>
</ul>
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb" ng-click="eventHandler.addToHistorys(phone)"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}" ng-click="eventHandler.addToHistorys(phone)">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
2.修改controllers.js,给PhoneListCtrl增加实现逻辑
function PhoneListCtrl($scope, Phone) {
$scope.phones = Phone.query();
$scope.orderProp = 'age';
if ($scope.$parent.history instanceof Array) {
$scope.historys = $scope.$parent.history;
} else {
$scope.historys = [];
}
$scope.eventHandler = {
addToHistorys : function(phone) {
var list = $scope.historys;
for ( var i = 0; i < list.length; i++) {
if (list[i].id === phone.id) {
list.splice(i, 1);
}
}
$scope.historys.unshift(phone);
}
};
$scope.$parent.history = $scope.historys;
}
PhoneListCtrl.$inject = [ '$scope', 'Phone'];
说明:点击手机名称的链接进入详细页面时,Controller定义的数据会丢失,于是,
在其$parent的scope里定义一个histsory model,用于跳出当前页面(即当前Controller)时,保存浏览历史信息。
这个方法老觉得不好,原因是数据都要在放在上级,如果这样的controller多了或者信息量大了, 如此$parent的负担会超大。于是想到angularjs的DI(注入),利用factory把浏览历史数据注入给PhoneListCtrl可以很好地解决这个问题。
修改如下:
1.修改controllers.js,修改PhoneListCtrl的实现逻辑
function PhoneListCtrl($scope, Phone, browserHistory) {
$scope.phones = Phone.query();
$scope.orderProp = 'age';
$scope.historys = browserHistory.historys;
$scope.eventHandler = {
addToHistorys : function(phone) {
var list = $scope.historys;
for ( var i = 0; i < list.length; i++) {
if (list[i].id === phone.id) {
list.splice(i, 1);
}
}
$scope.historys.unshift(phone);
}
};
browserHistory.historys = $scope.historys;
}
PhoneListCtrl.$inject = ['$scope', 'Phone', 'browserHistory'];
2.修改services.js,增加browserHistory服务
'use strict';
/* Services */
angular.module('phonecatServices', ['ngResource']).
factory('Phone', function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
}).factory("browserHistory", function() {
return {
historys: []
}
});
- 大小: 70.5 KB
分享到:
相关推荐
本教程将围绕"angular-phonecat-master"这个项目,深入讲解AngularJS的基础知识和实践应用。 在"angular-phonecat-master"项目中,我们将学习如何使用AngularJS创建一个简单的电话目录应用。此应用展示了如何利用...
"angular-phonecat" 是一个基于 AngularJS 框架的经典教程项目,旨在引导开发者逐步学习和理解 AngularJS 的核心概念和功能。在这个“master”分支中,我们可以预见到这是一个已经更新到最新稳定版本的示例应用,...
"angular-phonecat-snapshots" 是一个与Angular.js框架相关的项目,它可能是一个教程或示例应用的快照集合。Angular.js是Google维护的一个前端JavaScript框架,用于构建单页应用程序(SPA)。这个项目的名称暗示了它...
学习Angular-phonecat种子项目是Bower无法连接,手动下载的所有bower资源,使用解压到app下,保持bower_components文件目录,npm start如卡死在bower install步骤,删除项目根目录下package.json文件第20行--'...
在angular-phonecat教程中,这体现在用户界面和应用程序数据间的实时互动上,例如搜索手机时的实时过滤功能。 2. **指令**:AngularJS提供了一种扩展HTML的能力,通过自定义指令可以添加新的DOM操作。在angular-...
angular-phonecat.z01和angular-phonecat.zip合并
系统要求(已测试) ... 3.upzip 到 C:\Users[Username]\angular-phonecat 4.open Node.js 命令 5.type cd angular-phonecat 6.type npm start 7.打开浏览器,输入 localhost:8000/app/ 注意: 第一次在nodejs
5. **快速原型设计**:由于使用了AngularJS和Bootstrap,mobile-angular-ui可以快速构建出功能完备的移动应用原型,便于产品迭代和验证设计思路。 6. **响应式布局**:借助Bootstrap的响应式网格系统,开发者可以...
这是一个历史参考: 。 每个标记的提交都是一个单独的课程,教授 angular 的一个方面。 完整的教程可以在找到。先决条件吉特了解如何设置 git 的好地方是。 Git(下载、文档)。Node.js 和工具获取 。 安装工具依赖...
Angular-教程应用程序,基于 Angular-PhoneCat。 来自 angularjs.org 网页的教程。 在开始使用教程之前应该采取的步骤列表: 操作系统:Windows 7 x64 NodeJS:0.12.0 npm:2.5.1 angularjs: 1.3.14 安装: 最新版本...
rupert-example-angular-phonecat 如何使用 RupertJS 构建 Angular Phonecat 项目的示例。
Angular-angular-ngrx-nx-realworld-example-app.zip,示例性真实世界应用程序,由angular 8、ngrx 8、nrwl/nx 8angular、ngrx/平台、nrwl/nx代码库构建,包含遵循真实世界规范和api的真实世界示例(crud、auth、高级...
Angular-angular-electron-dream-starter.zip,Angular Electron初学者工具包,包括Webpack、Angular 4(路由器、HTTP、表单、服务、NGRX、测试、E2E、覆盖范围)、Karma、Spectron、Jasmine、伊斯坦布尔,以及带有...
"angular-seed-master-master.zip" 是一个包含Angular和Bootstrap集成项目的压缩包,它是一个基于Angular的种子项目,用于快速启动新的Angular开发。Angular是Google维护的一个强大的前端JavaScript框架,而...
这是一个历史参考: 。 每个标记的提交都是一个单独的课程,教授 angular 的一个方面。 完整的教程可以在找到。 先决条件 吉特 了解如何设置 git 的好地方是。 Git(下载、文档)。 Node.js 和工具 获取 。 ...
重新框架中的Angular-phonecat教程 资料来源 参考Angular Phonecat教程[here]( )的vvvvvalvalvalval的出色Reagent端口,完成了许多工作。 此外,迈克·汤普森出色的上重制帧进行了广泛的磋商。 最后,我将实际教程...