AngularJS小練習

最後更新：2017-05-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：驗證過 hold ant 表單服務 ejs dash var select

首先可能需要安裝npm,並且配置環境.

1.開啟Dos(命令提示字元).按Windows徽標鍵+R按鍵組合,輸入cmd然後按斷行符號鍵進入Dos.

2.安裝Yeoman.在Dos下輸入npm install -g yo.

3.安裝Grunt.在Dos下輸入npm install -g grunt-cli.

4.安裝Bower.在Dos下輸入npm install -g bower.

5.安裝Generator-angular的0.9.8版本.在Dos下輸入npm install -g [email protected]

6.安裝Generator-karma.在Dos下輸入npm install -g generator-karma.

7.安裝Angular-strap.在Dos下輸入npm install -g angular-strap.

8.安裝Bootstrap.在Dos下輸入npm install -g bootstrap.

9.進入AngularJs的專案檔夾,我的是:D:\AngularJsItem,在這裡建立TemplateItem檔案夾.然後在Dos下進入檔案夾,先輸入d:斷行符號,先複製路徑,然後輸入cd+空白+滑鼠右鍵粘貼,然後斷行符號,再輸入yo angular TemplateItem,按使用者要求自動產生項目.第一個問題是:Would you like to use Sass(With Compass)?這個輸入n然後斷行符號就好.暫時沒用上.

第二個問題是:Would you like to include Bootstrap?輸入y然後斷行符號,因為項目之後要使用BootStrap.第三個問題是:Which modules would you like to include?(Press <space> to select)... .這個選中全部,然後按斷行符號就好了(如果前面括弧裡面有*,就是已選中狀態).

10.如果缺少以片中的檔案夾.需要將這些也安裝.在Dos下輸入npm install -g 檔案夾名稱.缺少哪個就安裝哪個.

11.接下來在項目裡面添加bower_components檔案夾,如果有就不用建立.直接到npm目錄,我的是D:\NodeJs\Install\node_global.-g都是安裝到這個目錄.找到node_modules目錄,將裡面的檔案夾複製到bower_components目錄下.

12.在項目添加一個app檔案夾(和bower_components同級),如果有就直接在app目錄下建立檔案夾bootstrap,然後在bootstrap下面建立index.html檔案.

下面是我的index.html的頁面代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="../../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
</head>
<body ng-app="userApp">
　　<stk-userlist-panel></stk-userlist-panel>

　　<script src = "../../bower_components/jquery/dist/jquery.js"></script>
　　<script src = "../../bower_components/angular/angular.js"></script>
　　<script src = "../../bower_components/angular-animate/angular-animate.js"></script>
　　<script src = "../../bower_components/angular-cookies/angular-cookies.js"></script>
　　<script src = "../../bower_components/angular-resource/angular-resource.js"></script>
　　<script src = "../../bower_components/angular-route/angular-route.js"></script>
　　<script src = "../../bower_components/angular-sanitize/angular-sanitize.js"></script>
　　<script src = "../../bower_components/angular-touch/angular-touch.js"></script>
　　<script src = "../../bower_components/angular-strap/dist/angular-strap.js"></script>
　　<script src = "../../bower_components/lodash/dist/lodash.js"></script>
　　<script type="text/javascript">
　　　　var app = angular.module(‘userApp‘, [
　　　　　　‘ngAnimate‘,
　　　　　　‘ngCookies‘,
　　　　　　‘ngResource‘,
　　　　　　‘ngRoute‘,
　　　　　　‘ngSanitize‘,
　　　　　　‘ngTouch‘,
　　　　　　‘mgcrea.ngStrap‘
　　　　]);

