Angular 2 TypeScript学习笔记

简介

Angular 2是一款流行的前端框架，它基于TypeScript编写。TypeScript是JavaScript的超集，它为JavaScript代码提供了静态类型检查。使用Angular 2和TypeScript可以帮助我们构建更加可靠、可维护的Web应用程序。

安装Angular CLI

要开始使用Angular 2，首先需要安装Angular CLI。在命令行中执行以下命令：

Copy Code
npm install -g @angular/cli

创建新项目

要创建一个新的Angular项目，可以使用Angular CLI。在命令行中执行以下命令：

Copy Code
ng new my-app

这将创建一个名为my-app的新项目。

组件

组件是Angular应用程序的基本构建块。每个组件都有自己的HTML模板、样式表和控制器。要创建一个新的组件，可以使用Angular CLI。在命令行中执行以下命令：

Copy Code
ng generate component my-component

这将在src/app目录下创建一个名为my-component的新组件。

路由

路由是Angular应用程序的导航系统。路由允许我们定义URL路径和相应的组件。要添加路由到Angular应用程序，可以使用Angular CLI。在命令行中执行以下命令：

Copy Code
ng generate module app-routing --flat --module=app

这将在src/app目录下创建一个名为app-routing.module.ts的新模块。在该模块中，可以定义应用程序的路由器。

以下是一个简单的路由示例：

Copy Code
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

实例

下面是一个简单的Angular 2 TypeScript应用程序示例：

在命令行中创建一个新的Angular项目：

Copy Code
ng new my-app

使用Angular CLI创建一个新组件：

Copy Code
ng generate component my-component

使用Angular CLI创建一个新路由模块：

Copy Code
ng generate module app-routing --flat --module=app

在src/app目录下创建一个名为home.component.ts的新组件：

Copy Code
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '<h1>Welcome to the home page!</h1>'
})
export class HomeComponent { }

在src/app目录下创建一个名为about.component.ts的新组件：

Copy Code
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: '<h1>About Us</h1><p>We are a company dedicated to creating awesome web applications.</p>'
})
export class AboutComponent { }

在src/app目录下编辑app-routing.module.ts文件：

Copy Code
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

在src/app目录下编辑app.component.html文件：

Copy Code
<router-outlet></router-outlet>

在命令行中启动应用程序：

Copy Code
ng serve

在浏览器中访问http://localhost:4200可以看到HomeComponent组件，访问http://localhost:4200/about可以看到AboutComponent组件。

以上就是一个简单的Angular 2 TypeScript应用程序示例。