模块依赖于其它的模块。在JS Angular 应用程序里，当我们需要一些东西由其它模块提供，我们从app对象得到它。当其它模块需要涉及AppComponent，它需要从app.AppComponent获取：
declarations: [ app.AppComponent ],
Angular 也是模块化的。它是一个模块库的集合。每一个模块库都是由几个有关联的模块组成的。
当我们需要 Angular 的一些东西，我们使用ng对象。
定义对象的类
.class({ constructor: function(){} });
这个类中是空的，这个类为AppComponent类初始化对象。当我们准备构建一个实际的项目，我们能用属性和方法拓充这个对象。我们的AppComponent类是空的，但是有一个空的constructor，因为我们不需要在start项目里做任何事。
组件定义对象
ng.core.Component()告诉 Angular 这个类初始化对象为一个 Angular 组件。这个配置对象传递给 ng.core.Component()方法有两个字段，selector 和 template。
ng.core.Component({ selector: 'my-app', template: '<h1>My First Angular App</h1>' });
这个selector指定一个简单的CSS选择器给一个叫做my-app的HTML元素。Angular创建了并运行一个我们的AppComponent实例，无论如何它总是一个my-app元素作为HTML。
记住这个my-app选择器，我们需要这个知识点在我们写index.html的时候用到。
这个template属性保存组件的同伴模板。一个模板是一个HTML的形式，它告诉 Angular 怎样去渲染一个视图。我们的模板是一个单独HTML代码，“My First Angular App”。
现在，我们需要一些东西去告诉 Angular 去加载这组件。
添加一个 NgModule
Angular app 由 Angular 模块组成，这些模块依赖包含我们的组件和所有我们的app需要的。
创建一个app/app/module.js文件像下面这样：
(function(app) { app.AppModule = ng.core.NgModule({ imports: [ ng.platformBrowser.BrowserModule ], declarations: [ app.AppComponent ], bootstrap: [ app.AppComponent ] }) .Class({ constructor: function() {} }); })(window.app || (window.app = {}));
启动app
添加一个新文件，app/main.js，像下面：
(function(app) { document.addEventListener('DOMContentLoaded', function() { ng.platformBrowserDynamic .platformBrowserDynamic() .bootstrapModule(app.AppModule); }); })(window.app || (window.app = {}));
我们需要两个东西去运行这个app：
Angular 的platformBrowserDynamic().bootstrapModule函数
这个app我们刚写的初始模块；
我们需要它们都要在我们的命名空间。然后我们请求bootstrapModule，传入这个 root app module，AppModule。
学习为什么我们需要bootstrapModule从ng.platformBrowserDynamic并且为什么我们创建一个单独的JS文件。
我们已经请求 Angular 去连接这个 app 在一个浏览器用我们的组件在 root。Angular 将放在那儿？
添加index.html
Angular 运行我们的 app 在我们的index.html的一个指定位置。开始创建文件。
我们不能把我们的index.html放在app/文件夹下。我们将把它放在上一层，在项目的根文件夹下。
index.html文件内容如下：
<html> <head> <title>Angular QuickStart JS</title> <meta content="width=device-width, initial-scale=1"> <link href="https://www.jb51.net/styles.css"> <!-- 1. Load libraries --> <!-- IE required polyfill --> <script src="https://www.jb51.net/node_modules/core-js/client/shim.min.js"></script> <script src="https://www.jb51.net/node_modules/zone.js/dist/zone.js"></script> <script src="https://www.jb51.net/node_modules/reflect-metadata/Reflect.js"></script> <script src="https://www.jb51.net/node_modules/rxjs/bundles/Rx.js"></script> <script src="https://www.jb51.net/node_modules/@angular/core/bundles/core.umd.js"></script> <script src="https://www.jb51.net/node_modules/@angular/common/bundles/common.umd.js"></script> <script src="https://www.jb51.net/node_modules/@angular/compiler/bundles/compiler.umd.js"></script> <script src="https://www.jb51.net/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script> <script src="https://www.jb51.net/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script> <!-- 2. Load our 'modules' --> <script src='https://www.jb51.net/app/app.component.js'></script> <script src='https://www.jb51.net/app/app.module.js'></script> <script src='https://www.jb51.net/app/main.js'></script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
这儿有3个值的注意的地方：
我们加载我们需要的 JS 库；学习关于它们。
我们加载我们的 JS 文件。
我们添加<my-app>标签在<body>中。