Angularjs基礎(八)

時間 2019-11-16

原文原文鏈接

AngularJS Bootstrap
　　　　AngularJS 的首選樣式表是 Twitter Bootstrap ,Twitter Bootstrap 是目前最受歡迎的前端框架css

Bootstrap
　　　　你能夠在你的 AngularJS 應用中加入 Twitter Bootstrap，你能夠在你的 <head>元素中添加以下代碼:
　　　　<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
　　　　如下是一個完整的 HTML 實例, 使用了 AngularJS 指令和 Bootstrap 類。html

　　　<!DOCTYPE html>
　　　　<html>
　　　　　　<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
　　　　　　<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
　　　　　　<body ng-app="myApp" ng-controller="userCtrl">

　　　　　　<div class="container">

　　　　　　<h3>Users</h3>

　　　　　　<table class="table table-striped">
　　　　　　<thead><tr>
　　　　　　<th>Edit</th>
　　　　　　<th>First Name</th>
　　　　　　<th>Last Name</th>
　　　　　　</tr></thead>
　　　　　　<tbody><tr ng-repeat="user in users">
　　　　　　<td>
　　　　　　　　<button class="btn" ng-click="editUser(user.id)">
　　　　　　　　<span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
　　　　　　</button>
　　　　　　</td>
　　　　　　<td>{{ user.fName }}</td>
　　　　　　<td>{{ user.lName }}</td>
　　　　　　</tr></tbody>
　　　　　　</table>

　　　　　　<hr>
　　　　　　　　<button class="btn btn-success" ng-click="editUser('new')">
　　　　　　　　<span class="glyphicon glyphicon-user"></span> Create New User
　　　　　　</button>
　　　　　　<hr>

　　　　　　<h3 ng-show="edit">Create New User:</h3>
　　　　　　<h3 ng-hide="edit">Edit User:</h3>

　　　　　　<form class="form-horizontal">
　　　　　　<div class="form-group">
　　　　　　<label class="col-sm-2 control-label">First Name:</label>
　　　　　　<div class="col-sm-10">
　　　　　　<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
　　　　　　</div>
　　　　　　</div> 
　　　　　　<div class="form-group">
　　　　　　　　　　<label class="col-sm-2 control-label">Last Name:</label>
　　　　　　<div class="col-sm-10">
　　　　　　<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
　　　　　　</div>
　　　　　　</div>
　　　　　　<div class="form-group">
　　　　　　<label class="col-sm-2 control-label">Password:</label>
　　　　　　<div class="col-sm-10">
　　　　　　<input type="password" ng-model="passw1" placeholder="Password">
　　　　　　</div>
　　　　　　</div>
　　　　　　<div class="form-group">
　　　　　　<label class="col-sm-2 control-label">Repeat:</label>
　　　　　　<div class="col-sm-10">
　　　　　　<input type="password" ng-model="passw2" placeholder="Repeat Password">
　　　　　　</div>
　　　　　　</div>
　　　　　　</form>

　　　　　　<hr>
　　　　　　<button class="btn btn-success" ng-disabled="error || incomplete">
　　　　　　<span class="glyphicon glyphicon-save"></span> Save Changes
　　　　</button>
　　　　</div>

　　　　<script src = "myUsers.js"></script>
　　　　</body>
　　　　</html>

指令解析
　　　　　　<html ng-app > 　　　　　　　爲<html> 元素定義一個應用(未命名)
　　　　　　<body ng-controller> 　　　　爲<body>元素定義一個控制器
　　　　　　<tr ng-controller> 　　　　　　循環users 對象數組，每一個user 對象放在<tr>元素中
　　　　　　<button ng-click> 　　　　　　當點擊<button>元素時調用函數editUser()
　　　　　　<h3 ng-show> 　　　　　　　　若是edit = true 顯示<h3>元素
　　　　　　<h3 ng-hide> 　　　　　　　　若是edit = true 隱藏<h3>元素
　　　　　　<input ng-model> 　　　　　　爲應用程序綁定<input > 元素
　　　　　　<button ng-disabled> 　　　　若是發生錯誤或者ncoplete= true 禁用 <button>元素前端

Bootstrap 類解析
　　　　<div> 　　　　　　container 　　　　內容容器
　　　　<table> 　　　　　table 　　　　　　表格
　　　　<table> 　　　　　table-striped 　　帶條紋背景的表格
　　　　<button> 　　　　 btn 　　　　　　按鈕
　　　　<btton>　　　　　 btn-success 　　　成功按鈕
　　　　<span> 　　　　 glyphicon 字形圖標
　　　　<span> 　　 glyphicon-pencil 鉛筆圖標
　　　　<span> 　　　　 glyphicon-user 用戶圖標
　　　　<span> 　　　　 glyphicon-save 保存圖標
　　　　<form> 　　　　 form-horizontal 水平表格
　　　　<div> 　　　　　　form-group 表單組
　　　　<label> 　　　　 control-label 控制器標籤
　　　　<label> 　　　　 col-sm-2 跨越 2 列
　　　　<div> col-sm-10 跨越 10 列bootstrap

