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 ...
随机推荐
- Letter Combinations of a Phone Number 解答
Question Given a digit string, return all possible letter combinations that the number could represe ...
- HDU5441 Travel (离线操作+并查集)
Travel Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total Su ...
- PSPInstance Object | Web Python
PSPInstance Object | Web Python The PSPInstance object is available to all PSP pages through the psp ...
- hdu 5631 Rikka with Graph（图）
n个点最少要n-1条边才能连通,可以删除一条边,最多删除2条边,然后枚举删除的1条边或2条边,用并查集判断是否连通,时间复杂度为O(n^3) 这边犯了个错误, for(int i=0;i<N;i ...
- java排列
排列:它可以被看作是多个相同类型的数据的组合,这些数据的统一管理. 1.声明. 创建 一维:type[] var 比如:int[] a或 int a[]: 数组名= new 数组元素的类型[数组 ...
- ADB命令解析
ADB全称Android Debug Bridge, 是android sdk里的一个工具, 用这个工具可以直接操作管理android模拟器或者真实的andriod设备(手机). 它的主要功能有: * ...
- .NET中的CSV导入导出(实例)
导入代码,从csv文件得到datatable /// <summary> /// Get Data From Csv File /// (Th ...
- 监控代码运行时长 -- StopWatch用法例程
在.net环境下,精确的测量出某段代码运行的时长,在网络通信.串口通信以及异步操作中很有意义.现在做了简单的总结.具体代码如下: (1).首先 using System.Diagnostics; (2 ...
- 使用SOAPUI测试WEBAPI接口
其实很简单,用起来也挺方便的. 首先,先去百度下SoapUI 下载,下载安装好后,打开软件. 1.新建一个项目 点击 Create Empty Project 按钮后,会自动新建一个项目,名字默认为: ...
- Objective-C——NSMutableURLRequest发送POST请求,使用NSJSONSerialization解析JSON字符串
NSString *reqData = @"Data="; NSData *postDatas = nil; NSString *urlPath = @"url" ...