一 使用Angular-CLI 快速构建Angular2应用
步骤一:环境准备
此博文所用环境如下:
工具 | 版本 |
---|---|
node.js | v8.7.0 |
npm | v5.5.1 |
webStorm | 2016.3 |
Angular CLI | 1.7.4 |
注: 版本不一定需要严格一致, 但是建议使用 node 6.9.x 和 npm 3.x.x 以上的版本,以避免一些不必要的错误。
node.js 可到官网下载所需版本。
webStorm下载地址:链接: https://pan.baidu.com/s/10XSe0wfNBhOHDDLvCjpEfw 密码: ramh
主要安装命令:
//国内使用npm太慢,可以使用npm淘宝镜像代替,支持 npm 除了 publish 之外的所有命令,下面的命令我们默认使用淘宝镜像。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
//安装脚手架,
cnpm install -g @Angular/cli
//如果以前装过,则需先卸载以前版本
cnpm uninstall -g @angular/cli
cnpm cache clean
ng -v
//若显示command not found则卸载干净
//安装指定版本
cnpm install -g @angular/cli@1.7.4
步骤二:创建新项目
ng new project-name
cd project-name
ng serve --open
Angular 默认端口为4200,如果端口被占用会出现以下错误,可以使用命令设置端口号:ng serve --port 4201
然后访问浏览器http://localhost:4200/,可以看到如下页面:
到此,一个简单的应用就创建好了,下面我们重点来看看Angular的目录结构。
二 Angular2目录结构解析
- Angular首层目录
.angular-cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "my-app" //项目名称
},
"apps": [
{
"root": "src", //根目录
"outDir": "dist", //build后的输出目录,默认dist
"assets": [//记录资源文件夹,构建时复制到`outDir`指定的目录
"assets",
"favicon.ico"
],
"index": "index.html",//指定首页文件
"main": "main.ts",//指定应用的入口文件
"polyfills": "polyfills.ts",
"test": "test.ts",//指定测试入口文件
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",//使用`ng generate`命令时,自动为selector元数据的值添加的前缀名
"styles": [//引入全局样式,构建时会打包进来,常用于第三方库引入的样式
"styles.css"
],
"scripts": [],//引入全局脚本,构建时会打包进来,常用于第三方库引入的脚本
"environmentSource": "environments/environment.ts",// 基础环境配置
"environments": {//子环境配置
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {/// 执行`ng generate`命令时的一些默认值
"styleExt": "css",//默认生成的样式文件后缀名
"component": {}
}
}
package.json
npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目中所需的运行和开发环境。其实package.json文件就是一个json对象,该对象的每一个成员就是当前项目的一项设置,package.json主要配置项如下:
name:项目名称
version 版本号
description:npm包的描述,它可以帮助人们在使用npm search时找到这个包
homepage:项目主页的url
config:应用的配置项
author:作者
respository:资源仓库地址
licenses:授权方式
directories:目录
main:应用入口文件
bin:命令行文件
dependencries:项目应用运行依赖模块
devDependencies:项目应用开发环境依赖
engines:运行引擎,指明node.js运行所需要的版本
script:声明一系列npm脚本指令
private :如果设置为true, 那么npm会拒绝发布它
更加详细的解析: https://www.cnblogs.com/nullcc/p/5829218.html
tsconfig.json :TypeScript 编译器配置
TypeScript 是 Angular 应用开发中使用的主语言。浏览器不能直接执行 TypeScript 。它得先用 tsc 编译器转译 (transpile) 成 JavaScript ,而且编译器需要进行一些配置。
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",//编译输出目录
"sourceMap": true,//编译时是否生成对应的source map文件
"noImplicitAny": false,//为false时,如果编译器无法根据变量的使用来判断类型时,将用any类型代替
//为true时,将进行强类型检查,无法推断类型时,提示错误
"module": "commonjs",
"removeComments": true,//编译生成的JavaScript文件是否移除注释
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",//编译之后生成的JavaScript文件需要遵循的标准(es3、es5、es2015)
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
],
"include":[//编译时需要包含的文件夹
"ts"
],
"exclude": [//编译时需要剔除的文件夹
"js"
]
}
}
src目录
app.component.ts
import { Component } from '@angular/core';//从angular的基础包@angular/core中引入组件模块(Component)
@Component({//组件装饰器,告诉angular如何创建组件
selector: 'app-root',//该组件的Dom元素名称
templateUrl: './app.component.html',//引入组件所需要的模板
styleUrls: ['./app.component.css']//引入组件所需要的样式
})
export class AppComponent {//定义一个组件类,并对外输出该类,以便其它文件可以通过组件名称引用该组件
title = 'app';
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({ //用于定义模块用的装饰器
declarations: [//声明本模块依赖的组件、指令等
AppComponent
],
imports: [//导入本模块所需的其他模块
BrowserModule //注册了一些关键的Provider和通用的指令,在imports属性中配置,作为公用模块供全局调用
],
exports:[],//导出本模块的组件、指令、模块等
providers: [],//声明本模块的服务
bootstrap: [AppComponent]//标记出引导组件,在Angular启动应用时,将被标记的组件渲染到模板中
})
export class AppModule { }
main.ts
import { enableProdMode } from '@angular/core';//导入enableProdMode用来关闭angular开发者模式
//从angular浏览器模块中导入platformBrowserDynamic这个方法,这个方法告诉angular使用哪个模块来启动整个应用
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';//angular多环境支持
// 如果是工厂模式,就启动enableProdMode来关闭开发者模式
if (environment.production) {
enableProdMode();
}
//调用platformBrowserDynamic().bootstrapModule()方法,来编译启动AppModule模块
platformBrowserDynamic().bootstrapModule(AppModule)
// .catch(err => console.log(err));