angularJS的核心特性

時間 2019-11-12

原文原文鏈接

前幾天師傅讓我瞭解一下angularJS，angularJS是一個前端框架，具體的優缺點和運用場景我如今也尚未搞清楚，暫時就先不作描述了，留到運用之後進行補充吧。html

angularJS四大核心特性：MVC、Module（模塊化）、指令系統、雙向數據綁定。前端

下面就以上四大核心特性，進行一些簡要介紹：java

一、MVC（Module——Control——View）前端框架

咱們應該都知道MVC表明：數據模型層（Module）——業務邏輯和控制邏輯（Control）——視圖層（View），先看一個簡單的angularJS例子：app

<!Doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <script>
            function HelloAngular($scope){
                $scope.greeting = {
                    text: "Hello"
                };
            }
        </script>
    </head>
    <body>
        <div ng-controller="HelloAngular">
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
</html>

運行結果：Hello,Angular框架

分析這個簡單的例子，咱們能夠比較明顯的區分出MVC的各層，div中定義的ng-controller就是一個控制器，這個控制器被定義爲一個函數，而p標籤的內容很明顯就是顯示層，函數中定義了一個greeting對象的text屬性，而在顯示曾中的經過{{}}獲取它的值，很明顯爲數據模型層。這樣頁面顯示的內容就是數據模型的值了。模塊化

二、Module（模塊化）函數

上面的例子中咱們定義了一個全局函數，可是有經驗的開發者都知道咱們在開發過程當中應該儘可能避免定義全局變量和全局函數。所以咱們就須要瞭解angularJS的模塊化特性了，咱們修改上面的實例spa

<!Doctype html>
<html ng-app="HelloAngular">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="helloAngular">
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
     <script>
            var myModule = angular.module("HelloAngular", []);

            myModule.controller("helloAngular", ['$scope',
                function HelloAngular($scope) {
                    $scope.greeting = {
                        text: 'Hello'
                    };
                }
            ]);
        </script>
</html>

和上面的實例比對，下面的實例中使用angular的module方法定義了一個模塊，並在定義的模塊上調用了一個controller方法，很明顯是定義了一個myModule模塊的一個控制器，該控制器的名字爲helloAngular，其具體實現則爲上面實例中的HelloAngular函數，這樣咱們就把控制器模塊化了，而不在使用全局函數做爲控制器。rest

注意：一切都是從模塊開始的，咱們在使用angularJS時，必定要先想到模塊，全部的東西都是創建在模塊的基礎上，只有定義了模塊才能調用其它方法。

上面實例中的ng-app至關於java中main函數，因此每一個頁面中只能定義一個ng-app，他定了所在的模塊。

三、指令系統

angular的指令系統是最有特點、最吸引人的一個特性。下面先看一個實例：

<!Doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <hello></hello>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script>
        var myModule = angular.module("MyModule", []);
        myModule.directive("hello", function() {
            return {
                restrict: 'E',
                    template: '<div>Hi everyone!</div>',
                replace: true
            }
        });
    </script>
</html>

實例中的html代碼中有一個hello標籤，但咱們知道標準的HTML代碼中並無hello標籤，咱們再看一下具體的js代碼中，如上個實例，首先定義了一個模塊myModule，而後在模塊上調用了directive函數，很明顯hello則是這個指令名稱，而對應的方法也很明顯，返回一個template，而這個templte的內容則成爲了hello標籤的內容了。

你們想一下，若是咱們定義大量的指令，而後就能夠在頁面中隨便調用了。

四、雙向數據綁定

大部分框架實現的都是單向數據綁定，單向數據綁定的意思是將數據綁定到模板上，而且顯示到界面上，這種模式的缺點是顯示出來後，當數據更改時，並不能及時的更新到頁面上，所以angular提出了雙向數據綁定的定義。

咱們來看一個實例：

<!Doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            <input ng-model="greeting.text"/>
            <p>{{greeting.text}},AngularJS</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
</html>