标签:type doc ast [] 扩展 rect round angularjs rank
18:28:34
AngularJS通过指令 扩展了HTML,并通过 表达式 绑定数据到HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div ng-app=""> <p>名字:<input type="text" ng-model="name"></p> <h1>Hello! {{name}}</h1> </div> <script src="../angular.min.js"></script> </body> </html>
当网页加载完毕,AngularJS 自动开启。
ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
指以ng为前缀作为HTML属性
如 ng-init (初始化Angular应用程序变量)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div ng-app="" ng-init="firstName=‘Frank‘"> <p>姓名为:<span ng-bind="firstName"></span> </p> </div> <script src="../angular.min.js"></script> </body> </html>
带有有效的 HTML5:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div ng-app="" data-ng-init="firstName=‘Frank‘"> <p>姓名为: <span data-ng-bind="firstName"></span> </p> </div> <script src="../angular.min.js"></script> </body> </html>
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div ng-app=""> {{5+2}} </div> <script src="../angular.min.js"></script> </body> </html>
AngularJS 模块(Module) 定义了 AngularJS 应用。
AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> 姓:<input type="text" ng-model="firstName"> 名: <input type="text" ng-model="lastName"> <br> 姓名: {{firstName+" "+lastName}} </div> <script src="../angular.min.js"></script> <script> //定义应用 var app=angular.module(‘myApp‘,[]); //控制应用 app.controller(‘myCtrl‘, function($scope){ $scope.firstName="Frank"; $scope.lastName="Music"; }); </script> </body> </html>
标签:type doc ast [] 扩展 rect round angularjs rank
原文地址:http://www.cnblogs.com/shabusi/p/6680182.html