第一次用AngularJS
1.创建指令的4种方式(ECMA)
var appModule = angular.module('app', []);
appModule.directive('hello', function(){
return {
/**
* E 元素
* C class
* M 注释 directive:hello
* A 属性 默认
*/
restrict: 'ECMA',
template: '<div>hello world.</div>',
replace: true
};
});
2.指令的多种调用方式
<!-- 定义指令,匹配过程(去掉'x-'、'data-'、转化':', ',' , '-', '_-'为驼峰式) --> <my-hello></my-hello>
<div my-hello></div>
<!-- directive:my-hello -->
<div class="my-hello"></div>
<my:hello></my:hello>
<my_hello></my_hello>
<data-my-hello></data-my-hello>
<x-my-hello></x-my-hello>
3.service 与 controller、directive交互
<button add-book-button>Add book</button> <ul ng-controller="books.list">
<li ng-repeat="i in books">书名:{{i.title}},作者:{{i.author}}</li>
</ul>
var appModule = angular.module('app', []); // service 单例,共享数据
appModule.service('Book', ['$rootScope', function($root){ var service = {
books: [
{
"title": "书名1",
"author": "作者1"
},
{
"title": "书名2",
"author": "作者2"
}
],
addBook: function(book){
service.books.push(book); // 给root下所有的books.update派发事件
$root.$broadcast('books.update');
}
}; return service;
}]); // 在控制器里使用Book服务
appModule.controller('books.list', ['$scope', 'Book', function(scope, Book){ scope.books = Book.books; scope.$on('books.update', function(){
scope.$apply(function(){
scope.books = Book.books;
});
}); }]); // 在指令里使用Book服务
appModule.directive('addBookButton', ['Book', function(Book){
return {
restrict: 'A',
link: function(scope, el){
var n = 0;
el.bind('click', function(){
Book.addBook({
"title": "新书"+(++n),
"author": "新作者"+n
});
});
}
};
}]);
4.controller 与 controller交互
<!-- 控制器嵌套 -->
<div ng-controller="Ctrl1Parent">
<p>{{text}}</p>
<button ng-click="changeText()">控制器嵌套Parent</button>
<div ng-controller="Ctrl1Child">
<p>{{text}}</p>
<button ng-click="changeText()">控制器嵌套Child</button>
</div>
</div> <!-- 控制器嵌套,向上传播 -->
<div ng-controller="Ctrl2Parent">
<p>{{text}}</p>
<div ng-controller="Ctrl2Child">
<button ng-click="changeText()">向上传播</button>
</div>
</div> <!-- 控制器嵌套,向下传播 -->
<div ng-controller="Ctrl3Parent">
<button ng-click="changeText()">向下传播</button>
<div ng-controller="Ctrl3Child">
<p>{{text}}</p>
</div>
</div> <!-- 控制器嵌套,兄弟传播 -->
<div ng-controller="Ctrl4Parent">
<div ng-controller="Ctrl4Child">
<p>{{text}}</p>
<button ng-click="changeText()">兄弟传播</button>
</div>
<div ng-controller="Ctrl4Child">
<p>{{text}}</p>
<button ng-click="changeText()">兄弟传播</button>
</div>
</div> <!-- 服务 -->
<div ng-controller="Ctrl5Main">
<input type="text" ng-model="test" />
<div ng-click="add()">add</div>
</div>
<div ng-controller="Ctrl5Side">
<div ng-click="get()">get {{name}}</div>
</div>
var appModule = angular.module('app', []); // 控制器与控制器交互 -> 控制器嵌套
appModule.controller('Ctrl1Parent', ['$scope', function(scope){
scope.text = 'hello';
scope.changeText = function(){
scope.text = 'parent';
};
}]);
appModule.controller('Ctrl1Child', ['$scope', function(scope){
scope.changeText = function(){
scope.text = 'child';
};
}]); /**
* $on 绑定事件
* $emit 向上传递事件(冒泡)
* $boardcast 向下传递事件(捕获)
*/
// 控制器与控制器交互 -> 事件传播(控制器嵌套,向上传播)
appModule.controller('Ctrl2Parent', ['$scope', function(scope){
scope.text = 'parent';
scope.$on('changeText', function(ev, text){
scope.text = text;
});
}]);
appModule.controller('Ctrl2Child', ['$scope', function(scope){
scope.changeText = function(){
scope.$emit('changeText', 'child');
};
}]); // 控制器与控制器交互 -> 事件传播(控制器嵌套,向下传播)
appModule.controller('Ctrl3Parent', ['$scope', function(scope){
scope.text = 'parent';
scope.changeText = function(){
scope.$broadcast('changeText', 'child');
};
}]);
appModule.controller('Ctrl3Child', ['$scope', function(scope){
scope.$on('changeText', function(ev, text){
scope.text = text;
});
}]); // 控制器与控制器交互 -> 事件传播(同级传播)
appModule.controller('Ctrl4Parent', ['$scope', function(scope){
// 绑定一个changeTextAll事件,它被触发时会向子作用域发布changeTextExe
scope.$on('changeTextAll', function(){
scope.$broadcast('changeTextExe');
});
}]);
appModule.controller('Ctrl4Child', ['$scope', function(scope){
scope.text = 'parent'; // 触发父控制器的changeTextAll事件,得到changeTextExe
scope.changeText = function(){
scope.$emit('changeTextAll');
}; // changeTextExe发生
scope.$on('changeTextExe', function(){
scope.text = 'changeTextExe';
});
}]); // 以服务的方式交互
appModule.factory('instance', function(){
return {};
});
appModule.controller('Ctrl5Main', function($scope, instance){
$scope.add = function() {
instance.name = $scope.test;
};
});
appModule.controller('Ctrl5Side', function($scope, instance){
$scope.get = function() {
$scope.name = instance.name;
};
});
第一次用AngularJS的更多相关文章
- 第一次用angularJS做后台管理点滴
很早以前就大概看过一点angualrjs,但是没有项目,一直没有进行下去,就是干巴巴的看着,过了一段时间发现什么也不记得了. 来yulebaby我的第一个后台管理是用easyui做的,做完那个以后发现 ...
- 【回忆1314】第一次用AngularJS
1.创建指令的4种方式(ECMA) var appModule = angular.module('app', []); appModule.directive('hello', function() ...
- 从jquery里的$.ajax()到angularjs的$http
jquery中对ajax的使用做了很多封装,使得我们使用习惯了,反而并不大清楚在请求过程中的一些细节. 在第一次使用angularjs的$http时,后台一直接受不到前端请求的数据,于是小小研究了一下 ...
- 使用 AngularJS 和 Electron 构建桌面应用
GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是io.js 运行时的衍生,专注于桌面应用而 ...
- requirejs+angularjs搭建SPA页面应用
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...
- AngularJS快速入门01-基础
记得第一次听说AngularJS这项很赞的Web的前端技术,那时还是2014年,年中时我们我的一个大牛兄弟当时去面试时,被问到了是否熟悉该技术,当时他了解和使用的技术比较多.我们询问他面试情况时,他给 ...
- AngularJs $http.post 数据后台获取不到数据问题 的解决过程
第一次使用 AngularJs 的 $http 模块的时候,遇到过后台获取不到前台提交数据的问题,检查代码没有发现问题,先上代码. js 代码 angular.module("newsApp ...
- AngularJS 和 Electron 构建桌面应用
译]使用 AngularJS 和 Electron 构建桌面应用 原文: Creating Desktop Applications With AngularJS and GitHub Electro ...
- AngularJS 之1-初识
摘要:本文主要记录第一次接触AngularJS的笔记,现在在我面前就是一张白纸+一点简单的html知识. 1.首先在<head>中加 <script src="一个网址(具 ...
随机推荐
- iOS开发之HTTP断点续传
前言 在APP中经常会遇到文件下载,鉴于用户体验和流量控制,就需要用到断点续传.本文主要对断点续传进行了多线程封装. 效果图 原理 HTTP实现断点续传是通过HTTP报文头部header里面设置的两个 ...
- pikachu 不安全的url跳转
不安全的url跳转问题可能发生在一切执行了url地址跳转的地方.如果后端采用了前端传进来的(可能是用户传参,或者之前预埋在前端页面的url地址)参数作为了跳转的目的地,而又没有做判断的话就可能发生&q ...
- WinForm嵌入Web网页的解决方案
企业级信息化系统绝大部分采用BS架构实现,如门户网站.OA系统.电商网站等,通过浏览器输入Web网址即可访问,对于使用者来说非常便捷,对于开发维护者来说也非常方便,程序维护只需更新服务器即可,使用者无 ...
- NOIP 模拟 $12\; \text{简单的区间}$
题解 签到题 求区间和为 \(k\) 的倍数的区间,我们可以转化为求左右两个端点,其前缀和相等 对于区间最大值,我们可以把其转化为一个值,它能向左,向右扩展的最远边界,一个单调栈即可 我们设一个值 \ ...
- npm 基本命令的使用
1.npm -v 查看npm版本 2.使用npm命令安装模块 npm install Module Name 例如安装jquery模块 npm install jquery 3.卸载模块 npm un ...
- 从350ms到80ms,揭秘阿里工程师 iOS 短视频优化方案
内容作为 App 产品新的促活点,受到了越来越多的重视与投入,短视频则是增加用户粘性.增加用户停留时长的一把利器.短视频的内容与体验直接关系到用户是否愿意长时停留,盒马也提出全链路内容视频化的规划,以 ...
- 【VLC开发】libvlc_new函数参数
项目中有视频监控的需求,找了vlc这个开源视频工具,在获取实例参数时遇到了问题, 要得到VLC的全部参数有两种方法, 1 只要在创建时加上"--longhelp"和"-- ...
- jQuery中ajax请求的六种方法(三、二):$.get()方法
2.$.get()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- Jsp:taglib实现
web应用的结构: web.xml classes diegoyun OutputTag.class WEB-INF src diegoyun OutputTag.java mytag tlds ...
- Go: 复合数据类型slice
slice slice 表示用于相同类型元素的可变长度的序列. slice有三个属性:指针.长度和容量. 指针:slice存储数据的内部结构是数组,指针指向的是数组的地址 长度:保存slice中的元素 ...