AngularJS(3)PhoneCat Demo Advance
Go on with the PhoneCat demo https://github.com/angular/angular-phonecat
9. Custom Filter
…snip…
10. Event Handlers
Controller
Define a property in $scope to hold the image URL.
function($scope, $routeParams, $http) {
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
$scope.phone = data;
$scope.mainImageUrl = data.images[0]; //set the page load default image first one
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}]);
Provide a function in $scope to change the value of image URL.
Template
The most magic part is directly calling the $scope function in ng-click
<img ng-src="{{img}}" ng-click="setImage(img)">
Test
element('.phone-thumbs li:nth-child(3) img').click();
expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.2.jpg’);
Click on the sub element of li and verify the IMG src value.
11. REST and Custom Services
Template
Import the REST client
<script src="js/controllers.js"></script>
And put all my model codes in services.js
<script src="js/services.js"></script>
Service
Here is how we build the service layer, we use factory to create a service instance.
var phonecatServices = angular.module('phonecatServices', ['ngResource']);
phonecatServices.factory('Phone', ['$resource',
function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
}]);
Controller
Leave the lower layer $http, deal with the service object Phone, fetch all the data from there.
$resource is higher than $http, and we use $resource to build the REST client, we create service layer here.
12. Applying Animations
It is powerful and great, but I will not use it right now.
More examples are here
http://code.angularjs.org/1.2.8/docs/cookbook/index
Guide book is here
http://code.angularjs.org/1.2.8/docs/guide/index
References:
http://code.angularjs.org/1.2.8/docs/tutorial/step_09
http://code.angularjs.org/1.2.8/docs/tutorial/step_11
http://code.angularjs.org/1.2.8/docs/guide/index
http://code.angularjs.org/1.2.8/docs/cookbook/index
- 浏览: 2491284 次
- 性别:
- 来自: 成都
最新评论
-
nation:
你好,在部署Mesos+Spark的运行环境时,出现一个现象, ...
Spark(4)Deal with Mesos -
sillycat:
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat:
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat:
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat:
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
相关推荐
本demo是有requirejs封装的angularjs,原始angularjs的demo是来自于angular-ui-router上的官方实例
angularJS router filter service diractive
angularJs2官网demo,使用方法:需要在本地安装npm,(https://nodejs.org/en/下载最新版本的nodeJs,保证node的版本高于等于v5.x.x,npm版本高于等于3.x.x),使用node -V或者npm -V检查版本。 下载文档之解压到某个目录...
angularJS route路由demo
项目笔记地址:https://blog.csdn.net/lewky_liu/article/details/83280754
angularjsdemo
AngularJS是前端开发流行框架,本Demo展示了表单验证的意义,及实现方法,掌握Angular基础指令,通过不同的指令元素可以拥有不同功能,并通过指令与表单合作验证,从而实现表单验证的敏捷化开发。
angularjs的demo
AngularJS + Bootstrap Demo项目,获取豆瓣电影数据
springmvc+angularjs springmvc 整合angularjs json demo
自己在学习spring mvc和Angularjs时写的一个小例子,有兴趣的同学可以参考参考
网上搜集的三个angularjs的demo
本解决方案下的ui.router项目是针对angularjs ui.router嵌套路由做的一个demo,程序代码采用VS2013开发,代码齐全,可直接运行。有需要的带走吧~v~v~
angularjs分页实例
AngularJS+springmvc的一个入门demo,没有和数据库关联,直接下载导入使用即可2
适合初学angularjs的一个demo,不大不小,刚刚学习的同学可以下载看看
SpringMVC整合AngularJS简单Demo.zip SpringMVC整合AngularJS简单Demo.zip
angularjs的各种demo,http://blog.csdn.net/u011563903/article/details/48377299有详细解释
AngularJS 路由route 0217Demo
angularjs文件上传