search

leibnizli / leibnizli.github.com

just a blog!
https://leibnizli.github.io
0 stars 0 forks source link

angular #11

Open leibnizli opened 8 years ago

leibnizli commented 8 years ago

从源码入手

如同其他常见脚本框架一样，angular的核心代码包裹在一个自调用的匿名函数里边

(function(window, document, undefined) {
    //...
    var angular = window.angular || (window.angular = {});
})(window, document);

在自调用匿名函数内部angular是一个对象，通过publishExternalAPI给angular对象赋值方法，angular.module通过setupModuleLoader赋值。

function publishExternalAPI(angular) {
  extend(angular, {
    'bootstrap': bootstrap,
    'copy': copy,
    //...
  });
  //...
  angularModule = setupModuleLoader(window);
  //...
}

此处待放图片

angular.module返回一个module对象，下图是module对象的方法

leibnizli commented 8 years ago

依赖注入

先看一个实例

config、value、factory、server、controller等方法会向invokeQueue队列中推入相关数组，在document发生DOMContentLoaded事件后启动angularInit。

jqLite(document).ready(function() {
    angularInit(document, bootstrap);
});

jqLite是一个类似jQuery的对象

function angularInit(element, bootstrap) {
    //...
    if (appElement) {
        bootstrap(appElement, module ? [module] : [], config);
    }
    //...
}

angularInit中的bootstrap是一个函数，在angularInit中用来根据ng-app初始化angular应用。bootstrap也可以用来手动启动angular应用，可以通过angular.bootstrap来访问

function bootstrap(element, modules, config) {
    //...
}

手动启动angular应用

<!doctype html>
<html>
<body>
<div ng-controller="WelcomeController">
  {{greeting}}
</div>

<script src="angular.js"></script>
<script>
  var app = angular.module('demo', [])
  .controller('WelcomeController', function($scope) {
      $scope.greeting = 'Welcome!';
  });
  angular.bootstrap(document, ['demo']);
</script>
</body>
</html>