无意中看到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. C pointers

    指向整型数组指针int (*p)[10] = matrix;增加这个指针的值使它指向下一个整型数组 指向整型指针int *pi = &matrix[0][0];int *pi = &m ...

  2. ubuntu 包维护

    gnats == bug; tox = tales xillia ubuntu回显当前目录

  3. 把程序嵌入网页之ATL编写ActiveX[标准窗口+接受参数]

    从VS2010开始ATL ActiveX支持IObjectSafety接口,所以用VS2010来编写,新建一个ATL项目 向导的第一页没什么东西,直接下一步,选项可以根据具体需求调整 点“完成”,切换 ...

  4. myeclipse修改tomcat端口

    myeclipse自带的tomcat可以直接在myeclipse下面进行配置,但是如果是配置的tomcat 只能自己手动修改了

  5. 字符串和数字的全排列问题、前i位被i整除问题

    // 全排列问题.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using names ...

  6. static_cast

    C 风格(C-style)强制转型例如以下: (T) exdivssion // cast exdivssion to be of type T 函数风格(Function-style)强制转型使用这 ...

  7. diffuse linux 文件比对工具

    linux下比较好用的可视化文件比对工具

  8. 使用 Camtasia Recorder显示 “ camtasia an error occurred in the recorder: video codec open failed ”

    这是因为本机没有codec的缘故,可以下载一个:tscc解码器(TechSmith Screen Capture Codec) 2.0.3.0 安装版 http://www.cngr.cn/dir/2 ...

  9. django的路由系统

    在django生成的工程项目文件中urls.py文件用于指定路由信息 该文件默认导入以下模块 from confimport from import admin from confimport url ...

  10. ASP.NET和PHP全面对比

    谁是速度之王? 刚刚在9月编程语言排行榜上取得历史性突破的PHP在Web开发领域最到的对手可能就是基于微软.NET技术的ASP.NET.近日,微软的 Joe Stagner在博客上发表了一系列文章比较 ...