在同个 angular.js 应用的控制器之间进行通信可以有很多种不同的方式，本文主要讲两种：
基于scope继承的方式
基于event传播的方式
基于scope继承的方式 最简单的让控制器之间进行通信的方法是通过scope的继承。假设有两个控制器Parent、Child，Child 在 Parent 内，那Child 可以称为子控制器，它将继承父控制器Parent的scope。这样，Child就可以访问到Parent的scope中的所有函数和变量了。
需要注意的是，由于scope的继承也是基于Js的原型继承，如果变量是基本类型的，那在Child中的修改（写），有可能会导致Parent中的
angularjs 查看更多
angular-phonecat 是什么
它是google 官方开发的一个 angular.js入门学习web应用程序.
此web应用程序是介绍 android 手机的一个站点
从哪里下载 angular-phonecat
git 直接下载克隆项目
git clone --depth=20 https://github.com/angular/angular-phonecat.git
可以学习什么?
angular.js 框架的构建,测试,学习
后端 node.js 的搭配使用
如何让它运行起来
首先安装 node.js 运行的依赖包
npm install
其中有几个
angularjs 查看更多
Angular.js 中的特性,双向绑定.
多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的?
这要归功于 scope 下面3个重要的方法:
$watch
$digest
$apply
他们的区别是什么,我们来介绍下:
$watch
这是一个监听 scope 上数据的监听器
方法说明:
$scope.$watch('参数',function(newValue,oldValue){
//逻辑处理
})
上面我们就是创建了一个监听器.
'参数' 就是$scope对象下的一个对象(或者一个对象的属性),注意,这里是字符串形式.
假如你
angularjs 查看更多
很多web服务面对的不仅仅是当地用户,多语言环境不仅能提升逼格,更重要是一种用户体验.angular.js 作为前后端拆分的解决方案之一,当然离不开前端框架处理国际化的问题,angular.js 官方出了一个模块 angular-translate 来解决多语言国际化问题.我们前端采用 bower 包管理工具来管理依赖,点击链接查看bower 使用方法,这里不再详细说明.上面列出的3个模块我们都要用到,一会详细说明:今天和大家分享的内容目录:使用angular-translate 模块的前期准备工作创建过滤器做html页面内容的国际化创建服务做javascript 脚本里的内容国际化使用 an
angularjs 查看更多
一些零散的点,如果读的时候自己能串起来就更好了.1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图.成功解耦了应用逻辑,数据模型,视图.2.它的视图也不是后台统一替换后渲染页面,而是视图被动态实时替换.视图上可以通过指定的 angular.js 指令来绑定模型数据.模型数据的变化又会直接影响视图的变化.3.控制器就像一座桥梁,负责连接模型和视图, 模型里包括数据和与数据进行交互的方法.视图只负责把模型数据的映射显示给用户.4.angular.js 会记录数据模型中的数据在任意时间点的
angularjs 查看更多
angular.js 下使用$q 创建一个 promose 链式调用.我们在前几天分享了一篇,关于javascript中 promose 规范的博客 (点击查看)现在很多很多的开源javascript库 实现了 promise 规范大名鼎鼎的npm 包 Qgithub地址:https://github.com/kriskowal/q 相仿的在 angular.js 下 $q 是一个小型轻量级的 promise 实现.作者据说是$q是从Kris Kowal的Q中获得灵感从而产生的一个promise/deffered实现我们如何使用$q 定义一个 promise .
vargetPersonLis
angularjs 查看更多
angular.js 系列不会断,但是中间会乱七八糟的插入一些知识点,距离上次的系列九已经太遥远.上次把路由映射模板,模板指定控制器简单演示了一下.今天我们其实就是把模板用bootstrap页面套一下,让它华丽转身.源码就不贴了,回头会吧 github的开源地址贴上.控制台 gulp 启动 ,自动装载blog/list 模板.blog/list 路由首先装载了 母版页 blog_layout.html (你看到的页头和页面右侧部分)最左侧对应一个ui-view="container" 装载 blog_list.html 模板 (你看到的左下侧部分)
angularjs 查看更多
angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom .作为前端开发而不去操作dom ,这简直是一个玩笑! 没错,确实是这样的.关于 angular.js 的详细说明及事例请在博客搜索 angular.js既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并且文本框里数据要和控制层一个属性绑定,按钮要实现 ng-click 事件,如何做?传统实现方法,
angularjs 查看更多
前几篇博文简单说了下angular的视图,模型,控制器,ui-router等,但是一直没有串起来.查找目录所以今天这篇就是在以前的基础上,把客户端angular.js 负责的部分整体串起来演示一下.我们按照angular执行顺序来做前提准备:(1)Client 根目录下 index.html 首先加载angular.js 和 ui-router.js 文件<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
<scriptsrc=".
angularjs 查看更多
我们了解 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用.angular.js 为我们封装好了一个路由工具ngRoute ,它是一种靠url改变去驱动视图.angularUI 也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来驱动视图.后者有什么优势:一个页面可以嵌套多个视图,多个视图去控制某一个视图等.ngRoute使用时需要ui中用ng-view指令指定 如:<div ng-view></div>url改变此区域会被刷新.首先要配置注册 ngRoutevar app = a
angularjs 查看更多
angularUI 在不断发展过程中已经被划分成了几个模块,你可以选择你需要的模块载入,我们今天要了解一下路由控制器 ui-router ,它就是angularUI划分出出来的一个独立模块.此模块只关注状态,在整个用户界面导航中,一个状态对应一个视图,开发者可以根据URL状态来组织控制界面UI渲染.这里和后端开发有一点点区别需要注意:后端: 以node.js使用express框架的web开发为例,当我们定位一个路由,对应的会去服务端请求相应资源,服务器端接收请求,解析路由,然后做一系列逻辑处理,最后指定一个视图返回客户端.url —> 路由 —> 逻辑处理 —> 替换视图 —
angularjs 查看更多
上一篇博客我们已经简单的在index.html 实现了一个控制器代码.后面的学习我们会遵循一个控制器管理一个视图,一个路由对应一个视图的单一原则,所以再不会将controller控制器代码直接写到 index.html 中.我们会应用到angular.js中强大的模块来开发,比如路由,服务,过滤器,指令等模块.所以这一篇博客很有必要把各个模块之间的依赖关系,定义,使用等问题陈述一下.那么angular.js 到底是如何加载启动起来的呢.<!DOCTYPEhtml>
<htmlng-app="YIJIEBUYI">
<head>
<s
angularjs 查看更多
我们在上一篇angular.js输出hello world .我们在view中给模型的一个参数name赋值 “hello world” .这是一种简单的赋值,我们可以在视图中通过 ng 指令(以ng-开头的指令)实现了简单的赋值,如果遇到复杂的逻辑运算操作,那么视图里是无法执行复杂操作的,这时控制器就派上用场了.简单讲:控制器 controller 就是实现视图和模型之间数据传递,方法调用,改变模型等一系列操作,他是javascript函数(也可以看做类或者类型)控制器有几点需要注意的地方:1.一个控制器最好只包含一个视图的业务逻辑.以后你会看到我们的目录结构Client/scripts/co
angularjs 查看更多
上一篇我们搭建了一个前端 angular.js 后端 node.js服务器的单页面应用,虽然目前服务端只有一个启动文件,但是后面的系列涉及到服务器端交互的时候会逐渐补充.我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化.但是这篇还是要从HelloWorld开始学习.angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服务.http://www.bootcdn.cn/我们找到 1.3.8的angular.js cdn地址,引用到页面 index.html中http://cdn.bootcss.com/angular.js/1.3.8/angular.
angularjs 查看更多
为什么要把 gulp 的学习文章安装到这里,因为我们上一篇说到了创建一个angular.js项目框架,其中用 gulp 来构建代码.什么是 gulp ,我之前的博客介绍过 yoman项目构建工具 ,gulp 也是类似这样的工具,而且感觉比 yoman和 grunt等工具使用更加简单方便.我们在项目中使用 gulp 做什么?我们会用 gulp 定制几个任务,其中一个就是把controller中的控制器代码抽取出来,然后生成一个新的 app.js .这样的好处是不言而喻的,比如一个团队每个人负责几个控制器,如果我们不用项目管理工具来自动合并引用到文件的话,我们只能手动每个人去修改 index.ht
angularjs 查看更多
angular.js学习系列为后续的学习,我们需要搭一个 angular.js 学习环境.服务器端 api 使用 node.js 提供客户端由 angular.js 来负责.然后整个框架中使用 glup 代码构建工具来处理一些任务,关于 glup 的使用会单独开一篇博客.参考上图,下面有文档描述说明,几个* 表示几级目录*Client 文件夹下都是前端部分. **index.html — 站点启动页面,如果你把angular.js理解成一个单页面应用,它就是那个单独的页面 **images — 放置图片**styles—放置样式**templates —放置视图模板**vender—放置
angularjs 查看更多
目录:angular.js 系列一之准备工作angular 系列二 搭框架-node.js后端,angular.js前端angular 系列三 gulp 代码构建工具简介angular 系列四 初识angular.js hello world!angular 系列五 控制器controller的作用angular 系列六 Module类的介绍及模块化依赖angular 系列七 ui-router路由控制器介绍angular 系列八 ui-router详细介绍及ngRoute工具区别angular 系列九 ui-router适配模板,模板指定controller控制器angular 系列十 使用
angularjs 查看更多
我们的应用现在有了一个搜索框。注意到页面上的手机列表随着用户在搜索框中的输入而变化。步骤2和步骤3之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。控制器我们对控制器不做任何修改。模板app/index.html<divclass="container-fluid">
<divclass="row-fluid">
<divclass="span2">
<!--Sidebarcontent-->
Search: <input ng-model="
angularjs 查看更多