angular 标准目录结构_《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文件

说明

Hello World!

项目启动后,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 classAppComponent{}

创建app.module.ts文件

说明

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

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

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

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

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

创建main.ts文件

说明

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

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

创建宿主页面index.html(项目根目录下)

说明

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

标签是根组件app.component.ts中定义的selector.

加载中......

至此,整个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

你可能感兴趣的:(angular,标准目录结构)