AnguelarJS學習筆記

觀看極客學院Angular學習視頻，做了如下筆記。
Angular菜鳥教程，AngularJS教程，AngularJS中文網中也有較詳細教程，可以仔細閱讀學習下。

一、入門

1. AngularJS簡介

AngularJS誕生於2009年，由Misko Hevery 等人創建，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。它可通過<script> 標籤添加到 HTML 頁面。
AngularJS 通過指令擴展了 HTML，且通過 表達式 綁定數據到 HTML。
AngularJS 是以一個 JavaScript 文件形式發佈的，可通過 script 標籤添加到網頁中。

2. 第一個AngularJS web 應用
->引入angular.js文件使用ng-app指令聲明AngularJS管理邊界。
->AngularJS雙向綁定簡單使用
雙大括號{{}}
->常用指令的演示
ng-model，ng-bind

<!DOCTYPE html>
<html lang="en" ng-app="todoList">//
<head>
    <meta charset="UTF-8">
    <title>todoList</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px" ng-controller="TaskCtrl">
<div class="input-group">
    <input type="text" class="form-control" ng-model="task">
    <span class="input-group-btn">
        <button class="btn btn-default" ng-click="add()">提交</button>
    </span>
</div>
<h4 ng-if="tasks.length>0">任務列表</h4>
<ul class="list-group">
    <li class="list-group-item" ng-repeat="item in tasks track by $index">
        {{item}}
        <a ng-click="tasks.splice($index,1)">刪除</a>
    </li>
</ul>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
    angular.module('todoList',[])//聲明
            .controller('TaskCtrl',function($scope){//控制器
                $scope.task='';
                $scope.tasks=[];
                $scope.add=function(){
                    $scope.tasks.push($scope.task);
                }
            })
</script>
</body>
</html>

ng-app指令聲明AngularJS的管理邊界。

二、進階（1）

1. MVC的設計與搭建

->Model（模型）表示應用程序核心（比如數據庫記錄列表）。
->View（視圖）顯示數據（數據庫記錄）。
->Controller（控制器）處理輸入（寫入數據庫記錄）。

Model（模型）是應用程序中用於處理應用程序數據邏輯的部分。通常模型對象負責在數據庫中存取數據。
View（視圖）是應用程序中處理數據顯示的部分。通常視圖是依據模型數據創建的。
Controller（控制器）是應用程序中處理用戶交互的部分。通常控制器負責從視圖讀取數據，控制用戶輸入，並向模型發送數據。

MVC 分層有助於管理複雜的應用程序，因爲您可以在一個時間內專門關注一個方面。例如，您可以在不依賴業務邏輯的情況下專注於視圖設計。同時也讓應用程序的測試更加容易。
MVC 分層同時也簡化了分組開發。不同的開發人員可同時開發視圖、控制器邏輯和業務邏輯。

2. Binding指令實現雙向數據綁定

ng-bind 和 {{}} 的使用
<h1>{{username}}</h1>
<h1 ng-bind="username"></h1>
<h1 ng-clock class="ng-clock">{{username}}</h1>
三種方法的結果是一樣的。如果想{{}}不顯示在頁面中，可以使用第二種或第三種。第三種方法的原理是先鎖定h1，然後等username結果出來再顯示在h1中。

3. Controllers的使用

->定義controller
->在controller中聲明變量
->使用ng-bind綁定數據並顯示controller的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>controller</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="firstCtrl">
    <h1 ng-bind="meg"></h1>
</div>
<div ng-controller="nextCtrl">
    <h1 ng-bind="meg"></h1>
</div>
</body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myctrl.js"></script>
</html>

//myctrl.js
angular.module("app",[])
.controller("firstCtrl",function($scope){
    $scope.meg="hello angular";
})
.controller("nextCtrl",function($scope){
    $scope.meg="hello world";
});

4. 在$scope中變量和方法的使用

->在$scope上定義方法並在頁面上進行綁定調用
->在$scope上定義變量並在方法上使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$scope</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="myCtrl">
    <input type="text" ng-model="user.uname">
    <input type="text" ng-model="user.psd">
    <botton class="btn" ng-click="login()">登錄</botton>
    <div class="err" ng-show="errormsg.length>0" ng-bind="errormsg"></div>
</div>
</body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myctrl.js"></script>
</html>

