Angular----入门

功能

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

特性

MVC
模块化与依赖注入
双向数据绑定
指令与 UI 控件

使用简单例子-双向绑定

要引入angularjs.js <!doctype html> <html> <head> <Meta charset="utf-8"> <script src="style/js/angular.min.js"></script> <title>双向绑定</title> </head> <body> <div ng-app=""> <p>双向绑定</p> <input tyle="text" ng-model="name"> // <div ng-bind="name"<</div< // 第二种写法（注意，因为加载页面时有时会显示{{}}） {{name}} </div> </body> </html>

Angularjs 中常用名词也就是所说的常用指令

ng_app          定义应用程序的根元素，即应用程序的‘所有者’。 指令
ng_bind         指令把应用程序变量 name 绑定到某个段落的 innerHTML。 指令
ng_model        指令把输入域的值绑定到应用程序变量 name。 指令
ng_click        定义元素被单击时的行为。 HTML 事件
ng_controller   为应用程序定义控制器对象。 控制器
ng_disabled     绑定应用程序数据到HTML的disabled 属性。HTML DOM
ng_init         为应用程序定义初始值（通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它）。 指令
ng_repeat       为控制器中的每个数据定义一个模板。 指令
ng_show         显示或隐藏 HTML 元素。 HTML DOM

当网页加载完毕，Angularjs 自动开启

<div ng-app=""> //ng-init 变量 <div ng-init="sex1='男'"> {{sex1}} //男 </div> //ng-init 与 data-ng-init 等价 <div data-ng-init="sex2='女'"> {{sex2}} //女 </div> //Angularjs 表达式 {{}} : 数字 <div ng-init="a=2; b=3"> {{a*b}} //6 </div> //字符串 <div ng-init="a='aa'; b='bb'"> {{a + b}} //aabb </div> //对象 <div ng-init="person={fristName:'json',lastName:'tom'}"> {{person.lastName}} //tom </div> //数组 <div ng-init="arr=[1,5,9,14]"> 第三个值为{{arr[2]}} //9 </div> </div>

Angular----入门

猜你在找的Angularjs相关文章