Angular框架入門

時間 2019-12-18 標籤 angular 框架入門

今天簡單學習了AngularJS框架,在這裏我想簡單的總結一下我所瞭解的AngularJS和一些入門案例!javascript

首先,咱們要知道什麼是AngularJS?html

AngularJS 誕生於2009年，由Misko Hevery 等人建立，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC（Model–view–controller）、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。前端

而後,AngularJS怎麼用?爲何咱們要使用AngularJS?java

AngularJS 是一個 JavaScript 框架。它可經過 <script> 標籤添加到 HTML 頁面,經過指令拓展了HTMLajax

AngularJS 是以一個 JavaScript 文件形式發佈的，可經過 script 標籤添加到網頁中spring

我認爲AngularJS 的優點在於減輕前端js代碼量，增長js的複用也能夠經過學習AngularJS學習到更多的前端頁面框架並且最重要的是AngularJS具備四大特性分別是:設計模式

1.採用MVC設計模式app

提及MVC設計模式就不得不提一下設計模式這個關鍵詞了，常見的設計模式有23+1種，這個+1就是指MVC了，其餘的能夠自行百度瞭解，學過軟件工程的可能會了解的多一點，雖然很繁瑣，但確實是頗有用的東西。框架

在angularJS中MVC分別表明模型（model）,視圖（view）,控制器（controller）jsp

Model：模型，就是業務數據，前端項目中就是JS變量；

View：業務數據向用戶展現的地方，前端項目中就是HTML；

Controller：負責業務數據的增刪改查，前端項目中至關於函數。

2.雙向數據綁定

數據綁定有兩個方向，意識從Model到View，二是從View到Model。

1.從Model到View，只要Model中數據發生改變，View中的數據會自動同步更新。許多方法均可以實現此種方向的綁定，例如：{{ }}、ngBind、ngIf、ngRepeat、ngShow、ngChecked，其餘的指令沒有手動嘗試，若是你們有興趣能夠本身敲一敲嘗試一下。

2.從View到Model，這種方向的綁定實現方法只有一種，就是ngModel

單行文本輸入域，ngMode能夠把value屬性值綁定到Model變量

複選框，ngModel能夠把true/false值綁定到Model變量

單選框，ngModel能夠把當前選中的單選框的value值綁定到Model變量

下拉框，ngModel能夠把當前選中的option的value值綁定到Model變量

3.依賴注入

學過spring的同窗可能知道這個概念，對於angular JS來講若是須要那些對象能夠在參數中直接寫出來，而後就能夠在函數的使用了，這些對象不須要你本身建立，它自己已經被angular建立好了，你就能夠直接使用了。

module.controller('控制器', function($scope, $interval){})

Angular中的ngController指令在實例化控制器對象時，會根據指定的形參名，建立出控制器所依賴的對象，並注入給控制器對象——依賴注入（Dependency Injection，DI）現象。

注意：

(1)Angular在建立控制器對象時，會根據形參列表中的每一個形參的名稱來建立依賴的對象，故控制器聲明函數不能聲明Angular沒法識別的形參名——Angular只提供了這一種依賴注入方式——根據形參名來注入依賴的對象！

(2)若項目JS文件使用了相似yuicompressor等壓縮程序，默認會把函數的形參名精簡爲一個字母的形式，會致使Angular的依賴注入失敗！解決辦法：

4.模塊化開發

顧名思義就是經過定義模塊把各個部分分開採用了高內聚低耦合的原則從而使代碼的依賴下降

咱們應該如何使用AngularJS呢

首先咱們須要導入所要用到的script 標籤使用方法和Jquery同樣

<script type="text/javascript" src="js/angular.min.js" ></script>

接下來要認識幾個比較經常使用的指令

ng-model 能夠將輸入域的值與 AngularJS 建立的變量綁定。與jsp中的name屬性相似

ng-app=myApp 用於告訴 AngularJS 應用當前這個元素是根元素。通常寫在<body>標籤中一個HTML只有一個ng-app

ng-controller 用於爲你的應用添加控制器。通常寫在<body>標籤中

ng-repeat 用於遍歷循環哪裏須要用到就添加在對應的標籤上

ng-init 初始化

$scoper 做用域是當前頁面

表達式頁面若是須要展現數據須要用{{表達式或者變量}} 好比:

        <script>
            var app=angular.module('myApp',[])//  定義了一個模塊   叫myApp
            // 定義控制器
            app.controller('mycontroller',function($scope){
                $scope.add=function(){
                    return parseInt($scope.x)+parseInt($scope.y);
                }
            });
        </script>
    </head>
    <body ng-app=myApp ng-controller="mycontroller">
        x：<input type="text" ng-model="x" />
        y：<input type="text" ng-model="y" />
        
        <br />
        運算結果：{{add()}}
    </body>

結果:

循環遍歷

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
        <script>
            var app = angular.module("myApp",[])
            app.controller("mycontroller",function($scope){
                $scope.list = [
                {name:"zhangsan",age:18,sex:"man"},
                {name:"lisi",age:17,sex:"woman"},
                {name:"wangwu",age:16,sex:"boy"}
                ];
            })
        </script>
    </head>
    <body ng-app="myApp" ng-controller="mycontroller">
        <table>
            <tr>
                <td>姓名</td>
                <td>年齡</td>
                <td>性別</td>
            </tr>
            <tr ng-repeat="p in list">
                <td>{{p.name}}</td>
                <td>{{p.age}}</td>
                <td>{{p.sex}}</td>
            </tr>
        </table>
    </body>
</html>

結果:

一些其餘的補充

$scope是angular.js內置對象

$scope有請求數據也有響應數據

ng-init angular.js 中只要頁面一執行頁面加載首先執行的ng-init 中操做

var app=angular.module('app',[]) // 定義了一個模塊叫app 定義之後必定要在body 標籤上聲明使用的模塊名稱

ng-click 鼠標點擊事件

$http 也是angular.js的內置對象主要做用發送http 請求而且是發送ajax

$http.get 發送get請求

$event 能夠獲取當前操做的事件是什麼複選框 ----》複選框哪一個被勾選