我也谈 AngularJS 怎么使用Directive, Service, Controller
原文地址：http://sunqianxiang.github.io/angularjs-zen-yao-shi-yong-directiveservicecontroller.html
其转自大漠穷秋，这是对于初学者来说 讲的非常好的入门文
在有关于 Directive,Service,Controller 时候先看一下图
这是我画出来帮助理解的，并不代表angularjs走这种逻辑。 不过在本例的确是这样的。 ========= 首先你需要先去定义你的module.
var Mymodule = angular.module('My.Alex.module', []);
html标记也记得修改哦
<html ng-app="My.Alex.module">
在这里我们先定义Service服务，本例是一个简单的图片添加的模式，数据跟add方法都在Service。这样有助于解耦。
Mymodule.service( 'Book',[ '$rootScope',function($rootScope){
var service = {
books: [
{ title: "Magician", author: "Raymond E. Feist" },
{ title: "The Hobbit", author: "J.R.R Tolkien" }
],
addBook: function(book){
service.books.push(book);
$rootScope.$broadcast('books.update');
}
}
return service;
}]);
在这里可以看出我定义了一个Book服务， 然后我现在要在controller添加他，来使用Book里面的数据。
Mymodule.controller("books.list",['$scope','Book',function(scope,Book){
scope.$on('books.update',function(event){
scope.books = Book.books;
scope.$apply(); #必须加，不然数据不更新
});
scope.books = Book.books;
}]);
这里在controller里面定义服务更新的方法，其主要是更新scope. $broadcast 跟$on 对应使用
module.directive( "addBookButton", [ 'Book', function( Book ) {
return {
restrict: "A",
link: function( scope, element, attrs ) {
element.bind( "click", function() {
Book.addBook( { title: "Star Wars", author: "George Lucas" } );
});
}
}
}]);
然后我添加一个directive来让button可以添加书本。 这是一个bind的过程，剩下只要添加 到body里面就完成了
<body ng-controller="books.list">
<li ng-repeat="book in books">
<ul>{{book.title}}, {{book.author}}</ul>
</li>
<button add-book-button>Add book</button>
</body>
至此,可以得到一个上面所画的一个基本逻辑代码。 其主要部分也就这4块。其实service还可以传递给filter。
我也谈 AngularJS 怎么使用Directive, Service, Controller的更多相关文章
- AngularJS中使用Directive、Controller、Service
AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...
- AngularJS：何时应该使用Directive、Controller、Service？
AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...
- 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结
这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理汇总.如果对文中的题目全部了然于胸,觉得对整个angular框架应该掌握的七七八八了.希望志同道合的通知补充 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- 何时应该使用Directive、Controller、Service？
AngularJS:何时应该使用Directive.Controller.Service? 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可 ...
- AngularJs学习笔记--Managing Service Dependencies
原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...
- angularjs中的directive scope配置
angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
随机推荐
- 修改IP的方法(C#)
1. wmi 代码以后补 需要获取全部IP后,统一添加(貌似会造成网络瞬断) 2. iphlpapi.lib 代码以后补 可以直接添加和删除IP 3. netsh 可以直接添加和删除IP
- DB9_公头_母头_串口引脚定义及RS-232串口线制作方法
RS-232连接线制作方法 材料及工具 一根双绞线(8芯).一个标准RJ45头.一个DB9孔型插头.一把RJ45专用工具.一个电烙铁及若干焊锡. 引脚定义 按以下管脚定义制作RJ45端头:I表示网络视 ...
- 你所不知道的mybatis居然也有拦截器
对于mybatis的拦截器这个想法我来自于三个地方 也就是下面这个三个地方是可以使用的,其他的情况需要开发人员根据实际情况来使用. 1.对于分页的查询,我们可以对于分页的方法采用比较规范的命名,然后根 ...
- allegro 导Gerber文件
今天抽空好好整理了一下有关Allegro出Gerber文件文档,此文档在网上搜到的基础上进一步完善,把每个需要注意的地方都用红色字体框出 http://files.cnblogs.com/files/ ...
- LeetCode OJ 26. Remove Duplicates from Sorted Array
Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...
- 解决centos网速特别慢的最佳解决办法
摘自:http://www.centoscn.com/CentosBug/osbug/2014/0614/3138.html 我使用了centOS,但是发现网速实在是卡得几乎不能上网,连百度都打不开, ...
- <marquee>，视频和音频的插入，正则表达式
1.marquee 页面的自动滚动效果,不仅可以移动文字,也可以移动图片表格. <marquee></marquee>之间加内容即可. marquee的属性 1.滚动方向dir ...
- cdn是什么
CDN的全称是Content Delivery Network,即内容分发网络.其目的是通过在现有的Internet中增加一层新的网络架构, 将网站的内容发布到最接近用户的网络”边缘”,使用户可以就近 ...
- Unity 的ICallHander在C#项目中实现注入
项目包引用: Install-Package Unity.Interception 创建项目的接口和其实类: public interface ICalculator { double Calcula ...
- Hibernate 关系映射方式(1)
来源:本文转载自:http://blog.csdn.net/huangaigang6688/article/details/7761310 Hibernate映射解析——七种映射关系 首先我们了解一个 ...