Angular搭建--初试_angular项目 npm run build-CSDN博客

本文链接：https://blog.csdn.net/linfujian1999/article/details/76253655

假如想仔细学习研究的话，建议参考Angular中文指南进行规划化学习，这里我把这几天学习angular的心得和注意点罗列下，供自己和大家备忘。

主要是Angular框架的搭建，这里我使用的IDE是Atom（之前用它写过React，不想再换IDE了），Angular需要node的环境及npm包及管理，所以你第一步是安装Node.js及npm到你的系统：

step1：安装node.js及npm
下载地址：各操作系统下的版本
我的OS是windows ×64bit，直接选择Window installer。
安装完毕，可以在cmd命令提示符里输入node -v 及 npm -v 来查看版本及是否正确安装。

step2：一个完整的angular项目目录组成

因为angular是npm管理的，所以它依赖的包以及启动项目都需要npm。先说依赖的包：
angular所以来的package需要npm install下载到本地，需要哪些模块需要package.json中标明，先来看下项目的目录结构：

这里写图片描述

该项目文件夹是在atom中打开的，由上往下：

node_modules文件夹：在package.json中的angular依赖包通过npm install命令安装到本地所生成的文件夹，包括了angular依赖的各种package；该文件夹执行npm install后自动生成，不需要创建。

src文件夹：包括一个app子目录及一些子文件。app子目录中包括了一系列的组件，module，service等typeScript；子文件主要是配置文件html。

bs-config.json:该文件将服务器定位你配置的路径：
这里写图片描述

这里baseDir为src，服务器寻找index.html时就会去src目录下寻找。

package.json:该文件很重要，将angular所需要的模块在此处标明，执行npm install,才会把需要的package下载到node_modules文件夹。

angular相关的package.json配置如下：

{
  "name": "angular-tour-of-heros",
  "version": "1.0.0",
  "description": "Angular tour of heros",
  "scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "keywords": [],
  "author": "fujian",
  "license": "TJU",
  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",

    "angular-in-memory-web-api": "~0.3.0",
    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "concurrently": "^3.2.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.1.0",

    "canonical-path": "0.0.2",
    "tslint": "^3.15.1",
    "lodash": "^4.16.4",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",

    "@types/node": "^6.0.46",
    "@types/jasmine": "2.5.36"
  },
  "repository": {}
}

这里dependencies及devDependencies包括了angular相关的部分，scripts中的start配置了项目启动是在watch模式下，这样就可以在browser中随时查看改动后的变化。最好package.json的配置如上配置。

ok，以上是项目的大致目录，现在可以在该目录地址下执行 npm install命令了，将所需package安装到本地node_modules文件夹下。

step3：经过step2，所需要的包已经安装完毕，下边来src目录下的详细组成。

这篇博文主要是将angular环境的搭建，具体的angular如何开发暂不做详述。

这里写图片描述

app子目录下包括了项目的组件，module，service等，这里不做详述；

index.html:服务启动后，服务器返回browser的html页面，

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

启动应用。

这里的main.js,main.js.map都是根据main.ts自生成的。

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}