因為項目需要最近在看 angularJS。angularJS 是一個前端的 JavaScript 框架截酷，AngularJS 使開發(fā)現單一頁面應用程序（SPAs：Single Page Applications）變得更加容易：
- AngularJS 把應用程序數據綁定到 HTML 元素迂苛。
- AngularJS 可以克隆和重復 HTML 元素三幻。
- AngularJS 可以隱藏和顯示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代碼抑堡。
- AngularJS 支持輸入驗證朗徊。
如果要開發(fā)的是單頁應用爷恳，AngularJS是不錯的選擇舌仍。類似Gmail、Google Docs灌曙、Twitter和Facebook這樣的應用在刺。但是如果像游戲開發(fā)之類對DOM進行大量操縱或者單純需要極高運行速度的應用头镊，AngularJS就不是一個很好的選擇了相艇。
angularJS 的指令
AngularJS通過ng-directives 擴展了 HTML，指令以ng-為前綴,如：
- ng-app 指令：定義一個 AngularJS 應用程序留储。
- ng-controller 指令定義了應用程序控制器获讳。
- ng-model 指令：把元素值（比如輸入域的值）綁定到應用程序活喊。
- ng-bind 指令：把應用程序數據綁定到 HTML 視圖。
- ng-init 指令：初始化應用程序數據偎肃。
- ng-hide 指令：隱藏或顯示 HTML 元素损晤。
- ng-form指令： HTML 表單繼承控制器表單尤勋。
angularJS的全部指令
angularJS 的表達式
AngularJS 表達式寫在雙大括號內：{{ expression }}最冰，可以把數據綁定到 HTML（這與 ng-bind 指令有異曲同工之妙）稀火，還可以在表達式書寫的位置"輸出"數據凰狞。同JavaScript 表達式一樣，AngularJS 表達式可以包含文字达布、運算符和變量黍聂。
如： {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
實例代碼：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="firstName='John';lastName='Jack'">
名: <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";
});
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
</body>
</html>
運行結果：
實例運行結果.PNG
應用解析：
- 1.由 ng-app 定義AngularJS 應用程序产还，應用程序在 <div> 內運行脐区。
- 2.ng-controller="myCtrl" 屬性是一個 AngularJS 指令牛隅。用于定義一個控制器尤溜，控制器控制著應用程序的業(yè)務邏輯宫莱。
- 3.myCtrl 函數是一個 JavaScript 函數。
- 4.AngularJS 使用$scope 對象來調用控制器巡验。
- 5.在 AngularJS 中显设， $scope 是一個應用對象(屬于應用變量和函數)捕捂。
- 6.控制器的 $scope （相當于作用域、控制范圍）用來保存AngularJS Model(模型)的對象慷妙。
- 7.控制器在作用域中創(chuàng)建了兩個屬性 (firstName 和 lastName)膝擂。
- 8.ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）隙弛。
簡單應用
下面就寫一個簡單的小應用全闷，運行結果如下：
目標代碼運行結果.PNG
主要功能為實現一個列表室埋，顯示一些個人信息，可以增刪改孕蝉，第一數列代表操作的行數降淮，一次之操作一行佳鳖。數據保存在js 的內存中媒惕，沒有數據庫的交互妒蔚。
首先要在html的<head> 標簽中導入使用的庫( Bootstrap 是一個用于快速開發(fā) Web 應用程序和網站的前端框架，提供了許多精美的界面以及組件科盛，使用非常方便贞绵，并且是開源的)：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>angular 練習</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="mycss.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="mytest.js"></script>
</head>
下面是布局：
布局分為3部分：
- 1 顯示列表的界面谴垫；
- 2 顯示添加數據的界面母蛛；
- 3 顯示修改數據的界面溯祸；
<div class="mytest" ng-app="myApp" ng-controller="myCtrl">
<!-- 增刪改三個按鈕-->
<div class="header">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a href="javascript:void(0)" ng-click="showAddItemModal()">添加</a>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span><a href="javascript:void(0)" ng-click="delItem()">刪除</a>
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span><a href="javascript:void(0)" ng-click="showEditItemModal()">修改</a>
</div>
<!-- 顯示數據的列表-->
<table class="table">
<thead>
<tr>
<th>select</th>
<th>id</th>
<th>name</th>
<th>gender</th>
<th>age</th>
<th>birth</th>
<th>hobby</th>
<th>team</th>
</tr>
</thead>
<tbody>
<!-- 此處的ng-repeat="list in datas" 會自動遍歷js文件中的datas（保存數據的數組），并顯示在html界面上-->
<tr class="datalist" ng-repeat="list in datas">
<td><input type="radio" value="{{$index}}" name="userid" ng-model="$parent.selected"/></td>
<td>{{$index+1}}</td>
<!--ng-bind="list.name" 該指令將js中的數據綁定椿胯，js文件中存儲的信息變化哩盲，會自動更新到html界面廉油，無需額外操作 -->
<td ng-bind="list.name"></td>
<td ng-bind="list.gener"></td>
<td ng-bind="list.age"></td>
<td ng-bind="list.birthday"></td>
<td ng-bind="list.hobby"></td>
<td ng-bind="list.team"></td>
</tr>
<tr ng-cloak ng-if="total == 0">
<td colspan=8>沒有查詢到匹配的數據信息</td>
</tr>
</tbody>
</table>
<!-- 添加數據的界面-->
<div class="modal" id="add_item_modal">
<!--bootstrap的模態(tài)框（Modal）插件抒线，默認是隱藏的-->
<div class="modal-dialog">
<div class="modal-content">
<!--bootstrap的模態(tài)框的標題-->
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
</button>
<h3 class="modal-title">添加信息</h3>
</div>
<!--bootstrap的模態(tài)框的主要內容-->
<div class="modal-body">
<span>姓名：</span>
<!-- ng-model 指令將input的數據和"add_name" 綁定嘶炭，在js文件中可使用$scope.add_name獲取到;將class賦值form-control可以使用bootstrap已經寫好的樣式-->
<input type="text" ng-model="add_name" class="form-control"><br>
<span>性別：</span>
<select name="" ng-model="add_gener" class="form-control">
<option value="男">男</option>
<option value="女">女</option>
<option value="其他" selected="selected">其他</option>
</select>
<span>年齡：</span>
<input type="number" ng-model="add_age" class="form-control" min="0" step="1"><br>
<span>生日：</span>
<input type="date" ng-model="add_birthday" class="form-control"><br>
<span>愛好：</span>
<input type="text" ng-model="add_hobby" class="form-control"><br>
<span>組別：</span>
<input type="text" ng-model="add_team" class="form-control"><br>
</div>
<!--bootstrap的模態(tài)框的按鈕部分 -->
<div class="modal-footer">
<!-- 將class="btn btn-default" 可以直接使用bootstrap的現成組件-->
<!-- data-dismiss="modal" 是按鈕觸發(fā)后關閉的畫面-->
<button class="btn btn-default" data-dismiss="modal">關閉</button>
<!-- ng-click="addItem()"是按鈕觸發(fā)后調用js文件中指定的函數-->
<button class="btn btn-success" ng-click="addItem()">確定</button>
</div>
</div>
</div>
</div>
<!--修改數據的界面抑进，默認是隱藏的-->
<div class="modal" id="edit_item_modal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
</button>
<h3 class="modal-title">修改信息</h3>
</div>
<div class="modal-body">
<span>姓名：</span>
<!--ng-model="edit_name" 將標簽與js文件對應數據綁定寺渗，便簽會自動顯示js文件對應信息-->
<input type="text" ng-model="edit_name" class="form-control" value="{{edit_name}}"><br>
<span>性別：</span>
<select name="" ng-model="edit_gener" class="form-control" value="{{edit_gener}}">
<option value="男">男</option>
<option value="女">女</option>
<option value="其他">其他</option>
</select><br>
<span>年齡：</span>
<input type="number" ng-model="edit_age" class="form-control" value="{{edit_age}}" min="0" step="1"><br>
<span>生日：</span>
<input type="date" ng-model="edit_birthday" class="form-control" value="{{edit_birthday}}"><br>
<span>愛好：</span>
<input type="text" ng-model="edit_hobby" class="form-control" value="{{edit_hobby}}"><br>
<span>組別：</span>
<input type="text" ng-model="edit_team" class="form-control" value="{{edit_team}}"><br>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">關閉</button>
<button class="btn btn-success" ng-click="modifyItem()">確定</button>
</div>
</div>
</div>
</div>
</div>
以下是angularJS的主要代碼：
(function(){
'use strict';
var myApp = angular.module('myApp', []);
//聲明控制器“myCtrl”
myApp.controller("myCtrl",function($scope, $http){
//保持數據的數組對象
$scope.datas=[
{'name':"王1",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
{'name':"王2",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
{'name':"王3",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
{'name':"王4",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
{'name':"王5",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
{'name':"王6",'gener':"男",'age':28,'birthday':"2012-02-01",'hobby':"tennis,football",'team':"team2"}
];
$scope.index=$scope.datas.length-1;
//顯示添加畫面
$scope.showAddItemModal = function(){
//通過標簽的 id 找到前面布局中隱藏的添加畫面匿情，并顯示出來
$('#add_item_modal').modal('show');
}
//添加數據
$scope.addItem = function(){
var i = $scope.datas.length;
$scope.datas[i]={
//通過$scope獲取html頁面中提交的表單中的數據
name:$scope.add_name,
gener:$scope.add_gener,
age:$scope.add_age,
birthday:$scope.add_birthday,
hobby:$scope.add_hobby,
team:$scope.add_team,
};
$('#add_item_modal').modal('hide');
};
//顯示修改畫面
$scope.showEditItemModal = function(){
if(isNaN($scope.selected)){
alert("請選擇要修改的項！")
}else{
$('#edit_item_modal').modal('show');
//此處的$scope.edit_name會將數據保存?zhèn)鹘ohtml界面户秤，并可以通過表達式直接獲取參數
$scope.edit_name = $scope.datas[$scope.selected].name;
$scope.edit_gener = $scope.datas[$scope.selected].gener;
$scope.edit_age = $scope.datas[$scope.selected].age;
$scope.edit_birthday = $scope.datas[$scope.selected].birthday;
$scope.edit_hobby = $scope.datas[$scope.selected].hobby;
$scope.edit_team = $scope.datas[$scope.selected].team;
}
};
//修改數據函數
$scope.modifyItem = function(){
$scope.datas[$scope.selected]={
name:$scope.edit_name,
//直接使用$scope.edit_gener 即可獲取html界面上的數據
gener:$scope.edit_gener,
age:$scope.edit_age,
birthday:$scope.edit_birthday,
hobby:$scope.edit_hobby,
team:$scope.edit_team,
};
$('#edit_item_modal').modal('hide');
};
//刪除所選項數據
$scope.delItem = function(){
if(isNaN($scope.selected) ){
alert("請選擇要刪除的項!");
}else{
if(confirm("是否刪除?") ){
$scope.datas.splice($scope.selected,1);
}
}
};
});
}());
總結
- angularJS 的功能和很強大码秉，這里只是使用的angularJS的雙向數據綁定數據，它還有許多其他的優(yōu)點鸡号，如模板转砖，路由，模塊化府蔗，服務，過濾器汞窗，依賴注入等等功能姓赤，以后還需要繼續(xù)學習；
- 示例中用到了許多bootstrap的東西仲吏，bootstrap也是一個功能很強大的前端框架不铆，他提供了豐富的布局模版以及精美的組件，使用起來也很方便裹唆，還是開源的誓斥。以后有機會可以單獨寫一篇文章。
- 由于項目需要许帐，所以接觸了一些關于前端的知識劳坑，現在也只是會做一些簡單的界面，有很多原理還是不懂成畦，將來想打算弄一個自己的網站距芬，總會用的到。