　　　　app.service(‘userService‘, function userService() {
　　　　// AngularJS will instantiate a singleton by calling "new" on this function
　　　　//1輔助方法: 從localStorage中載入監視列表
　　　　var loadModel = function(){
　　　　　　var model = {
　　　　　　　　userList: localStorage[‘userManager.userList‘] ?
　　　　　　　　JSON.parse(localStorage[‘userManager.userList‘]) : []
　　　　　　};
　　　　　　return model;
　　　　};

　　　　//2輔助方法: 將監視列表儲存到localStorage中
　　　　var saveModel = function(){
　　　　　　localStorage[‘userManager.userList‘] =
　　　　　　JSON.stringify(Model.userList);
　　　　};

　　　　//3輔助方法: 使用lodash找到指定ID的監視列表
　　　　var findById = function(cid){
　　　　　　　　return _.find(Model.userList, function(user){
　　　　　　　　return parseInt(user.cid) === parseInt(cid);
　　　　　　});
　　　　};

　　　　//4輔助方法:以編號尋找編號是否存在,因為編號是來標誌對象的(唯一的)
　　　　var findIndexByCid = function(cid){
　　　　　　var index = -1;
　　　　　　var userArr = JSON.parse(localStorage[‘userManager.userList‘]);
　　　　　　for(var i = 0; i < userArr.length; i++){
　　　　　　　　if(parseInt(userArr[i].cid) === parseInt(cid)){
　　　　　　　　　　index = i;
　　　　　　　　　　break;
　　　　　　　　}
　　　　　　}
　　　　　　return index;
　　　　}

　　　　//4返回所有監視列表或者按指定的ID進行尋找
　　　　this.query = function(cid){
　　　　　　if(cid){
　　　　　　　　return findById(cid);
　　　　　　}else{
　　　　　　　　return Model.userList;
　　　　　　}
　　　　};

　　　　//5在監視列表模型中儲存一個新的監視列表
　　　　this.save = function(user){
　　　　　　if(findIndexByCid(user.cid) > 0){
　　　　　　　　alert(‘編號已存在,編號是唯一的,請換一個編號!‘);
　　　　　　　　return ‘failed‘;
　　　　　　}else{
　　　　　　　　Model.userList.push(user);
　　　　　　　　saveModel();
　　　　　　　　return ‘success‘;
　　　　　　}
　　　　};

　　　　//6從監視列表模型中移除指定的監視列表
　　　　this.remove = function(user){
　　　　　　_.remove(Model.userList, function(userModel){
　　　　　　return userModel.cid === user.cid;
　　　　});
　　　　　　saveModel();
　　　　};

　　　　//修改方法
　　　　this.update = function(user){
　　　　　　var userArr = JSON.parse(localStorage[‘userManager.userList‘]);
　　　　　　var index = findIndexByCid(user.cid);
　　　　　　userArr[index] = user;
　　　　　　saveModel();
　　　　}

　　　　//7為這個單例服務初始化模型
　　　　var Model = loadModel();
　　　　});

　　　　//指令
　　　　app.directive(‘stkUserlistPanel‘, function ($location, $modal, userService) {
　　　　return {
　　　　　　templateUrl: ‘templates/userlist-panel.html‘,
　　　　　　restrict: ‘E‘,
　　　　　　cache: false,
　　　　　　scope: {},
　　　　　　link: function($scope){
　　　　　　//2初始設定變數
　　　　　　$scope.user = {};

　　　　　　//添加頁面
　　　　　　var addListModal = $modal({
　　　　　　　　scope: $scope,
　　　　　　　　templateUrl: ‘templates/addlist-modal.html‘,
　　　　　　　　show: false
　　　　　　});

　　　　　　//修改頁面
　　　　　　var updateListModal = $modal({
　　　　　　　　scope: $scope,
　　　　　　　　templateUrl: ‘templates/updatelist-modal.html‘,
　　　　　　　　show: false
　　　　　　});

　　　　　　//3將服務中的模型繫結到該範圍
　　　　　　$scope.userList = userService.query();

　　　　　　//4顯示addlist modal
　　　　　　$scope.showModal = function(){
　　　　　　$scope.user = {};
　　　　　　　　addListModal.$promise.then(addListModal.show);
　　　　　　};

　　　　　　//5根據模態框中的欄位建立一個新的列表
　　　　　　$scope.createUser = function(){
　　　　　　　　var status = userService.save($scope.user);
　　　　　　　　if(status == ‘success‘){
　　　　　　　　　　addListModal.hide();
　　　　　　　　　　$scope.user = {};
　　　　　　　　}
　　　　　　};

　　　　　　//6刪除目標列表並重新導向至首頁
　　　　　　$scope.deleteList = function(user){
　　　　　　　　userService.remove(user);
　　　　　　　　$location.path(‘/‘);
　　　　　　};

　　　　　　//進入修改頁面的函數
　　　　　　$scope.showUpdateModal = function(user){
　　　　　　　　$scope.user = user;
　　　　　　　　updateListModal.$promise.then(updateListModal.show);
　　　　　　}

　　　　　　//修改的函數
　　　　　　$scope.updateUser = function(user){
　　　　　　　　userService.update(user);
　　　　　　　　updateListModal.hide();
　　　　　　};
　　　　}
　　};
});

</script>
</body>
</html>

13.在bootstrap下建立一個檔案夾templates,在裡面建立三個html檔案.

userlist-panel.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>userlist-panel</title>
<style>

