AngularJS 是一个 JavaScript 框架

它可通过 <script> 标签添加到 HTML 页面。

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

AngularJS 通过 ng-directives 扩展了 HTML。

<!DOCTYPE html>
<html>
<body>
  <div ng-app="">
    <p>在输入框中尝试输入:</p>
    <p>姓名: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
  </div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</body>
</html>

解释:

ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

AngularJS 指令

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。

<div ng-app="" ng-init="firstName='John'">
  <p>姓名为 <span ng-bind="firstName"></span></p>
</div>

AngularJS 表达式

AngularJS 表达式写在双大括号内:{{ expression }}

<div ng-app="">
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>

AngularJS 应用

AngularJS 模块(Module) 定义了 AngularJS 应用。

AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>

AngularJS 模块定义应用:

var app = angular.module('myApp', []);

AngularJS 控制器控制应用:

app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});

更多AngluarJS教程:http://www.runoob.com/angularjs/angularjs-tutorial.html

AngularJS 简介的更多相关文章

  1. Angularjs简介

    很久没有系统学习一个新技术了,angularjs将会比较系统的讲解这个技术的语法.应用.次类型的博客将会持续更新,博主也是一个初学者,如果有问题欢迎留言讨论. angularjs简介. angular ...

  2. AngularJS学习之旅—AngularJS 简介(一)

    一.AngularJS 简介 1.AngularJS 是一个 JavaScript 框架. AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.Angu ...

  3. 【03】AngularJS 简介

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

  4. AngularJS简介与四大特征

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

  5. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  6. 01、AngularJs简介

    AngularJs致力于减轻程序员在开发Ajax应用过程的痛苦.做前端的童鞋都知道,当在开发Ajax应用时,我们在与后台交互的同时,还在不断的手动操作Dom,诸如自己组装后台数据,渲染Html标签生成 ...

  7. AngularJS 简介、指令、表达式

    AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...

  8. AngularJS开发指南1:AngularJS简介

    什么是 AngularJS? AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于, ...

  9. 跨平台移动APP开发进阶(四)AngularJS简介

    AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件. 它的创新点在于,利用 数据绑定 和 依赖注入 ...

随机推荐

  1. js中局部变量必须用var去声明

    js中的变量与其他的脚本语言都是很不一样的,在function中你如果不用var 声明一个变量,那么这个变量将在全局可见,也就相当于创建了全局变量.所以在function中声明变量尽量都是用var来声 ...

  2. C#常用字符串加解密方法封装

    C#中常用的字符串加密.解密方法封装,包含只加密但不解密的方法.收藏起来备用. //方法一 //须添加对System.Web的引用 //using System.Web.Security; /// & ...

  3. 不用插件 让Firefox 支持网页翻译

    1.进入http://labs.microsofttranslator.com/bookmarklet/ 2.在语言选择框的下拉列表中选择“简体中文” 3.右键点击“翻译”按钮,选择“将此链接加为书签 ...

  4. springmvc restful配置有一个小小的坑坑

    首先web.xml配置 <!-- spring-mvc --> <servlet> <servlet-name>springServlet</servlet- ...

  5. 容器--IdentityHashMap

    一.概述 IdentityHashMap也是一类特殊的Map,根据其名字,Identity,即同一性,其表现出的具体特点便是,在判断Map中的两个key是否相等时,只通过==来判断,而不通过equal ...

  6. python django 多级业务树形结构规划及页面渲染

    概述: 在项目中,父级到子级结构并不少见,如果仅仅的两层树形结构,我们可以使用数据库的外键设计轻松做到,子级业务表设计一字段外键到父级业务表,这样子到父.父到子的查询都非常简单. 但是往往父子结构会有 ...

  7. ViewPager的刷新、限制预加载、缓存所有

    [框架]: 公共部分:左侧菜单.TitleBar.RadioGroup(3个RadioButton:X.Y.Z) 选择X页面:指示器+ViewPager [要达成的效果]: (1)左侧选择A,进入X页 ...

  8. PHP内核探索之变量(6)- 后续内核探索系列大纲备忘

    年前因为工作比较饱和,现在又忙着换工作的事情,基本停止了对博文的更新.后续的博文,还是慢慢补上吧. 为了不至于过于发散,先搞个未成形的大纲,如下: PHP内核探索之变量  不平凡的字符串 PHP内核探 ...

  9. ssh架构简单解释和vo po解释

      Struts.spring.Hibernate在各层的作用 1)struts 负责 web层. ActionFormBean 接收网页中表单提交的数据,然后通过Action 进行处理,再Forwa ...

  10. 把Java生成的RSA公钥、私钥转换成.NET使用的XML格式

    import java.security.KeyFactory; import java.security.interfaces.RSAPrivateCrtKey; import java.secur ...