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 ...

随机推荐

Minimum Size Subarray Sum 解答
Question Given an array of n positive integers and a positive integer s, find the minimal length of ...
catkin_simple 的使用
Catkin simple 可用于规范catkin package, 并简化CMakeLists Dependencies are just listed once as build-depend ...
MD5加密算法(转)
获取字符串的MD5摘要原文更详细: http://www.weixuehao.com/archives/474 代码如下: import java.security.MessageDigest; p ...
wso2esb源码编译总结
最近花了两周的空闲时间帮朋友把wso2esb的4.0.3.4.6.0.4.7.0三个版本从源码编译出来了.以下是大概的一些体会. wso2esb是基于carbon的.carbon是个基于eclipse ...
cocos2d-x结合cocosbuilder，不同屏幕适配小结
这个问题搞了好几天才解决,在此总结一下: 首先约定只使用一套图片资源同时应用于iphon4和iphon5(测试过在ipad下也能显示正常), 这里我们将需要全屏显示的背景制作为iphon5的尺寸即:1 ...
H5单页面架构：requirejs + angular + angular-route
说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的 ...
【巧妙预处理系列】【UVA1330】City game
最大子矩阵(City Game, SEERC 2004, LA 3029) 给定一个m×n的矩阵,其中一些格子是空地(F),其他是障碍(R).找出一个全部由F组成的面积最大的子矩阵,输出其面积乘以3后 ...
DataSet转Json 方法
防止忘记,留着备用 /// <summary> /// DATASET转JSON /// </summary> /// <param name="ds" ...
SqlBulkCopy使用介绍以及注意事项
SqlBulkCopy,微软提供的快速插入类,针对大批量数据操作,此类效果明显有所提升,以下是微软官方解释: Microsoft SQL Server 提供一个称为 bcp 的流行的命令提示符实用工具 ...
LAMP介绍及安装
LAMP介绍及安装 1. LAMP是什么? LAMP,包含Linux + Apache + PHP + Mysql. LAMP适用环境适用于追求极致稳定的WEB环境,缺点是需要消耗更多资源. 除了L ...