//myctrl.js
angular.module('app',[])
.controller("myCtrl",function($scope){
    $scope.user={uname:'',psd:''};
    $scope.errormsg='';
    $scope.login=function(){
        if($scope.user.uname=='admin'&&$scope.user.psd=='123456'){
            alert('登錄成功！');
        }else {
            $scope.errormsg='用戶名或密碼錯誤';
        }
    }
});

三、進階（2）

1. 自定義Services服務

依賴注入是部件賦予的，不是硬組件內的編碼的依賴設計模式。這從定位減輕組件的依賴，使依賴可配置。這有助於使組件可重複使用，維護和測試。
AngularJS提供了一個至高無上的依賴注入機制。它提供了一種可被注入彼此作爲依賴以下核心組件。

五種創建方法：
->值 - value
->工廠 - factory
->服務 - service
->提供者 - provider
->常量 - constant

值是簡單的JavaScript對象，並用它在配置階段傳遞值到控制器。
工廠是一個函數用於返回結果值。它根據需要創建一個值，當一個服務或控制器需要時。它通常使用一個工廠函數來計算和返回結果值
服務是一個單獨的JavaScript包含了一組函數對象來執行某些任務。服務正在使用 service() 函數，然後注射到控制器中。
提供者使用AngularJS內部創建的服務，工廠等。在配置階段(第一階段AngularJS引導自身期間)。下面提及的腳本可以被用來創建，我們已經在前面創建了MathService。提供者是一個特殊的工廠方法使用get()方法來返回值/服務/工廠。
常量用於通過配置的相應值，考慮到值不能在配置階段傳遞使用。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>service服務</title>
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="myCtrl">
    <h1>{{realname}}</h1>
    <h1>{{http}}</h1>
    <h1>{{data}}</h1>
    <h1>{{name}}</h1>
</div>
<script src="js/angular.min.js"></script>
<script src="js/serviceCtrl.js"></script>
</body>
</html>

//serviceCtrl.js
angular.module("app",[])
.value('realname','zhangsan')
.constant('http','http://www.baidu.com')
.factory('Data',function(){
    return {
        msg:'你好',
        setMsg:function(){
            this.msg='我不好';
        }
    }
})
.service('User',function(){
    this.firstname='上官';
    this.lastname='秋燕';
    this.getName=function(){
        return this.firstname+this.lastname;
    }
})
.controller('myCtrl',function($scope,realname,http,Data,User){
    $scope.realname=realname;
    $scope.http=http;
    $scope.data=Data.msg;
    $scope.name=User.getName();
});

provider例子：

var mainApp = angular.module("mainApp", []);
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

2. Services的應用

如何在多個controller中共享數據。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>services服務</title>
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="FCtrl">
    <input type="text" ng-model="data.msg">
    <h1>{{data.msg}}</h1>
</div>
<div ng-controller="SCtrl">
    <input type="text" ng-model="data.msg">
    <h1>{{data.msg}}</h1>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/services.js"></script>
</body>
</html>

//services.js
angular.module('app',[])
.factory('Data',function(){//共享數據
    return {
        msg:'我來自factory',
        shopcart:['1','2']
    }
})
.controller('FCtrl',function($scope,Data){
    $scope.data=Data;
})
.controller('SCtrl',function($scope,Data){
    $scope.data=Data;
});

3. 常用指令ng-repeat的使用

ng-repeat的使用
特有屬性（$index,$first,$last）的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px;" ng-app="app">
<ul ng-controller="addressList" class="list-group">
    <li class="list-group-item" ng-repeat="item in list">
        <h1 style="font-size: 14px;">{{$index+'.'+item.address+' '+$first+' '+$last}}</h1>
    </li>
</ul>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/repeat.js"></script>
</body>
</html>

//repeat.js
angular.module('app',[])
.controller('addressList',function($scope){
    $scope.list=[
        {id:'1',address:'萬達B座101'},
        {id:'2',address:'萬達B座201'},
        {id:'3',address:'萬達B座301'},
        {id:'4',address:'萬達B座401'}
    ]
});

運行結果：
$index：下標序號
$first：判斷是否是第一條數據
$last：判斷是否是最後一條數據

4. 常用指令的使用

