angular 1 菜鳥教程

時間 2019-11-11

原文原文鏈接

1、angular簡介html

AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。數組

AngularJS 是以一個 JavaScript 文件形式發佈的，可經過 script 標籤添加到網頁中：app

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

ng-app 指令定義一個 AngularJS 應用程序。框架

ng-model 指令把元素值（好比輸入域的值）綁定到應用程序。ide

ng-bind 指令把應用程序數據綁定到 HTML 視圖。spa

ng-init 指令初始化 AngularJS 應用程序變量。3d

<!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 有效。code

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

data-ng

AngularJS 應用

AngularJS 模塊（Module） 定義了 AngularJS 應用。cdn

AngularJS 控制器（Controller） 用於控制 AngularJS 應用。htm

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>