在同个 angular.js 应用的控制器之间进行通信可以有很多种不同的方式，本文主要讲两种：
基于scope继承的方式
基于event传播的方式
基于scope继承的方式 最简单的让控制器之间进行通信的方法是通过scope的继承。假设有两个控制器Parent、Child，Child 在 Parent 内，那Child 可以称为子控制器，它将继承父控制器Parent的scope。这样，Child就可以访问到Parent的scope中的所有函数和变量了。
需要注意的是，由于scope的继承也是基于Js的原型继承，如果变量是基本类型的，那在Child中的修改（写），有可能会导致Parent中的
angularjs 查看更多
在 React 下，我们需要考虑的，是每个组件在任意一个状态下应该怎么渲染。
（状态就是数据）
React 会把这些组件装配成页面。
然后当数据更新后， React 又把新数据传给组件，于是又根据新数据重新渲染
React 把重新渲染的结果和之前渲染的结果进行比对，找出需要更新的部分，进行更新。
我们只需要正确的更新数据/状态，不必再在渲染时考虑数据发生了什么变化（例如是增加了一条记录还是减少了一条记录？增加到什么位置？不需要考虑这些也就不需要考虑我们在进行 DOM 操作时插入到哪里等问题）。
我们只需要指定好规则（即给出任意一种状态，这个组件应该怎么渲染），并正确的更新状态，这些
javascript 查看更多
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-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 查看更多
http-server 是轻量级web服务
你可以轻松使用 http-server 替换 Express
http-server 轻量级到什么地步
无需任何设置
也需不要你引用
轻松把当前所在目录架构成一个web服务
应用场景
angular.js 应用.
因为 angular.js本身作为一个单页面应用,首先需要加载这个单页面.
而这页面,一般是我们静态目录下的 index.hlmt
然后这个静态页面加载了 angular.js 前端框架
这时真正的路由控制已经掌握到了 angular.js 的手里
所以,你不需要像 Express 这样大的包来支持后端web服务
nodejs 查看更多
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 查看更多
很多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 下使用$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 查看更多
angular.js快速开始在这一步你会增加一个让用户控制手机列表显示顺序的特性。动态排序可以这样实现，添加一个新的模型属性，把它和迭代器集成起来，然后让数据绑定完成剩下的事情。请重置工作目录：git checkout -f step-4你应该发现除了搜索框之外，你的应用多了一个下来菜单，它可以允许控制电话排列的顺序。步骤3和步骤4之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。模板app/index.htmlSearch:<inputng-model="query">
Sortby:
<selectng-model="orde
nodejs 查看更多
angular.js快速开始在这一步你会增加一个让用户控制手机列表显示顺序的特性。动态排序可以这样实现，添加一个新的模型属性，把它和迭代器集成起来，然后让数据绑定完成剩下的事情。请重置工作目录：git checkout -f step-4你应该发现除了搜索框之外，你的应用多了一个下来菜单，它可以允许控制电话排列的顺序。步骤3和步骤4之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。模板app/index.htmlSearch:<inputng-model="query">
Sortby:
<selectng-model="orde
nodejs 查看更多
我们的应用现在有了一个搜索框。注意到页面上的手机列表随着用户在搜索框中的输入而变化。步骤2和步骤3之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。控制器我们对控制器不做任何修改。模板app/index.html<divclass="container-fluid">
<divclass="row-fluid">
<divclass="span2">
<!--Sidebarcontent-->
Search: <input ng-model="
angularjs 查看更多
我们现在开始准备编写AngularJS应用——phonecat。这一步骤（步骤0），您将会熟悉重要的源代码文件，学习启动包含AngularJS种子项目的开发环境，并在浏览器端运行应用。进入angular-phonecat目录，运行如下命令：gitcheckout-fstep-0该命令将重置phonecat项目的工作目录，建议您在每一学习步骤运行此命令，将命令中的数字改成您学习步骤对应的数字，该命令将清除您在工作目录内做的任何更改。运行以下命令：nodescripts/web-server.js来启动服务器，启动后命令行终端将会提示Http Server running at http://lo
javascript 查看更多
之前有一篇讲了yeoman 工具安装和简易使用,你可以从这里点击查看 伟大的传送带这一片分享下生成的这个后端web框架什么时候使用?结构包括什么?各部分如何工作?什么时候使用这个框架:当你是个前端,当你专注与某个富客户端应用时,当你需要后端服务器提供数据而你不会或者懒得编写服务器端程序时...本人是在学习angular.js 时,也就是做一个富客户端应用时,后端可能只是根据api获取数据,所以方便快捷的使用了 yeoman 来生成一个web架构.这个架构包括了哪些东西?app 目录是框架的主要目录,包含了静态资源(fonts,images,styles) angular.js 需要提供的视图(
开发工具 查看更多
mac 下安装 Angular.JS 时,直接报错:google 搜索 phantomjs@1.9.7-3 install: `node install.js` 发现phantomjs 已经被"墙"解决方案:手动下载 phantomjs后放到npm install对应的phantomjs那个目录下然后 npm install或者你打开你的代理后再 npm install 试一试.
nodejs 查看更多