前言
小编最近在进行前端工程化的工作，使用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
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