JavaScript 代碼數組

angular.module('myApp', []).controller('userCtrl', function($scope) {
　　　　$scope.fName = '';
　　　　$scope.lName = '';
　　　　$scope.passw1 = '';
　　　　$scope.passw2 = '';
　　　　$scope.users = [
　　　　　　　　　　　　　　{id:1, fName:'Hege', lName:"Pege" },
　　　　　　　　　　　　　　{id:2, fName:'Kim', lName:"Pim" },
　　　　　　　　　　　　　　{id:3, fName:'Sal', lName:"Smith" },
　　　　　　　　　　　　　　{id:4, fName:'Jack', lName:"Jones" },
　　　　　　　　　　　　　　{id:5, fName:'John', lName:"Doe" },
　　　　　　　　　　　　　　{id:6, fName:'Peter',lName:"Pan" }
　　　　　　　　　　];
　　　　$scope.edit = true;
　　　　$scope.error = false;
　　　　$scope.incomplete = false;

　　　　$scope.editUser = function(id) {
　　　　　　　　　　if (id == 'new') {
　　　　　　　　　　　　　　$scope.edit = true;
　　　　　　　　　　　　　　$scope.incomplete = true;
　　　　　　　　　　　　　　$scope.fName = '';
　　　　　　　　　　　　　　$scope.lName = '';
　　　　　　　　　　} else {
　　　　　　　　　　　　　　$scope.edit = false;
　　　　　　　　　　　　　　$scope.fName = $scope.users[id-1].fName;
　　　　　　　　　　　　　　$scope.lName = $scope.users[id-1].lName; 
　　　　　　　　　　　　}
　　　　　　};

　　　　　　$scope.$watch('passw1',function() {$scope.test();});
　　　　　　$scope.$watch('passw2',function() {$scope.test();});
　　　　　　$scope.$watch('fName', function() {$scope.test();});
　　　　　　$scope.$watch('lName', function() {$scope.test();});

　　　　　　$scope.test = function() {
　　　　　　　　　　　　if ($scope.passw1 !== $scope.passw2) {
　　　　　　　　　　　　　　　　　　$scope.error = true;
　　　　　　　　　　　　} else {
　　　　　　　　　　　　　　　　　　$scope.error = false;
　　　　　　　　}
　　　　　　　　$scope.incomplete = false;
　　　　　　　　if ($scope.edit && (!$scope.fName.length ||
　　　　　　　　　　　　　　!$scope.lName.length ||
　　　　　　　　　　!$scope.passw1.length || !$scope.passw2.length)) {
　　　　　　　　　　$scope.incomplete = true;
　　　　　　　　　　}
　　　　　　　　　　};

　　　　　　　　});

JavaScript 代碼解析
　　　　　　$scope.fName 　　　　模型變量(用戶名)
　　　　　　$scope.IName 　　　　模型變量(用戶姓)
　　　　　　$scope.passw1 　　　　模型變量(用戶密碼1)
　　　　　　$scope.passw2 　　　　模型變量(用戶密碼2)
　　　　　　$scope.users 　　　　　模型變量(用戶的數組)
　　　　　　$scope.edit 　　　　　　當用戶點擊建立用戶時設置爲true。
　　　　　　$scope.error 　　　　　　若是passw1 不等於passw2置爲true。
　　　　　　$scope.incomplete 　　　　若是每一個字段都爲空(length = 0)設置爲 true
　　　　　　$scope.editUser 　　　　設置模型變量
　　　　　　$scope.watch 　　　　　　監控模型變量
　　　　　　$scope.test 　　　　　　驗證模型變量的錯誤和完整性前端框架

AngularJS 包含
　　　　在AngularJS 中，你能夠在HTML中包含HTML文件。app

　　　　在HTML中包含HTML 文件
服務端包含
　　　　大多服務腳本都支持包含文件功能框架

客戶端包含
　　　　經過 JavaScript 有不少種方式能夠在 HTML 中包含 HTML 文件。
　　　　一般咱們使用 http 請求 (AJAX) 從服務端獲取數據，返回的數據咱們能夠經過使用 innerHTML 寫入到 HTML 元素中。ide

　　　<div class="container">
　　　　　　　　<div ng-include="'myUsers_List.htm'"></div>
　　　　　　　　<div ng-include="'myUsers_Form.htm'"></div>
　　　　</div>

