AngularJS权威教程1

AngularJS 是什么

  • 完全使用JavaScript编写的客户端技术,一种构建动态Web应用的结构化框架,主要用于构建单页面Web应用.

  • 数据绑定和第一个AngularJS Web应用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html ng-app>
    <head>
    <title>Simple app</title>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
    </script>
    </head>
    <body>
    <input ng-model="name" type="text" placeholder="Your name">
    <h1>Hello {{ name }}</h1>
    </body>
    </html>
  • 在HTML页面中引用angular.js

  • ng-app属性声明所有被其包含的内容都属于这个AngularJS应用
  • 自动数据绑定使我们可以将视图理解为模型状态的映射

数据模型对象(model object)是指$scope对象。 $scope对象是一个简单的
JavaScript对象,其中的属性可以被视图访问,也可以同控制器进行交互。

创建一个每秒钟走一步的时钟

  • ng-controller声明所有被它包含的元素都属于某个控制器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!doctype html>
    <html ng-app>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
    </head>
    <body>
    <div ng-controller="MyController">
    <h1>Hello {{ clock.now }}!</h1>
    </div>
    <script type="text/javascript" src="js/app.js"></script>
    </body>
    </html>
  • 在app.js中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function MyController($scope) {
    $scope.clock = {
    now: new Date()
    };
    var updateClock = function() {
    $scope.clock.now = new Date()
    };
    setInterval(function() {
    $scope.$apply(updateClock);
    }, 1000);
    updateClock();
    };
  • 插一句安全使用关于apply的使用代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $scope.safeApply = function(fn) {
    var phase = this.$root.$$phase;
    if(phase == '$apply' || phase == '$digest') {
    if(fn && (typeof(fn) === 'function')) {
    fn();
    }
    }else {
    this.$apply(fn);
    }
    };

模块

  • AngularJS允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,
    第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。
    angular.module(‘myApp’, []);

作用域

  • 作用域是视图和控制器之间的胶水。在应用将视图渲染并呈献给用户之前,视图中的模板会
    和作用域进行连接,然后应用会对DOM进行设置以便将属性变化通知给AngularJS。
  • AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定。 $rootScope是所
    有$scope对象的最上层。
  • $scope对象在AngularJS中充当数据模型,但与传统的数据模型不一样, $scope并不负责处
    理和操作数据,它只是视图和HTML之间的桥梁,它是视图和控制器之间的胶水。

基本功能:

  • 提供观察者以监视数据模型的变化;
  • 可以将数据模型的变化通知给整个应用,甚至是系统外的组件;
  • 可以进行嵌套,隔离业务功能和数据;
  • 给表达式提供运算时所需的执行环境。

控制器

  • AngularJS中的控制器是一个函数,用来向视图的作用域中添加额外的功能。我们用它来给
    作用域对象设置初始状态,并添加自定义行为。

    1
    2
    3
    4
    var app = angular.module('app', []);
    app.controller('FirstController', function($scope) {
    $scope.message = "hello";
    });
  • 内置指令ng-click可以将按钮、链接等其他任何DOM元素同点击事件进行绑定。 ng-click指
    令将浏览器中的mouseup事件,同设置在DOM元素上的事件处理程序绑定在一起(例如,当浏览器
    在某个DOM元素上触发了点击事件,函数就会被调用)。

    1
    2
    3
    4
    5
    6
    <div ng-controller="FirstController">
    <h4>The simplest adding machine ever</h4>
    <button ng-click="add(1)" class="button">Add</button>
    <a ng-click="subtract(1)" class="button alert">Subtract</a>
    <h4>Current count: {{ counter }}</h4>
    </div>
  • 控制器方法

    1
    2
    3
    4
    5
    app.controller('FirstController', function($scope) {
    $scope.counter = 0;
    $scope.add = function(amount) { $scope.counter += amount; };
    $scope.subtract = function(amount) { $scope.counter -= amount; };
    });

控制器可以将与一个独立视图相关的业务逻辑封装在一个独立的容器中。尽可能地精简控制
器是很好的做法。作为AngularJS开发者,使用依赖注入来访问服务可以实现这个目的。
AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操
作、格式化或数据操作,以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的
桥梁。

下一篇要讲 表达式!