angular 1 菜鸟教程
一、angular簡介
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。
AngularJS 是以一個 JavaScript 文件形式發布的，可通過 script 標簽添加到網頁中：
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>?
ng-app?指令定義一個 AngularJS 應用程序。
ng-model?指令把元素值（比如輸入域的值）綁定到應用程序。
ng-bind?指令把應用程序數據綁定到 HTML 視圖。
ng-init?指令初始化 AngularJS 應用程序變量。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app=""><p>名字 : <input type="text" ng-model="name"></p><h1>Hello {{name}}</h1> </div></body> </html> ng-model <div ng-app="" ng-init="firstName='John'"><p>姓名為 <span ng-bind="firstName"></span></p></div> ng-init?
HTML5 允許擴展的（自制的）屬性，以?data-?開頭。AngularJS 屬性以?ng-?開頭，但是您可以使用?data-ng-?來讓網頁對 HTML5 有效。
<div data-ng-app="" data-ng-init="firstName='John'"><p>姓名為 <span data-ng-bind="firstName"></span></p></div> data-ng?
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應用?
AngularJS 對象
AngularJS 對象就像 JavaScript 對象：
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓為 {{ person.lastName }}</p></div> AngularJS對象?
AngularJS 數組
AngularJS 數組就像 JavaScript 數組：
<div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三個值為 {{ points[2] }}</p></div> AngularJS數組?
AngularJS 表達式 與 JavaScript 表達式
類似于 JavaScript 表達式，AngularJS 表達式可以包含字母，操作符，變量。
與 JavaScript 表達式不同，AngularJS 表達式可以寫在 HTML 中。
與 JavaScript 表達式不同，AngularJS 表達式不支持條件判斷，循環及異常。
與 JavaScript 表達式不同，AngularJS 表達式支持過濾器。
?
重復 HTML 元素
ng-repeat?指令會重復一個 HTML 元素：
<div ng-app="" ng-init="names=['Jani','Hege','Kai']"><p>使用 ng-repeat 來循環數組</p><ul><li ng-repeat="x in names">{{ x }}</li></ul> </div> 重復Html元素?
轉載于:https://www.cnblogs.com/silence-maple/p/10090588.html
總結
以上是生活随笔為你收集整理的angular 1 菜鸟教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《老路用得上的商学课21—25》消费心理
- 下一篇： 探究人工智能辅助新时代心理学研究