Angular 2 网站路由示例项目教程

Angular 2 网站路由示例项目教程

angular2-website-routesA simple Angular 2 website example using routes项目地址:https://gitcode.com/gh_mirrors/an/angular2-website-routes

目录结构及介绍

angular2-website-routes/
├── app/
│   ├── app.component.html
│   ├── app.component.ts
│   ├── home/
│   │   ├── home.component.html
│   │   ├── home.component.ts
│   ├── todo/
│   │   ├── todo-list.component.html
│   │   ├── todo-list.component.ts
├── images/
├── editorconfig
├── gitignore
├── LICENSE
├── README.md
├── favicon.ico
├── index.html
├── karma.conf.js
├── package.json
├── spec-bundle.js
├── tsconfig.json
├── typings.json
├── webpack.config.js
└── webpack.test.config.js

• app/: 包含应用程序的主要组件和模块。
  • app.component.html 和 app.component.ts: 主组件的模板和逻辑。
  • home/: 包含主页组件。
  • todo/: 包含待办事项列表组件。
• images/: 存放项目所需的图片资源。
• editorconfig: 编辑器配置文件。
• gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• favicon.ico: 网站图标。
• index.html: 应用程序的入口 HTML 文件。
• karma.conf.js: Karma 测试运行器配置文件。
• package.json: 项目依赖和脚本配置。
• spec-bundle.js: 测试配置文件。
• tsconfig.json: TypeScript 编译配置。
• typings.json: TypeScript 类型定义配置。
• webpack.config.js: Webpack 开发环境配置。
• webpack.test.config.js: Webpack 测试环境配置。

项目的启动文件介绍

• index.html: 这是应用程序的入口文件，包含了 Angular 应用程序的根组件 <app-root></app-root>。
• main.ts: 这是 Angular 应用程序的启动文件，负责引导根模块 AppModule。

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

platformBrowserDynamic().bootstrapModule(AppModule);

项目的配置文件介绍

• tsconfig.json: TypeScript 编译配置文件，定义了 TypeScript 编译选项。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

• package.json: 项目依赖和脚本配置文件，包含了项目的依赖包和启动脚本。

{
  "name": "angular2-website-routes",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 3001",
    "test": "karma start"
  },
  "dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/core": "^2.0.0",
    "@angular/platform-browser": "^2.0.0",
    "@angular/platform-browser-dynamic": "^2.0.0",
    "@angular/router": "^3.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "typescript": "^2.0.2",
    "webpack

angular2-website-routesA simple Angular 2 website example using routes项目地址:https://gitcode.com/gh_mirrors/an/angular2-website-routes