</style>
</head>
<body>
　　<div class = "panel panel-info">
　　　　<div class = "panel-heading">
　　　　　　<span class = "glyphicon glyphicon-eye-open"></span>
　　　　　　UserList
　　　　　　
　　　　　　<button type = "button"
　　　　　　　　class = "btn btn-success btn-xs pull-right"
　　　　　　　　ng-click = "showModal();"
　　　　　　>
　　　　　　　　<span class = "glyphicon glyphicon-plus"></span>
　　　　　　</button>
　　　　</div>

　　　　<div class = "panel-body">
　　　　　　
　　　　　　<div ng-if = "!userList.length" class = "text-center">
　　　　　　　　Use
　　　　　　　　<span class = "glyphicon glyphicon-plus">
　　　　　　　　</span>
　　　　　　　　　　to create a user
　　　　　　</div>

　　　　　　<div class = "list-group">
　　　　　　　　

　　　　　　　　<div class="list-group-item"
　　　　　　　　　　ng-repeat = "u in userList track by $index">

　　　　　　　　　　<a ng-click = "showUpdateModal(u);">
　　　　　　　　　　　　{{ u.cid }}
　　　　　　　　　　</a>

　　　　　　　　　　<a ng-click = "showUpdateModal(u);">
　　　　　　　　　　　　{{ u.name }}
　　　　　　　　　　</a>

　　　　　　　　　　<a ng-click = "showUpdateModal(u);">
　　　　　　　　　　　　{{ u.description }}
　　　　　　　　　　</a>

　　　　　　　　　　<a>
　　　　　　　　　　　　
　　　　　　　　　　　　<button type = "button" class = "close"
　　　　　　　　　　　　　　ng-click = "deleteList(u);"
　　　　　　　　　　　　>
　　　　　　　　　　　　　　×
　　　　　　　　　　　　</button>
　　　　　　　　　　</a>

　　　　　　　　</div>

　　　　　　</div>

　　　　</div>

　　</div>
</body>
</html>

addlist-modal.html檔案代碼:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addlist-modal</title>
<style>

</style>
</head>
<body>
　　<div class = "modal" tabindex = "-1" role = "dialog">
　　　　<div class = "modal-dialog">
　　　　　　<div class = "modal-content">
　　　　　　　　<div class = "modal-header">
　　　　　　　　　　
　　　　　　　　　　<button type = "button" class = "close"
　　　　　　　　　　　　ng-click = "$hide();"
　　　　　　　　　　>
　　　　　　　　　　　　×
　　　　　　　　　　</button>

　　　　　　　　　　<h4 class = "modal-title">
　　　　　　　　　　　　Create New User
　　　　　　　　　　</h4>
　　　　　　　　</div>

　　　　　　　　
　　　　　　　　<form role = "form" id = "add-user" name = "listForm">
　　　　　　　　　　<div class = "modal-body">

　　　　　　　　　　　　<div class = "form-group">
　　　　　　　　　　　　　　<label for = "user-name">
　　　　　　　　　　　　　　　　編號
　　　　　　　　　　　　　　</label>

　　　　　　　　　　　　　　
　　　　　　　　　　　　　　<input type = "text"
　　　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　　　id = "user-cid"
　　　　　　　　　　　　　　　　placeholder = "cid this user"
　　　　　　　　　　　　　　　　ng-model = "user.cid"
　　　　　　　　　　　　　　　　required
　　　　　　　　　　　　　　/>
　　　　　　　　　　　　</div>

　　　　　　　　　　　　<div class = "form-group">
　　　　　　　　　　　　　　<label for = "user-name">
　　　　　　　　　　　　　　　　姓名(暱稱)
　　　　　　　　　　　　　　</label>

　　　　　　　　　　　　
　　　　　　　　　　　　<input type = "text"
　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　id = "user-name"
　　　　　　　　　　　　　　placeholder = "name this user"
　　　　　　　　　　　　　　ng-model = "user.name"
　　　　　　　　　　　　　　required
　　　　　　　　　　　　/>
　　　　　　　　　　</div>

　　　　　　　　　　<div class = "form-group">
　　　　　　　　　　　　<label for = "user-description">
　　　　　　　　　　　　　　描述
　　　　　　　　　　　　</label>

　　　　　　　　　　　　
　　　　　　　　　　　　<input type = "text"
　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　id = "user-description"
　　　　　　　　　　　　　　maxlength = "40"
　　　　　　　　　　　　　　placeholder = "description this user"
　　　　　　　　　　　　　　ng-model = "user.description"
　　　　　　　　　　　　　　required
　　　　　　　　　　　　/>
　　　　　　　　　　</div>

　　　　　　　　</div>

