Angular搭建--初试

迷南。 2022-06-11 02:43 222阅读 0赞

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

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

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

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

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

![这里写图片描述][SouthEast]

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

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

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

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

这里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如何开发暂不做详述。

![这里写图片描述][SouthEast 2]

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环境的搭建。

[Angular]: https://angular.cn/
[Link 1]: https://nodejs.org/en/download/
[SouthEast]: /images/20220611/c0af4efb8bdf4b0aba9057e7e840d32e.png
[SouthEast 1]: /images/20220611/8b65197b55d64bb2a94dedc0c2fae364.png
[SouthEast 2]: /images/20220611/1cf47ae2a489463c82c7d4cb8da5f9f5.png