AngularJS - 簡介

時間 2019-11-07

原文原文鏈接

AngularJS是什麼？

AngularJS是一個前端JavaScript框架，背後有Google支持。這個框架最先是09年發佈的，隨後發展迅速，尤爲是最近，流行度很高。
和其餘框架不一樣，AngularJS有不少獨特的特性，使得其很是不同凡響。對於我來講，最吸引個人兩個特性是雙向綁定以及依賴注入。前者免去了數據變化時去操做DOM，能讓開發者更專一在邏輯上，然後者則使得測試以及集成變得很是方便。javascript

Hello，World

先來看一個經典的Hello World。css

html<html>
<head>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js"></script>


<script>
    function HelloController($scope) {
        $scope.person = {
            name: "World"
        }

        $scope.sayHelloWorld = function () {
            alert($scope.person.name);
        }
    }
</script>


</head>
<body ng-app>


<div ng-controller="HelloController">
    <input type="text" ng-model="person.name"/>
    <button ng-click="sayHelloWorld()"></button>
</div>


</body>
</html>

Controller

在Angular中，Controller主要負責初始化scope，包括數據以及所須要的函數。上面的HelloController就是個典型的Controller，另一種更增強大的定義方式容許你聲明所依賴的模塊。html

javascriptvar controllers = angular.module('demo.controllers');
controllers.controller("demoController", ['$scope', '$http', function($scope, $http) {
    $scope.test_data = {
        value: 'test data'
    };
    $scope.test_function = function() {
        alert("test function");
    };
}]);

Directive

在前端開發中，常常須要操做DOM，並且有時候須要使用一大堆HTML來構建一個經常使用的組件，例如Google+信息流中的一條信息，在Angular中這都屬於Directive的做用，這也就意味着在Controller中操做DOM是個錯誤的作法。前端

一般狀況下，Directive定義時採用CamelCase規則進行命名，而在使用時則使用橫線進行分隔。java

Directive的定義angularjs

javascriptvar directives = angular.module('demo.directives', []);
    directives.directive('customDirective', function() {
        return {
            restrict: 'ECMA',
            template: '<nav></nav>',
            templateUrl: 'directive.html',
            replace: false,
            priority: 0,
            transclude: false,
            scope: false,
            terminal: false,
            require: false,
            controller: function(scope, element, attrs, transclude, otherInjectables {},
            compile: function(element, attrs, transclude) {
                return {
                    pre: function preLink(scope, element, attrs, controller) {},
                    post: function postLink(scope, element, attrs, controller) {}
                };
            },
            link: function(scope, element, attrs) {
            }
        };
    });

restrict： 指定了directive的使用形式，共有四種：數組

Element（restrict定義時的E）

Attribute（restrict定義時的A）

Class（restrict定義時的C）

Comment（restrict定義時的M）

compile：在directive中若是須要對DOM元素進行處理，基本都是在這個函數中進行。
仔細看這個函數，compile並不能訪問scope。app

link：此函數的主要做用就是對DOM和scope作數據綁定。和compile不一樣，在這個函數中，已經能夠訪問scope了。框架

template和templateUrl：用於指定directive對應的模板，前者直接使用字符串定義模板，然後者則經過url連接外部模板文件。在模板中可使用對應controller或者rootScope中的scope，固然也有例外，具體請看關於scope的解釋。ionic

replace：指定是否使用模板替換directive做用的DOM元素。

priority：指定優先級，angular在處理directive時，會將頁面出現的全部directive按優先級排序，通常這個數值都是不指定的。

controller：directive對應的controller，一般用於directive之間的通訊。在這個函數中，全部綁定到this上的變量，其餘的directive都能經過使用require來進行訪問。

require：經過指定某個directive的名字，來訪問其對應的controller。其中以？做爲前綴時，若是找不到此directive將報錯，而以^爲前綴，將會在父元素進行遞歸查找，可使用數組來引入多個directive，如['directive1','directive2','directive3']

scope：用於指定當前directive所對應的scope，不一樣的取值之間的影響很是大。

false：此時directive與父元素共享scope

true：此時directive有本身的scope，該scope繼承父元素所對應的scope

isolate：directive有本身的scope，該scope不會繼承自父元素對應的scope，可是仍然能夠經過scope.$parent訪問父節點的scope。這不是一個推薦的作法，由於這樣就對父元素進行了限制，影響了directive的使用範圍。

若是想在父子元素之間共享數據，能夠明確指定那些元素須要父子之間共享。方法共有三種：
使用@將父級scope中的屬性綁定到本地scope中，單向綁定，這個值老是字符串，在template中須要使用{{}}
使用=同上，只不過這裏是雙向綁定，在template中能夠直接給出父級scope的屬性名稱
使用&用於倒入函數或者表達式。

transclude：用於控制是否要將該directive的子元素添加到模板中ng-tranclude指定的元素之下。

Service

在Angular中，Service是一些提供常見功能的單例對象。諸如上面出現$http等，其使用也是比較簡單的，只要在使用時聲明這個依賴就能夠了，例如上面的demoController。
其定義方式主要有一下幾種：
一、 service只是簡單的數值可使用constant（name，value）進行註冊，若是時已經存在的對象，可使用value（name，value）進行註冊

javascriptvar services = angular.moudle('demo.services', []);
services.constant('number', 42);
services.constant('string', 'string');
 
var existingService = {
    notify: function(msg) {
        alert(msg);
    }
};
 
services.value('notify', existingService);

二、註冊一個service構造函數

javascriptservices.service('demoService2', function() {
    this.func = function() {
    };
});

三、註冊一個工廠函數用於建立service實例，這種方式能夠在建立服務實例以前作些處理

javascriptservices.factory('demoService1', function(msg) {
    // some processing code
    return {
        func: function() {
        }
    };
});

四、使用provider，使用這種方式，複雜一點，可是好處是能夠對service進行配置。

javascriptservices.provider('demoService3', function() {
    this.value = "string";
    this.$get = function() {
       var value = this.value;
        return {
            print: function() {
                console.log(value);
            }
        }
    }
 
    this.setValue = function(value) {
        this.value = value;
    }
});

還有路由、模板、指令這些會在使用ionic建立 Hybrid Mobile App中提到。

原文地址：http://nero-zou.com/angularjs-intro/

1. 【angularJS】簡介
2. AngularJS簡介
3. angularJs(一)簡介
4. Angularjs簡介
5. Angularjs 簡介
6. AngularJS - 服務簡介
7. AngularJS 學習筆記---AngularJS 簡介
8. angularjs整合ueditor簡介
9. angularJS與IE8整合簡介
10. AngularJS 簡單的介紹
更多相關文章...
• Scala 簡介 - Scala教程
• AJAX 簡介 - PHP教程
• Github 簡明教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。