Angular 4.0 环境搭建

Posted on 2017-07-20 12:31 work hard work smart 阅读(1806) 评论(1) 编辑收藏举报

1.安装node

2.angular cli安装

sudo npm install -g @angular/cli

3. 使用ng -v 查看安装结果

4. 创建项目

ng new helloworld

helloworld 为项目名称

5.工程目录结构分析

使用webstorm打开刚才创建的hello工程，工程的目录结果如下图

目录介绍

e2e端到端的测试目录

src 应用源代码目录

.editconfig webstorm的一个配置文件

.angular-cli.json angular命令行配置文件

karma.conf.js karma是单元测试执行器， karma.conf.js 是karma的配置文件，用来执行自动化测试

package.json 标准的npm工具的配置文件。里面定义了第三方依赖包

protractor.conf.js 做自动化测试配置文件

tslint.json 定义ts规范的配置文件

src目录

app 包含应用的组件和模块

assets 存放静态资源，如图片

environments 环境配置，如开发环境，测试环境，生产环境公用一套代码

index.html 应用程序的根html

main.ts 应用程序的入口点

polyfills.ts 用来导入一些必要的库，作用是Angular能正常的运行在老版本的浏览器。

style.css 放应用全局的css

test.ts 用来搞自动化测试

tsconfig.json typescript编译器的配置

app下的文件

1).组件

app.components.ts 整个应用程序的基础。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

（图片来自慕课网）

2). 模块

app.module.ts

代码如下

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }