Angular搭建--初试

假如想仔细学习研究的话，建议参考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  }}

这里配置了typeScript文件如何编译成javaScript。

systemjs.config.js及system-angular-loader.js也是配置文件，具体功能不详。

step4：step1-step3都是讲如何搭建环境，到此，该看下angular和应用相关部分的开发了，这一块打算以后再写，这里主要阐述angular环境的搭建。