什么是AngularJS

Angularjs是一个标准的mvvm框架，通过指令和控件的搭配进行页面渲染和数据存储，在现代 mvvm 理念中 view 包含了 v 和 vm 两部分。

ng-app

ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素，angularjs 内部通过属性的查找来找到 ng-app 对应的 dom 元素，所有 AngularJS 应用都必须要要一个根元素。

  1. <div ng-app="myApp" ng-controller="myCtrl">
  2.     {{ firstName + " " + lastName }}
  3. </div>
  5. <script>
  6. var app = angular.module("myApp", []);
  7. app.controller("myCtrl", function($scope) {
  8.     $scope.firstName = "John";
  9.     $scope.lastName = "Doe";
  10. });
  11. </script>

angularjs 会自动查找 ng-app 的值所对应的 module。

模块机制

  1. angular.module(name, [requires], [configFn]);

来声明一个模块，该方法有三个参数：模块的名称，依赖列表，初始化的configFn函数，但是由于 module() 仍会返回这个 module 对象，所以 configFn 通常会链式调用来配置路由或者自定义的指令等等。

值得注意的是 angular.module 会在全局创建/注册一个模块，所有的模块无论是三方还是单独的必须使用这个机制。

angularjs 为了我们方便给每个 module 加了一个 name 属性方便我们使用，实际使用如下面代码：

  1. import angular from 'angular';
  3. import Common from 'yqg-common/angular';
  4. import Constant from './constant';
  6. export default angular
  7.     .module('App.common', [
  8.         Common.name,
  9.         Constant.name,
  10.     ]);

这就导致了一个问题，ngjs 和 我们常用 es6 的模块常常混用，没有必要的冗余，且为了避免模块的命名冲突在大型的项目中我们通常把模块名和目录结构匹配所以经常会出现非常长的模块名。

angular.module 相比前端模块的优点在于高配置性，由于 ngjs 将模块进行了一层包装，暴露出来的run，config，component 等方法相当于进行一次封装使得 ngjs 拥有使用外部框架/函数的能力，其他框架做起来不会这么轻松。