《Angular2项目之目录结构》

前言

小编最近在进行前端工程化的工作，使用Angular2前端框架对项目前端界面进行重构。继而对于Angular2项目运行原理有一些新的体会，在这里与君共勉。

正文

Angular2目录结构

 

开发

创建新的文件夹HelloWorld

mkdir HelloWorld

 

 

创建配置文件package.json

说明

name:项目的名称；

version：项目的版本；

description：项目的简单描述；

scripts：可以使npm调用一些脚本或者封装一些命令

devDependencies：项目开发时所依赖的一些工具包

dependencies：项目依赖的基础包

Webpack：打包工具

web-dev-server：小型的服务器

创建配置文件tsconfig.json

说明

module：组织代码的方式

target：编译目标平台（ES3、ES5、ES6等）

sourceMap:把ts文件编译成JS文件时，是否生成对应的SourceMap文件

emitDecoratorMetadata：把TypeScript支持为带有装饰器的声明生成元数据

experimentalDecorators：是否启用实验性装饰器特性

typeRoots：指定第三方库的类型定义文件的存放位置，推荐使用node_modules/@types文件夹

创建资源文件夹

mkdir src

创建app.component.html文件

说明

<h3>    Hello World!</h3>

 

项目启动后，web浏览器所显示内容

创建app.component.ts文件

 

说明

通过import从angular的基础包@angular/core中引入组件模块（Component）

 

import{ Component }from"@angular/core";

 

通过@Component装饰器来告诉angular如何创建组件。

selector:'hello-world'：该组件的Dom元素名称

templateUrl:'src/app.component.html'：给组件引入所需要的模板

 

@Component({    selector:'hello-world',    templateUrl:'src/app.component.html'})

定义一个组件类并对外输出该类，以便其它文件通过组件名称引用该组件

 

export class AppComponent{}

 

创建app.module.ts文件

说明

@NgModule：用于定义模块用的装饰器

Declarations：导入模块依赖的组件、指令等

Imports：用来导入当前模块所需的其他模块

BrowserModule模块注册了一些关键的Provider和通用的指令，在imports属性中配置，作为公用模块供全局调用。

Bootstrap：标记出引导组件，在Angular启动应用时，将被标记的组件渲染到模板中。

创建main.ts文件

 

说明

此文件为入口文件，通过它来串联起整个项目。

启动应用，主要依赖Angular自带的platformBrowserDynamic函数和应用模块AppModule，然后调用platformBrowserDynamic().bootstrapModule()方法，来编译启动AppModule模块。

创建宿主页面index.html（项目根目录下）

说明

bundle.js文件时Webpack打包命令运行后生成的文件

<script src="bundle.js"></script>

 

<hello-world>标签是根组件app.component.ts中定义的selector.

<hello-world>    加载中......</hello-world>

 

至此，整个HelloWorld项目基本搭建完成。接下来用打包工具，将项目打包编译，使整个项目运行起来。

打包部署

创建webpack.config.js文件

 

PS：此文件为打包工具webpack自己的配置文件

 

在有项目里并没有在项目的根目录发现这个配置文件，它被包含在node-modules文件里

说明

entry：页面入口文件配置，一个入口或多个入口文件都可以

output：对应输出项配置，即输出入口文件编译后的文件

resolve：定义了解析模块路径时的配置，常用的是extensions,用来指定模块的后缀，这样可在引入模块时无需写后缀，会自动补全。

module.loaders：最关键的配置项，它告知Webpack每一类文件都使用什么加载器来处理。

 

PS:至此，HelloWorld项目全部搭建完成。

运行

1.安装依赖包

cnpm install

 

 

 

PS:在项目的根目录输入此命令，cnpm会根据package.json配置文件，安装所有的依赖包。同时自动在根目录创建一个node-modules文件夹，项目依赖的包都安装在其中。

2.启动服务

cnpm start

 

                                                                                                                                       

浏览器中输入网址

http://localhost:3000