　　　　　　　　<div class = "modal-footer">
　　　　　　　　　　
　　　　　　　　　　<button type = "submit"
　　　　　　　　　　　　class = "btn btn-success"
　　　　　　　　　　　　ng-click = "createUser();"
　　　　　　　　　　　　ng-disabled = "!listForm.$valid"
　　　　　　　　　　>
　　　　　　　　　　　　Create
　　　　　　　　　　</button>

　　　　　　　　　　<button type = "button"
　　　　　　　　　　　　class = "btn btn-danger"
　　　　　　　　　　　　ng-click = "$hide();"
　　　　　　　　　　>
　　　　　　　　　　　　Cancel
　　　　　　　　　　</button>
　　　　　　　　</div>
　　　　　　</form>
　　　　</div>
　　</div>
</div>
</body>
</html>

updatelist-modal.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>updatelist-modal</title>
<link href="../../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
<style>

</style>
</head>
<body>
　　<div class = "modal" tabindex = "-1" role = "dialog">
　　　　<div class = "modal-dialog">
　　　　　　<div class = "modal-content">
　　　　　　　　<div class = "modal-header">
　　　　　　　　　　
　　　　　　　　　　<button type = "button" class = "close"
　　　　　　　　　　　　ng-click = "$hide();"
　　　　　　　　　　>
　　　　　　　　　　　　×
　　　　　　　　　　</button>

　　　　　　　　　　<h4 class = "modal-title">
　　　　　　　　　　　　Update Old User
　　　　　　　　　　</h4>
　　　　　　　　</div>

　　　　　　　　
　　　　　　　　<form role = "form" id = "add-user" name = "listForm">
　　　　　　　　　　<div class = "modal-body">

　　　　　　　　　　　　<div class = "form-group">
　　　　　　　　　　　　　　<label for = "user-name">
　　　　　　　　　　　　　　　　編號
　　　　　　　　　　　　　　</label>

　　　　　　　　　　　　　　
　　　　　　　　　　　　　　<input type = "text"
　　　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　　　id = "user-cid"
　　　　　　　　　　　　　　　　placeholder = "cid this user"
　　　　　　　　　　　　　　　　ng-model = "user.cid"
　　　　　　　　　　　　　　　　ng-disabled="true"
　　　　　　　　　　　　　　　　required
　　　　　　　　　　　　　　/>
　　　　　　　　　　　　</div>

　　　　　　　　　　　　<div class = "form-group">
　　　　　　　　　　　　　　<label for = "user-name">
　　　　　　　　　　　　　　　　姓名(暱稱)
　　　　　　　　　　　　　　</label>

　　　　　　　　　　　　　　
　　　　　　　　　　　　　　<input type = "text"
　　　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　　　id = "user-name"
　　　　　　　　　　　　　　　　placeholder = "name this user"
　　　　　　　　　　　　　　　　ng-model = "user.name"
　　　　　　　　　　　　　　　　required
　　　　　　　　　　　　　　/>
　　　　　　　　　　　　</div>

　　　　　　　　　　　　<div class = "form-group">
　　　　　　　　　　　　　　<label for = "user-description">
　　　　　　　　　　　　　　　　描述
　　　　　　　　　　　　　　</label>

　　　　　　　　　　　　　　
　　　　　　　　　　　　　　<input type = "text"
　　　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　　　id = "user-description"
　　　　　　　　　　　　　　　　maxlength = "40"
　　　　　　　　　　　　　　　　placeholder = "description this user"
　　　　　　　　　　　　　　　　ng-model = "user.description"
　　　　　　　　　　　　　　　　required
　　　　　　　　　　　　　　/>
　　　　　　　　　　　　</div>

　　　　　　　　　　</div>

　　　　　　　　　　<div class = "modal-footer">
　　　　　　　　　　　　
　　　　　　　　　　　　<button type = "submit"
　　　　　　　　　　　　　　class = "btn btn-success"
　　　　　　　　　　　　　　ng-click = "updateUser(user);"
　　　　　　　　　　　　　　ng-disabled = "!listForm.$valid"
　　　　　　　　　　　　>
　　　　　　　　　　　　　　Update
　　　　　　　　　　　　</button>

　　　　　　　　　　　　<button type = "button"
　　　　　　　　　　　　　　class = "btn btn-danger"
　　　　　　　　　　　　　　ng-click = "$hide();"
　　　　　　　　　　　　>
　　　　　　　　　　　　　　Cancel
　　　　　　　　　　　　</button>
　　　　　　　　　　</div>
　　　　　　　　</form>
　　　　　　</div>
　　　　</div>
　　</div>
</body>
</html>

最後的:

AngularJS小練習

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

AngularJS小練習

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support