angularJS入門小demo
阿新 • • 發佈：2018-12-19
要想使用 angularJS , 需要在頭部引入 angular.min.js 檔案 <script src="angular.min.js"></script> .
demo-01 - 表示式 :
<html> <head> <title>入門小Demo-01 - 表示式</title> <script src="angular.min.js"></script> </head> <body ng-app> {{100+100}} </body> </html>
執行結果將展示在頁面: 100
demo-02 - 雙向繫結 :
<html> <head> <title>demo-02 - 雙向繫結</title> <script src="angular.min.js"></script> </head> <body ng-app > 請輸入姓名:<input ng-model="name"><br> 請輸入年齡:<input ng-model="age"><br> 姓名+年齡:{{name}}+{{age}} </body> </html>
執行時, 分別輸入 姓名 和 年齡 可進行字串拼接
demo-03 - 初始化指令 :
<html> <head> <title>demo-03 - 初始化指令</title> <script src="angular.min.js"></script> </head> <body ng-app ng-init="name='張三'"> 請輸入姓名:<input ng-model="name"><br> 請輸入年齡:<input ng-model="age"><br> 姓名+年齡:{{name}}+{{age}} </body> </html>
執行時, 姓名輸入框中會有之前定義的預設初始值
demo-04 - 控制器 :
<html>
<head>
<title>demo-04 - 控制器</title>
<script src="angular.min.js"></script>
<script>
//建立模組
var app = angular.module("myApp", []);
//建立控制器 $scope 控制層與檢視層之間交換資料的橋樑
app.controller("myController",function($scope){
$scope.add = function(){
return parseInt($scope.x) + parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
第一個數:<input ng-model="x"><br>
第二個數:<input ng-model="y"><br>
結果:{{add()}}
</body>
</html>執行時, 輸入兩個數字的結果會自動顯示出來
demo-05 - 事件指令 :
<html>
<head>
<title>demo-05 - 事件指令</title>
<script src="angular.min.js"></script>
<script>
//建立模組
var app = angular.module("myApp", []);
//建立控制器 $scope 控制層與檢視層之間交換資料的橋樑
app.controller("myController",function($scope){
$scope.add = function(){
$scope.z = parseInt($scope.x) + parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
第一個數:<input ng-model="x"><br>
第二個數:<input ng-model="y"><br>
<button ng-click="add()">運算</button><br>
結果:{{z}}
</body>
</html>給"運算"新增單擊事件, 執行時, 點選"運算", 結果處才會顯示輸入兩個數字的結果
demo-06 - 迴圈陣列 :
<html>
<head>
<title>demo-06 - 迴圈陣列</title>
<script src="angular.min.js"></script>
<script>
//建立模組
var app = angular.module("myApp", []);
//建立控制器 $scope 控制層與檢視層之間交換資料的橋樑
app.controller("myController",function($scope){
$scope.list = [100,200,300,400,500,600,700,800,900];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>執行時, list 陣列中的結果將會迴圈顯示出來
demo-07 - 迴圈陣列物件 :
<html>
<head>
<title>demo-07 - 迴圈物件陣列</title>
<script src="angular.min.js"></script>
<script>
//建立模組
var app = angular.module("myApp", []);
//建立控制器 $scope 控制層與檢視層之間交換資料的橋樑
app.controller("myController",function($scope){
$scope.list = [
{name:'張三',age:18,gender:'男',birthday:'1999-10-21'},
{name:'李四',age:21,gender:'男',birthday:'1996-08-15'},
{name:'劉美',age:22,gender:'女',birthday:'1995-12-12'},
{name:'姜芯',age:19,gender:'女',birthday:'2000-10-13'},
{name:'王五',age:16,gender:'男',birthday:'2003-02-14'},
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>生日</td>
</tr>
<tr ng-repeat="student in list">
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td>{{student.gender}}</td>
<td>{{student.birthday}}</td>
</tr>
</table>
</body>
</html>執行時, list 陣列中的物件將會迴圈顯示出來