无意中看到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的更多相关文章

  1. 媲美jQuery的JS框架——AngularJS（一）

    前言 相信原生JS大家都不陌生,至于为什么说原生,是因为在JS的基础上衍生出了很多的框架.有些框架的使用非常广泛,甚至已经达到了媲美原生的地步.在之前的文章中给大家介绍了jQuery这一介绍框架.今天 ...

  2. 一款优秀的前端JS框架—AngularJS

      前  言 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表 ...

  3. 媲美jQuery的JS框架----AngularJS（二）

    前言 对于AngularJS什么,小编在这就不多做介绍了.大家可以看小编的上一篇博客. 言归正传,小编在上一篇博客中介绍了AngularJS中的指令.表达式还有非常实用的三种服务.接下来,带大家看一看 ...

  4. 【js类库AngularJs】web前端的mvc框架angularjs之hello world

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...

  5. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  6. js框架简明

    jquery 主要战场还是在dom这块.其它经典怀旧的2个需要了解一下,mootools, prototype.是他们启发了js向工程化,团队化,协作化发展的转变,yui虽然听说停止开发了,但他的代码 ...

  7. 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想

    总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...

  8. JS 框架之我感

    对于一些js框架在我看来,都是将前端的表现动态化,即用动态js把html加载到页面上,如angularJS的MVVM开发模式(已接触),ReactJS的View层组件化(学习中),还有一些只听过没见过 ...

  9. 一个非常好用的框架-AngularJS(一)

      前  言           AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.An ...

随机推荐

  1. Kindeditor+web.py+SAE Storage 实现文件上传 - 开源中国社区

    Kindeditor+web.py+SAE Storage 实现文件上传 - 开源中国社区 Kindeditor+web.py+SAE Storage 实现文件上传

  2. 机器学习 1、R语言

    R语言 R是用于统计分析.绘图的语言和操作环境.R是属于GNU系统的一个自由.免费.源代码开放的软件,它是一个用于统计计算和统计制图的优秀工具. 特点介绍 •主要用于统计分析.绘图.数据挖掘 •R内置 ...

  3. UGUI Scrollbar控件

    如题就是Scrollbar控件,它简单可以看成 Scrollbar 和 Image组件组成 它基本上不单独使用多数是制作滚动视图.我们来看看他独特的属性,重复的属性就不在介绍了! 属性讲解: Hand ...

  4. 蚂蚁的难题(二)首尾相连数组的最大子数组和（DP）

    蚂蚁的难题(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 下雨了,下雨了,蚂蚁搬家了. 已知有n种食材需要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种食材 ...

  5. IOS设计模式学习（8）适配器

    1 前言 在面向对象软件设计中,有时候我们想把有用而经过精心测试的类,用于应用程序的其他新领域.但是,新功能需要新接口,而新接口与要复用的现有类不一致的情况非常普遍.我们不想为新的接口而重写可靠的类. ...

  6. UVA 1345 Jamie's Contact Groups

    题意: 一些人,和他们可能加入的组号.问每个组,最小的最大人数是多少 分析: 二分的是最大流的容量.设置一个超级源点,连向所有的人,容量为1.设置一个超级汇点,使所有的组连向超级汇点,二分的就是这里的 ...

  7. EasyUI时间格式化

    changeDateFormatNodate: function (cellval) { var date = new Date(parseInt(cellval.replace("/Dat ...

  8. [转载]Matlab中fft与fftshift命令的小结与分析

    http://blog.sina.com.cn/s/blog_68f3a4510100qvp1.html 注:转载请注明出处——by author. 我们知道Fourier分析是信号处理里很重要的技术 ...

  9. BZOJ 3368 约翰看山（扫描）O(N)

    这题,简直丧心病狂了. 大意是给你一个环上一些覆盖的区间,让你求总覆盖长度. 非常坑的点是这个区间因为是个环,所以可能逆时针给你,也可能顺时针给你,你特别要注意.那么区分顺时针和逆时针的方法 就是,题 ...

  10. C++程序设计实践指导1.6分数运算改写要求实现

    改写要求:重载>>和<<实现分数类对象的直接输入输出,重载+完成多个分数对象加法 #include <cstdlib> #include <iostream& ...