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>

界面截图：

该实例不管你在input中输入任何内容，都会实时的显示在下面的p标签中，咱们能够看到该实例中咱们没有写任何js代码，咱们在input上绑定了一个ng-model，它的值为greeting.text，而在p标签中则获取这个值，实时显示在html中。