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介绍与使用