第一个 Angular 应用程序

Posted 聆耳吟风

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第一个 Angular 应用程序相关的知识,希望对你有一定的参考价值。

node download
https://nodejs.org/zh-cn/
全局安装
npm install @angular/cli -g
指定版本
npm install @angular/cli@8.3.29 -g
angular-cli versions
https://www.npmjs.com/package/@angular/cli
检查安装版本
ng version
创建项目
ng new app-name
工程目录
┌─ e2e
├─ src
├─ angular.json
│  (Angular 应用程的配置文件)
│
├─ karma.conf.js
│  (karmar 单元测试配置文件)
│
├─ package.json
│  (npm包管理及项目命令配置文件)
│
├─ tsconfig.app.json
│  (TypeScript 配置文件, 在 angular.json 中 architect/build/options/tsConfig)
│
├─ tsconfig.json
│  (TypeScript 配置文件)
│
│  tsconfig.json 和 tsconfig.app.json 的区别:
│  1. tsconfig.app.json 继承自 tsconfig.json
│  2. tsconfig 中配置的是 TypeScript 的基本配置
│     - 保存时编译
│     - 指定ES版本等
│     - ···
│  3. tsconfig.app 中配置的是和项目有关的
│     - files 指定一些ts文件
│     - include/exclude 包含/排除一些文件
│     - ···
│  (具体配置信息参见: https://www.tslang.cn/docs/handbook/tsconfig-json.html)
│
└─ tslint.json
   (TypeScript 代码约束配置文件)
src 目录
┌─ app
│  (应用程序内容目录)
│
├─ assets
│  (静态资源目录, 在 angular.json 中 architect/build/options/assets)
│
├─ environments
│  (环境变量目录, 在 angular.json 中 architect/build/configurations)
│
│  在不同环境编译时指定 configuration 可以编译成不同的配置文件, 例如:
│  - environments
│    - environment.prod.ts  -- 正式
│  ————————————————————————————————
│  - angular.json/.../architect/build/configurations
│    "production": { 
│       "fileReplacements": [
│           {
│               "replace": "src/environments/environment.ts",
│                with: "src/environments/environment.prod.ts"
│           }
│       ]
│    }
│  ————————————————————————————————
│ - package.json/scripts
│   "build-prod": "ng build --configuration=production"
│  ————————————————————————————————
│ - npm run build-prod
│
├─ index.html
│  (Angular 应用入口页面, 在 angular.json 中 architect/build/options/index)
│
├─ main.ts
│  (Angular 应用启动入口, 在 angular.json 中 architect/build/options/main)
│
├─ polyfills.ts
│  (腻子脚本, 兼容低版本浏览器, 在 angular.json 中 architect/build/options/polyfills)
│
├─ style.scss
│  (全局样式, 在 angular.json 中 architect/build/options/styles)
│
└─ test.ts
   (单元测试, 在 angular.json 中 architect/test/options/main)

app 目录
┌─ app.module.ts
│  (根模块, 在 main.ts 中, platformBrowserDynamic().bootstrapModule(AppModule))
│  在一个Angular应用中只能有一个根模块, 并且在 main.ts 中创建
│
├─ app.component.ts
│  (根组件, 在根模块中声明)
│
└─ app-routing.module.ts
   (根路由, 在 app.module 中引入)

以上是关于第一个 Angular 应用程序的主要内容,如果未能解决你的问题,请参考以下文章

typescript Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming/angular-2/

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming

angular ,ngRouter 新增了 路由以后 更新到测试环境 不能跳转到正确页面。而是跳转到第一个路由页面?

如何在Angular2 rc3路由中处理来自oauth重定向url的哈希片段