angular入門（基礎篇）
阿新 • • 發佈：2017-06-29
頁面 anti uno itl func obd 作用域 input name
一、什麽是AngularJs？
AngularJs是一個JavaScript框架，通過指令擴展了HTML,並且通過表達式綁定數據到HTML.
AngularJs使得開發現代的單頁面應用程序(SPA:Single Page Applications)變得更加簡單，並且其避免了js中的DOM操作，使得加載速度大大加快。
二、Angular入手模板框架搭建
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app = "app" ng-controller=‘myVC‘>
</body>
<script>
var app = angular.module(‘app‘,[]).controller(‘myVC‘,function($scope){};
</script>
</html>
AngularJS 模塊（Module） 定義了 AngularJS 應用。
AngularJS 控制器（Controller） 用於控制 AngularJS 應用。
ng-app指令定義了應用,也就是angular指令有效的作用域, ng-controller 定義了控制器，一個作用域內可以定義多個控制器。
三、Angular常用指令及用法
ng-app 指令初始化一個 AngularJS 應用程序。
ng-init 指令初始化應用程序數據：
<div ng-app="" ng-init="names=[‘Jani‘,‘Hege‘,‘Kai‘]"> </div>
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序，{{ name }} 是通過 ng-model="name" 進行同步。
<input type="number" ng-model="quantity">
<p>{{quantity}}</p>
ng-repeat 指令會重復一個 HTML 元素：
<li ng-repeat="x in names">
{{ x }}
</li>
.directive 函數來添加自定義的指令:
註：使用駝峰法來命名一個指令， runoobDirective
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定義指令!</h1>"
};
});
</script>
angular入門（基礎篇）