无意中看到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. 使用sae定时执行Python脚本

    使用sae定时执行Python脚本 使用sae定时执行Python脚本 12,May,2014 | 57 Views 毕设压力略大,必须是桂林游的锅.去之前放松了几天,回来又休闲了几天,加上桂林的一周 ...

  2. 更新ORACLE数据时遇到锁死情况的处理

    我们在操作数据库的 时候,有时候会由于操作不当引起数据库表被锁定,这么我们经常不知所措,不知怎么给这些表解锁,在pl/sql Developer工具的的菜单“tools”里面的“sessions”可以 ...

  3. java.lang.UnsatisfiedLinkError: no XXX in java.library.path

    其中涉及的测试源码如下: For those who didn't install Javawith default settings, a systematic way for solving JN ...

  4. 初学SSH（其一）

    其实,之前一直搞不清楚,SSH整合后,Spring框架究竟是怎么连接Hibernate,并且怎么结合Dao层的,后来,我在网上查了资料,Spring+hibernate访问数据库有3种方法: 一. 注 ...

  5. Springmvc和velocity使用的公用后台分页

    Springmvc和velocity使用的公用后台分页 类别                    [选择一个类别或键入一个新类别] Springmvc和velocity使用的公用后台分页 样式: 使 ...

  6. 从汇编看c++中全局对象和全局变量

    先来看c++源码: #include <iostream> using namespace std; class X { public: int i; public: X() : i(ii ...

  7. mysql 命令

    1.查看数据库: mysql> show databases; 2.使用数据库 mysql> use mysqldata; 3.查看数据表 mysql> show tables; 4 ...

  8. JS delete 用法(删除对象属性及变量)

    1,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete ...

  9. mac git 命令提示

    直接进入正题: $ brew list 查看你是否已经安装了"bash-completion",如果没有,继续往下看: $ brew install bash-completion ...

  10. STM32F051关于printf函数在串口打印中的使用

    1.需要在Options for Target -> Code Generation 中勾选Use MicroLIB: 2.需要加入下面这个函数: int fputc(int ch, FILE ...