摘要:AngularJS環境建置與線上即可編輯
一：線上可練習：http://jsbin.com/fanabigudijo/3/edit
二：本機使用檔案練習：import angular.js
1：home.html
==============================================================================================
<!DOCTYPE html>
<html ng-app="CalApp">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body>
<SCRIPT language=JavaScript src="angular.js"></SCRIPT>
<form class="span5 form-inline" style="margin-top:20px;" ng-controller="CalCtrl">
<div class="alert alert-info">
<input type="number" class="input-small" ng-model="num1">
<span>*</span>
<input type="number" class="input-small"ng-model="num2" disabled>
<span>=</span>
{{ num1 * num2}}
</div>
</form>
<br><br><br>
<hr>
<div class="well span6" ng-controller="PersonCtrl">
<label>Name:</label>
<input type="text" ng-model="name" placeholder="Enter a name here">
<br>
<label>Age:</label>
<input type="text" ng-model="age" placeholder="Enter a number here">
<hr>
<h1>{{ name }}</h1>
<h2>{{ age }}</h2>
</div>
</body>
</body>
</html>
2：angular.js
==========================================================================
var calApp = angular.module('CalApp', []);
calApp.controller('CalCtrl', function($scope){
$scope.num1 = 0;
$scope.num2 = 5;
});
calApp.controller('PersonCtrl', function($scope){
$scope.name = '男丁格爾';
$scope.age = 18;
});