指令ng-bind,ng-model,ng-show/hide,ng-if,ng-submit,ng-disabled 的使用。
指令ng-checked,ng-src,ng-href,ng-class,ng-selected,ng-change 的使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用指令的使用</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .pic{display: block;margin: 30px 50px;width: 80px;height: 80px;}
    </style>
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="checkForm">
    <form name="login" ng-submit="register(user)">
        <fieldset>
            <legend>基本信息</legend>
            <img ng-src="{{user.icon}}"  ng-class="{'pic':user.showIcon}" ng-if="user.isShowIcon">
            <input type="text" placeholder="用戶名" required ng-model="user.name">
            <input type="password" placeholder="密碼" required ng-model="user.psd"><br><br>
            職位：<select name="" id="">
                    <option value="">--請選擇--</option>
                    <option value="1" ng-selected="user.job=='1'">java工程師</option>
                    <option value="2" ng-selected="user.job=='2'">.net工程師</option>
                  </select><br><br>
            性別：<input type="radio" name="sex" value="man" ng-checked="user.sex=='1'">&nbsp;男&nbsp;
            <input type="radio" name="sex" value="woman" ng-checked="user.sex=='2'">&nbsp;女
        </fieldset>
        <fieldset>
            <legend>愛好</legend>
            <div>
                <input type="checkbox" name="hobby" ng-checked="isChecked(1)">&nbsp;籃球&nbsp;
                <input type="checkbox" name="hobby" ng-checked="isChecked(2)">&nbsp;足球&nbsp;
                <input type="checkbox" name="hobby" ng-checked="isChecked(3)">&nbsp;羽毛球&nbsp;
            </div>
        </fieldset>
        <button class="btn submit" ng-disabled="login.$invalid">提交</button>
    </form>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/ng.js"></script>
</body>
</html>

angular.module('app',[])
.controller('checkForm',function($scope){
    $scope.user={
        isShowIcon:true,
        showIcon:true,
        icon:'images/avatar.png',
        name:'',
        psd:'',
        sex:'1',
        job:'2',
        hobby:['1','2']
    };
    $scope.isChecked=function(n){
        var isok=false;
        for(var i=0;i<$scope.user.hobby.length;i++){
            if(n==$scope.user.hobby[i]){
                isok=true;
                break;
            }
        }
        return isok;
    };
    $scope.register=function(u){
        console.log(u);
    }
});

其中ng-submit="register(user)" 是表單提交時觸發的事件，ng-disabled="login.$invalid"，其中login 是表單的name 值，此指令是指含有required 屬性的輸入框爲空，所以此時的提交按鈕爲灰，不可提交的狀態。

驗證數據

以下可用於跟蹤錯誤。

$dirty - 狀態指示值已被改變
$invalid- 指示值的狀態是無效的
$error- 指出確切的錯誤

四、內置服務`$http` 的使用

1. 使用$http 查詢MySQL數據

$http發送請求
查詢MySQL數據庫並返回數據

例子：

angular.module('app',[])
.config(function($httpProvider){

})
.controller('MyCtrl',function($scope,$http){
    $http.get('http://127.0.0.1:80/user/getUsers')
            .success(function(resp){
                 console.log(resp);//resp即爲返回的數據
             })
})

$http.get() 可以改爲 $http.post() ,這樣請求時就可以帶有參數。

2. $http 實現對數據的增刪改

$http帶參數發送請求
對MySQL數據庫增刪改

angular.module('app',[])
.config(function($httpProvider){
})
.controller('myCtrl',function($scope,$http){
    $scope.id='';
      $scope.name='';
      $scope.adduser=function(){
          $http.post('http://127.0.0.1:80/user/adduser',{id:$scope.id,name:$scope.name})
                  .success(function(resp){
                      if(resp.success){
                          alert('添加成功');
                      }
                  })
      }
      $scope.deluser=function(){
          $http.post('http://127.0.0.1:80/user/deluser',{id:$scope.id})
                  .success(function(resp){
                      if(resp.success){
                          alert('刪除成功');
                      }
                  })
      }
})

3. 用戶角色權限實例

AnguelarJS學習筆記

一、入門

二、進階（1）

三、進階（2）

四、內置服務`$http` 的使用

Node.js學習（一）介紹

關於全棧工程師的貼士

VUE快速入門與實踐（下）

node內置模塊

百度地圖海量點尺寸和大小

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

AnguelarJS學習筆記

一、入門

二、進階（1）

三、進階（2）

四、內置服務$http 的使用

四、內置服務`$http` 的使用