建立 HTML 列表函數

　<table class="table table-striped">
　　　　　　<thead><tr>
　　　　　　<th>Edit</th>
　　　　　　<th>First Name</th>
　　　　　　<th>Last Name</th>
　　　　　　</tr></thead>
　　　　　　<tbody><tr ng-repeat="user in users">
　　　　　　<td>
　　　　　　　　<button class="btn" ng-click="editUser(user.id)">
　　　　　　　　<span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
　　　　　　</button>
　　　　　　</td>
　　　　　　<td>{{ user.fName }}</td>
　　　　　　<td>{{ user.lName }}</td>
　　　　　　</tr></tbody>
　　　　</table>

AngularJS 動畫
　　　　AngularJS 提供了動畫效果，能夠配合css 使用
　　　　AngularJS 使用動畫須要引入angular-animate.min.js

　　　　<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

　　　　還須要在應用中使用模型 ngAnimate:

　　　　<body ng-app="ngAnimate">

什麼是動畫？
　　　　動畫是經過改變HTML元素產生的動態變化效果。
　　　　勾選複選框隱藏DIV 實例：

　　　　<body ng-app="ngAnimate">
　　　　　　　　隱藏DIV <input type="checkbox" ng-model="myCheck">
　　　　　　　　<div ng-hide="myCheck"></div>
　　　　</body>

　　　　應用中動畫不宜太多，但合適的使用動畫能夠增長頁面的豐富性，也能夠更易讓用戶理解。

ngAnimate 作了什麼？
　　　　ngAnimate模型能夠添加或移除calss.
　　　　ngAnimate 模型並不能使用HTML 元素產生動畫，可是ngAnimate 會檢測事件，相似隱藏顯示HTML元素
　　　　若是事件發生ngAnimate 就會使用預約義的class來設置HTML元素的動畫。
　　　　　　AngularJS 添加/移除class指令
　　　　　　　　ng-shwo
　　　　　　　　ng-hide
　　　　　　　　ng-class
　　　　　　　　ng-view
　　　　　　　　ng-include
　　　　　　　　ng-repeat
　　　　　　　　ng-if
　　　　　　　　ng-switch
　　　　ng-show 和 ng-hide 指令用於添加或移除 ng-hide class 的值。
　　　　其餘指令會在進入 DOM 會添加 ng-enter 類，移除 DOM 會添加 ng-leave 屬性。
　　　　當 HTML 元素位置改變時，ng-repeat 指令一樣能夠添加 ng-move 類。
　　　　此外，在動畫完成後，HTML 元素的類集合將被移除。例如： ng-hide 指令會添加一下類：
　　　　ng-animate
　　　　　　　　ng-hide-animate
　　　　　　　　ng-hide-add (若是元素將被隱藏)
　　　　　　　　ng-hide-remove (若是元素將顯示)
　　　　　　　　ng-hide-add-active (若是元素將隱藏)
　　　　　　　　ng-hide-remove-active (若是元素將顯示)

使用CSS動畫
　　　　　　咱們可使用 CSS transition(過渡) 或 CSS 動畫讓 HTML 元素產生動畫效果，

CSS過渡
　　　　　　CSS 過渡可讓咱們平滑的將一個 CSS 屬性值修改成另一個：
　　　　　　　　實例：

　　　　　　　　<style>
　　　　　　　　　　　　　　div {
　　　　　　　　　　　　　　　　　　transition:all linear 0.5s;
　　　　　　　　　　　　　　　　　　background-color:lightblue;
　　　　　　　　　　　　　　　　　　height:100px
　　　　　　　　　　　　　　}
　　　　　　　　　　　　.ng-hide{
　　　　　　　　　　　　　　　　　　height:0;
　　　　　　　　　　　　}
　　　　　　　　</style>

css 動畫
　　　　CSS 動畫容許你平滑的修改 CSS 屬性值:
　　　　在 DIV 元素設置了 .ng-hide 類時, myChange 動畫將執行，它會平滑的將高度從 100px 變爲 0:

　　　　<style>
　　　　　　@keyframes myChange {
　　　　　　　　　　from {
　　　　　　　　　　　　　　height: 100px;
　　　　　　　　　　　　} to {
　　　　　　　　　　　　　　height: 0;
　　　　　　　　　　　　}
　　　　　　　　}
　　　　　　div {
　　　　　　　　　　height: 100px;
　　　　　　　　　　background-color: lightblue;
　　　　　　}
　　　　　　div.ng-hide {
　　　　　　　　　　　　animation: 0.5s myChange;
　　　　　　}
　　　　</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。