JS框架~Angularjs
无意中看到anytao的项目，工作台，使用了Angularjs框架，感觉在前端表现上用户体验比较好，于是就简单看了一下，原来使用很简单，或者说，人家把代码封装的很好，以至于开发人员调用时比较简单，呵呵，使用Angularjs必须将你的html标记进行标识一下，告诉人家，我要用Angularjs来渲染页面了，事实上，Angularjs带合我们最重要的不是页面表现上，而是数据绑定上，它使ＨＴＭＬ标记不那么死板，下面看一个ＤＥＭＯ就会明白了。
下面是一个页面元素绑定的例子
<html lang="en" ng-app>
<body>
<div ng-controller="Ctrl">
Enter name:
<input type="text" ng-model="name"><br>
Hello <span ng-bind="name"></span>!
</div>
</body>
</html>
//对应的ＪＳ代码如下：
function Ctrl($scope) {
$scope.name = 'Whirled';
}
如果不希望改变页面的html标记，也可以手动为Angularjs初始化，代码如下：
angular.element(document).ready(function () {
angular.bootstrap(document);
});
而且Angularjs支持对象模型，你可以很方便的使用面向对象的特性
看下面例子，是有一个对象user,user有name和last两个属性
<div ng-controller="Ctrl3">
User name:
<input type="text" name="userName" ng-model="user.name" required>
Last name:
<input type="text" name="lastName" ng-model="user.last">
<p>
你输入的内容为：
user.name:<span ng-bind="user.name"></span>
user.last:<span ng-bind="user.last"></span>
</p> </div>
//对应的ＪＳ代码如下：
function Ctrl3($scope) {
$scope.user = { name: 'zhang', last: 'zhanling' };
}
对于Angularjs的引用可以直接使用下面的地址：
URL:http://code.angularjs.org/1.2.3/angular.min.js
<script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
对于Angularjs的ＡＰＩ请查看
http://docs.angularjs.org/
JS框架~Angularjs的更多相关文章
- 媲美jQuery的JS框架——AngularJS（一）
前言 相信原生JS大家都不陌生,至于为什么说原生,是因为在JS的基础上衍生出了很多的框架.有些框架的使用非常广泛,甚至已经达到了媲美原生的地步.在之前的文章中给大家介绍了jQuery这一介绍框架.今天 ...
- 一款优秀的前端JS框架—AngularJS
前 言 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表 ...
- 媲美jQuery的JS框架----AngularJS（二）
前言 对于AngularJS什么,小编在这就不多做介绍了.大家可以看小编的上一篇博客. 言归正传,小编在上一篇博客中介绍了AngularJS中的指令.表达式还有非常实用的三种服务.接下来,带大家看一看 ...
- 【js类库AngularJs】web前端的mvc框架angularjs之hello world
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...
- 前端Js框架汇总
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
- js框架简明
jquery 主要战场还是在dom这块.其它经典怀旧的2个需要了解一下,mootools, prototype.是他们启发了js向工程化,团队化,协作化发展的转变,yui虽然听说停止开发了,但他的代码 ...
- 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想
总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...
- JS 框架之我感
对于一些js框架在我看来,都是将前端的表现动态化,即用动态js把html加载到页面上,如angularJS的MVVM开发模式(已接触),ReactJS的View层组件化(学习中),还有一些只听过没见过 ...
- 一个非常好用的框架-AngularJS(一)
前 言 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.An ...
随机推荐
- case then 的用法 貌似case then不支持别名
set ANSI_NULLS ONset QUOTED_IDENTIFIER ONgo ALTER PROC [dbo].[usp_SRV_GetALLRelativeProject]@Service ...
- UESTC_酱神赏花 2015 UESTC Training for Dynamic Programming<Problem C>
C - 酱神赏花 Time Limit: 3000/1000MS (Java/Others) Memory Limit: 262143/262143KB (Java/Others) Submi ...
- hdu 1502 Regular Words_高精度+dp
题意:问按规则排成的串有多少个A(c)>= B(c) >= C(c) 思路:因为写大整数太累,就偷懒了一下直接用java水过 import java.math.BigInteger; im ...
- [每日一题] 11gOCP 1z0-052 :2013-09-25 Lock ――for update.................................C23
转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/12021587 正确答案:ABE 这道题需要我们了解锁的知识点. TM锁的模式: 0-Non ...
- ComponentName的意思
ComponentName是用来打开其它应用程序中的Activity或服务的. 使用方法: Intent i=new Intent(); i.setComponent(new ComponentNam ...
- ffmpeg学习笔记
对于每一个刚開始学习的人,刚開始接触ffmpeg时,想必会有三个问题最为关心,即ffmpeg是什么?能干什么?怎么開始学习?本人前段时间開始接触ffmpeg,在刚開始学习过程中.这三个问 ...
- Ubuntu亮度无法调节或调节无法保存的问题
装了搜狗输入法之后,系统设置里面的很多软件都没有了.以前屏幕太亮在电源里面可以调节,现在不行了.没办法,只能找其他的办法了. 在网上查了很多资料,经自己的实验,找到了一个成功的方法. 首先进入 /sy ...
- Linux 下的 Nginx 反向代理配置.
最近实践中遇到了需要利用 nginx 进行反向代理服务器请求的需求,以前没怎么碰触过,因此花了1个多小时,快速阅览了一下nginx官网在反向代理服务中给出的基本定义: 说实话,官网给予的定义是精准的, ...
- 转JS技巧
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...
- 利用cookie改变背景色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...