Angular入门篇

目录

angular程序架构（构建块）

搭建angular开发环境（Angular CLI）

项目实战（强化组件概念）

---

今天开始学习用AngularCLI构建项目，进行angular项目入门，体会angular的强大。首先来复习一下angular的架构，如下图：

angular程序架构（构建块）

首先需要安装angular环境，包括nodejs，npm和angular，创建angular项目时会依赖python2.7，具体环境搭建请参考angular官方文档。angular官网

 

搭建angular开发环境（Angular CLI）

开发环境搭建参考angular官网https://angular.io/guide/quickstart。下面开始angular的组件详解：

模块：@NgModule声明一个angular的模块，declarations元素里只能声明组件、指令和管道，import标签声明此模块要正常运行还需要的其他模块，BrowserModule为浏览器模块，是必要模块，表面你的应用要在浏览器里运行。FormsModule为表单模块，HttpModule为http通讯模块。providers元素里只能声明服务。

启动angular应用

angular的应用启动在angular-cli.json里有相应配置，下面来详细解说angular的启动过程。

启动时加载了哪个页面？启动时加载了哪些脚本？

这些脚本做了什么事？

./polyfills.ts:导入必要的库，以便angular能正常的运行在某些比较老的浏览器中；

platformBrowserDynamic:从angular浏览器模块中导入platformBrowserDynamic这个方法，这个方法会告诉angular使用哪个模块来启动angular应用。

enableProdMode:从angular的核心模块中导入enableProdMode这个方法，这个方法用来关闭angular的开发者模式；

enviroment:导入环境配置，angular提供对多环境的支持；

AppModule：这个是命令行生成工具的主模块；

8-10行：表示如果环境是生产环境，则关闭开发者模式；

12行：platformBrowserDynamic方法调用bootStrapModule并传入AppModule作为启动模块来启动应用；

这是angular程序的应用起点，整个程序是通过这里开始运行的。

angular在找到启动模块AppModule后，会自动加载启动模块所需的其他模块，所有依赖模块都加载完后，anguar会回到index寻找启动模块主组件对应的css选择器，并显示该对应组件模板中的内容；

项目实战（强化组件概念）

   项目源码请看博主github