{"id":647,"date":"2025-01-01T18:09:32","date_gmt":"2025-01-01T10:09:32","guid":{"rendered":"https:\/\/www.laixuexila.com\/?p=647"},"modified":"2025-01-01T18:09:32","modified_gmt":"2025-01-01T10:09:32","slug":"angular%ef%bc%882%ef%bc%89%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/www.laixuexila.com\/index.php\/2025\/01\/01\/angular%ef%bc%882%ef%bc%89%e6%95%99%e7%a8%8b\/","title":{"rendered":"Angular\uff082+\uff09\u6559\u7a0b"},"content":{"rendered":"\n
\n

Angular\uff082+\uff09\u662f\u7531 Google \u5f00\u53d1\u7684\u4e00\u4e2a\u73b0\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u7528\u4e8e\u6784\u5efa\u52a8\u6001\u7684\u3001\u53ef\u6269\u5c55\u7684 Web \u5e94\u7528\u3002\u4e0e AngularJS\uff081.x\uff09\u76f8\u6bd4\uff0cAngular \u91c7\u7528\u4e86\u66f4\u52a0\u73b0\u4ee3\u7684\u67b6\u6784\u548c\u5f00\u53d1\u65b9\u5f0f\uff0c\u5305\u62ec\u6a21\u5757\u5316\u3001\u7ec4\u4ef6\u5316\u3001TypeScript \u652f\u6301\u7b49\u3002<\/p>\n<\/blockquote>\n\n\n\n

\n\n\n\n

1. \u73af\u5883\u51c6\u5907<\/strong><\/h3>\n\n\n\n

\u9996\u5148\uff0c\u4f60\u9700\u8981\u5728\u672c\u5730\u5f00\u53d1\u73af\u5883\u4e2d\u5b89\u88c5 Node.js \u548c Angular CLI\u3002<\/p>\n\n\n\n

1.1 \u5b89\u88c5 Node.js \u548c npm<\/h4>\n\n\n\n

Angular \u4f9d\u8d56\u4e8e Node.js \u548c npm\uff08Node.js \u7684\u5305\u7ba1\u7406\u5668\uff09\uff0c\u4f60\u9700\u8981\u9996\u5148\u5b89\u88c5\u5b83\u4eec\u3002<\/p>\n\n\n\n

    \n
  1. \u4e0b\u8f7d Node.js<\/a> \u5e76\u5b89\u88c5\u3002<\/li>\n\n\n\n
  2. \u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u9a8c\u8bc1 Node.js \u548c npm \u662f\u5426\u5b89\u88c5\u6210\u529f\uff1a<\/li>\n<\/ol>\n\n\n\n
       node -v\n   npm -v<\/code><\/pre>\n\n\n\n
    1.2 \u5b89\u88c5 Angular CLI<\/h4>\n\n\n\n
    Angular CLI \u662f\u4e00\u4e2a\u547d\u4ee4\u884c\u5de5\u5177\uff0c\u7528\u4e8e\u5e2e\u52a9\u521b\u5efa\u548c\u7ba1\u7406 Angular \u9879\u76ee\u3002\u5b89\u88c5\u547d\u4ee4\u5982\u4e0b\uff1a<\/p>\n\n\n\n
    npm install -g @angular\/cli<\/code><\/pre>\n\n\n\n
    \u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u547d\u4ee4\u6765\u68c0\u67e5 Angular CLI \u7248\u672c\uff1a<\/p>\n\n\n\n
    ng version<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    2. \u521b\u5efa\u4e00\u4e2a\u65b0\u7684 Angular \u9879\u76ee<\/strong><\/h3>\n\n\n\n
    \u4f7f\u7528 Angular CLI \u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u9879\u76ee\uff1a<\/p>\n\n\n\n
    ng new my-angular-app<\/code><\/pre>\n\n\n\n
      \n
    • my-angular-app<\/code> \u662f\u9879\u76ee\u7684\u540d\u79f0\u3002\u4f60\u53ef\u4ee5\u6839\u636e\u9700\u8981\u66ff\u6362\u4e3a\u4f60\u81ea\u5df1\u7684\u540d\u79f0\u3002<\/li>\n\n\n\n
    • \u5728\u521b\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u4f60\u4f1a\u88ab\u95ee\u5230\u662f\u5426\u4f7f\u7528 Angular \u8def\u7531\u3001\u9009\u62e9\u6837\u5f0f\u8868\uff08CSS\u3001SCSS \u7b49\uff09\u7b49\u9009\u9879\u3002<\/li>\n<\/ul>\n\n\n\n
      \u521b\u5efa\u5b8c\u6210\u540e\uff0c\u8fdb\u5165\u9879\u76ee\u76ee\u5f55\u5e76\u542f\u52a8\u5f00\u53d1\u670d\u52a1\u5668\uff1a<\/p>\n\n\n\n
      cd my-angular-app\nng serve<\/code><\/pre>\n\n\n\n
      \u8bbf\u95ee http:\/\/localhost:4200<\/code> \u5373\u53ef\u770b\u5230\u5e94\u7528\u8fd0\u884c\u7684\u9996\u9875\u3002<\/p>\n\n\n\n
      3. Angular \u9879\u76ee\u7ed3\u6784<\/strong><\/h3>\n\n\n\n
      \u4e00\u4e2a\u5178\u578b\u7684 Angular \u9879\u76ee\u7ed3\u6784\u5982\u4e0b\uff1a<\/p>\n\n\n\n
      my-angular-app\/\n\u251c\u2500\u2500 e2e\/                  # \u7aef\u5230\u7aef\u6d4b\u8bd5\n\u251c\u2500\u2500 node_modules\/         # \u9879\u76ee\u7684\u4f9d\u8d56\u5305\n\u251c\u2500\u2500 src\/                  # \u6e90\u4ee3\u7801\n\u2502   \u251c\u2500\u2500 app\/              # \u5e94\u7528\u7684\u6838\u5fc3\u4ee3\u7801\n\u2502   \u251c\u2500\u2500 assets\/           # \u9759\u6001\u8d44\u6e90\uff08\u5982\u56fe\u7247\u3001\u5b57\u4f53\u7b49\uff09\n\u2502   \u251c\u2500\u2500 environments\/     # \u73af\u5883\u914d\u7f6e\n\u2502   \u251c\u2500\u2500 index.html        # \u9875\u9762\u5165\u53e3\u6587\u4ef6\n\u2502   \u251c\u2500\u2500 main.ts           # \u5e94\u7528\u7684\u5165\u53e3\u6587\u4ef6\n\u2502   \u251c\u2500\u2500 styles.css        # \u5168\u5c40\u6837\u5f0f\n\u251c\u2500\u2500 angular.json          # Angular \u914d\u7f6e\u6587\u4ef6\n\u251c\u2500\u2500 package.json          # \u9879\u76ee\u4f9d\u8d56\u6587\u4ef6\n\u2514\u2500\u2500 tsconfig.json         # TypeScript \u914d\u7f6e\u6587\u4ef6<\/code><\/pre>\n\n\n\n
      \n\n\n\n
      4. \u7ec4\u4ef6\uff08Component\uff09<\/strong><\/h3>\n\n\n\n
      Angular \u7684\u6838\u5fc3\u662f \u7ec4\u4ef6<\/strong>\uff08Component\uff09\u3002\u6bcf\u4e2a\u7ec4\u4ef6\u90fd\u5305\u542b\uff1a<\/p>\n\n\n\n
        \n
      • \u6a21\u677f\uff08HTML\uff09<\/strong>\uff1a\u5b9a\u4e49\u7ec4\u4ef6\u7684\u89c6\u56fe\u3002<\/li>\n\n\n\n
      • \u6837\u5f0f\uff08CSS\/SCSS\uff09<\/strong>\uff1a\u5b9a\u4e49\u7ec4\u4ef6\u7684\u6837\u5f0f\u3002<\/li>\n\n\n\n
      • \u7c7b\uff08TypeScript\uff09<\/strong>\uff1a\u5b9a\u4e49\u7ec4\u4ef6\u7684\u884c\u4e3a\u548c\u6570\u636e\u3002<\/li>\n<\/ul>\n\n\n\n
        4.1 \u521b\u5efa\u7ec4\u4ef6<\/h4>\n\n\n\n
        \u4f7f\u7528 Angular CLI \u521b\u5efa\u4e00\u4e2a\u65b0\u7ec4\u4ef6\uff1a<\/p>\n\n\n\n
        ng generate component my-component<\/code><\/pre>\n\n\n\n
        \u8fd9\u4f1a\u5728 src\/app\/<\/code> \u76ee\u5f55\u4e0b\u751f\u6210\u4e00\u4e2a\u65b0\u7684\u7ec4\u4ef6\u6587\u4ef6\u5939\uff0c\u91cc\u9762\u5305\u62ec\uff1a<\/p>\n\n\n\n
          \n
        • my-component.component.ts<\/code>\uff1a\u7ec4\u4ef6\u7c7b\uff0c\u5b9a\u4e49\u6570\u636e\u548c\u884c\u4e3a\u3002<\/li>\n\n\n\n
        • my-component.component.html<\/code>\uff1a\u7ec4\u4ef6\u7684\u6a21\u677f\u6587\u4ef6\u3002<\/li>\n\n\n\n
        • my-component.component.css<\/code>\uff1a\u7ec4\u4ef6\u7684\u6837\u5f0f\u6587\u4ef6\u3002<\/li>\n\n\n\n
        • my-component.component.spec.ts<\/code>\uff1a\u7ec4\u4ef6\u7684\u6d4b\u8bd5\u6587\u4ef6\u3002<\/li>\n<\/ul>\n\n\n\n
          4.2 \u7ec4\u4ef6\u793a\u4f8b<\/h4>\n\n\n\n
          my-component.component.ts<\/code>\uff1a<\/p>\n\n\n\n
          import { Component } from '@angular\/core';\n\n@Component({\n  selector: 'app-my-component',\n  templateUrl: '.\/my-component.component.html',\n  styleUrls: ['.\/my-component.component.css']\n})\nexport class MyComponent {\n  message: string = 'Hello, Angular!';\n}<\/code><\/pre>\n\n\n\n
          my-component.component.html<\/code>\uff1a<\/p>\n\n\n\n
          <h1>{{ message }}<\/h1><\/code><\/pre>\n\n\n\n
          \u5728 app.component.html<\/code> \u4e2d\u4f7f\u7528 app-my-component<\/code> \u7ec4\u4ef6\uff1a<\/p>\n\n\n\n
          <app-my-component><\/app-my-component><\/code><\/pre>\n\n\n\n
          \n\n\n\n
          5. \u6a21\u5757\uff08Module\uff09<\/strong><\/h3>\n\n\n\n
          Angular \u5e94\u7528\u662f\u7531\u591a\u4e2a\u6a21\u5757\uff08Module\uff09\u7ec4\u6210\u7684\uff0c\u6700\u91cd\u8981\u7684\u662f\u6839\u6a21\u5757\uff08AppModule\uff09\u3002\u4e00\u4e2a\u6a21\u5757\u5c06\u76f8\u5173\u7684\u7ec4\u4ef6\u3001\u6307\u4ee4\u3001\u7ba1\u9053\u548c\u670d\u52a1\u7ec4\u7ec7\u5728\u4e00\u8d77\u3002<\/p>\n\n\n\n
          5.1 \u521b\u5efa\u6a21\u5757<\/h4>\n\n\n\n
          \u4f60\u53ef\u4ee5\u4f7f\u7528 Angular CLI \u6765\u521b\u5efa\u65b0\u7684\u6a21\u5757\uff1a<\/p>\n\n\n\n
          ng generate module my-module<\/code><\/pre>\n\n\n\n
          \u6a21\u5757\u6587\u4ef6\u901a\u5e38\u4f4d\u4e8e src\/app\/my-module<\/code> \u76ee\u5f55\u4e2d\u3002\u6a21\u5757\u6587\u4ef6\u901a\u5e38\u5305\u542b\uff1a<\/p>\n\n\n\n
            \n
          • my-module.module.ts<\/code>\uff1a\u6a21\u5757\u7c7b\uff0c\u5b9a\u4e49\u6a21\u5757\u4e2d\u7684\u7ec4\u4ef6\u548c\u670d\u52a1\u3002<\/li>\n<\/ul>\n\n\n\n
            5.2 \u5bfc\u5165\u6a21\u5757<\/h4>\n\n\n\n
            \u5728 app.module.ts<\/code> \u4e2d\u5bfc\u5165\u5176\u4ed6\u6a21\u5757\u6216\u7ec4\u4ef6\uff1a<\/p>\n\n\n\n
            import { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { AppComponent } from '.\/app.component';\nimport { MyComponent } from '.\/my-component\/my-component.component';\n\n@NgModule({\n  declarations: [AppComponent, MyComponent],\n  imports: [BrowserModule],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\n\n\n\n
            \n\n\n\n
            6. \u670d\u52a1\uff08Services\uff09\u548c\u4f9d\u8d56\u6ce8\u5165\uff08DI\uff09<\/strong><\/h3>\n\n\n\n
            \u670d\u52a1\u662f Angular \u4e2d\u7528\u4e8e\u5c01\u88c5\u4e1a\u52a1\u903b\u8f91\u548c\u6570\u636e\u5904\u7406\u7684\u7c7b\u3002Angular \u4f7f\u7528 \u4f9d\u8d56\u6ce8\u5165<\/strong>\uff08DI\uff09\u6a21\u5f0f\u6765\u7ba1\u7406\u548c\u63d0\u4f9b\u670d\u52a1\u3002<\/p>\n\n\n\n
            6.1 \u521b\u5efa\u670d\u52a1<\/h4>\n\n\n\n
            \u4f7f\u7528 CLI \u521b\u5efa\u670d\u52a1\uff1a<\/p>\n\n\n\n
            ng generate service my-service<\/code><\/pre>\n\n\n\n
            \u670d\u52a1\u6587\u4ef6\u901a\u5e38\u5305\u62ec\uff1a<\/p>\n\n\n\n
              \n
            • my-service.service.ts<\/code>\uff1a\u5b9a\u4e49\u670d\u52a1\u7684\u903b\u8f91\u3002<\/li>\n<\/ul>\n\n\n\n
              my-service.service.ts<\/code> \u793a\u4f8b\uff1a<\/p>\n\n\n\n
              import { Injectable } from '@angular\/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class MyService {\n  getData() {\n    return 'Data from service';\n  }\n}<\/code><\/pre>\n\n\n\n
              6.2 \u4f7f\u7528\u670d\u52a1<\/h4>\n\n\n\n
              \u5728\u7ec4\u4ef6\u4e2d\u6ce8\u5165\u5e76\u4f7f\u7528\u670d\u52a1\uff1a<\/p>\n\n\n\n
              import { Component } from '@angular\/core';\nimport { MyService } from '.\/my-service.service';\n\n@Component({\n  selector: 'app-root',\n  template: `<h1>{{ data }}<\/h1>`\n})\nexport class AppComponent {\n  data: string;\n\n  constructor(private myService: MyService) {\n    this.data = this.myService.getData();\n  }\n}<\/code><\/pre>\n\n\n\n
              \n\n\n\n
              7. \u8def\u7531\uff08Routing\uff09<\/strong><\/h3>\n\n\n\n
              Angular \u7684\u8def\u7531\u529f\u80fd\u53ef\u4ee5\u8ba9\u4f60\u4e3a\u4e0d\u540c\u7684 URL \u663e\u793a\u4e0d\u540c\u7684\u7ec4\u4ef6\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528 RouterModule<\/code> \u6765\u914d\u7f6e\u5e94\u7528\u4e2d\u7684\u8def\u7531\u3002<\/p>\n\n\n\n
              7.1 \u914d\u7f6e\u8def\u7531<\/h4>\n\n\n\n
              \u5728 app-routing.module.ts<\/code> \u6587\u4ef6\u4e2d\u914d\u7f6e\u8def\u7531\uff1a<\/p>\n\n\n\n
              import { NgModule } from '@angular\/core';\nimport { RouterModule, Routes } from '@angular\/router';\nimport { HomeComponent } from '.\/home\/home.component';\nimport { AboutComponent } from '.\/about\/about.component';\n\nconst routes: Routes = [\n  { path: '', component: HomeComponent },\n  { path: 'about', component: AboutComponent }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }<\/code><\/pre>\n\n\n\n
              \u5728 app.module.ts<\/code> \u4e2d\u5bfc\u5165\u8def\u7531\u6a21\u5757\uff1a<\/p>\n\n\n\n
              import { AppRoutingModule } from '.\/app-routing.module';\nimport { HomeComponent } from '.\/home\/home.component';\nimport { AboutComponent } from '.\/about\/about.component';\n\n@NgModule({\n  declarations: [HomeComponent, AboutComponent],\n  imports: [BrowserModule, AppRoutingModule],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\n\n\n\n
              7.2 \u5728\u6a21\u677f\u4e2d\u4f7f\u7528\u8def\u7531\u94fe\u63a5<\/h4>\n\n\n\n
              \u4f7f\u7528 routerLink<\/code> \u6307\u4ee4\u6765\u5bfc\u822a\u5230\u4e0d\u540c\u7684\u8def\u7531\uff1a<\/p>\n\n\n\n
              <nav>\n  <a routerLink=\"\/\">Home<\/a>\n  <a routerLink=\"\/about\">About<\/a>\n<\/nav>\n\n<router-outlet><\/router-outlet><\/code><\/pre>\n\n\n\n
              \n\n\n\n
              8. \u7ba1\u9053\uff08Pipes\uff09<\/strong><\/h3>\n\n\n\n
              Angular \u7ba1\u9053\u7528\u4e8e\u8f6c\u6362\u6570\u636e\uff0c\u4f8b\u5982\u683c\u5f0f\u5316\u65e5\u671f\u3001\u8d27\u5e01\u7b49\u3002<\/p>\n\n\n\n
              8.1 \u4f7f\u7528\u5185\u7f6e\u7ba1\u9053<\/h4>\n\n\n\n
              Angular \u63d0\u4f9b\u4e86\u8bb8\u591a\u5185\u7f6e\u7ba1\u9053\uff0c\u5982 date<\/code>\u3001currency<\/code> \u548c uppercase<\/code>\u3002<\/p>\n\n\n\n
              <p>{{ 12345.6789 | currency }}<\/p>\n<p>{{ today | date:'fullDate' }}<\/p>\n<p>{{ 'hello' | uppercase }}<\/p><\/code><\/pre>\n\n\n\n
              8.2 \u81ea\u5b9a\u4e49\u7ba1\u9053<\/h4>\n\n\n\n
              \u4f60\u53ef\u4ee5\u521b\u5efa\u81ea\u5b9a\u4e49\u7ba1\u9053\u6765\u683c\u5f0f\u5316\u6570\u636e\uff1a<\/p>\n\n\n\n
              ng generate pipe my-pipe<\/code><\/pre>\n\n\n\n
              my-pipe.pipe.ts<\/code> \u793a\u4f8b\uff1a<\/p>\n\n\n\n
              import { Pipe, PipeTransform } from '@angular\/core';\n\n@Pipe({\n  name: 'reverse'\n})\nexport class ReversePipe implements PipeTransform {\n  transform(value: string): string {\n    return value.split('').reverse().join('');\n  }\n}<\/code><\/pre>\n\n\n\n
              \u5728\u6a21\u677f\u4e2d\u4f7f\u7528\u81ea\u5b9a\u4e49\u7ba1\u9053\uff1a<\/p>\n\n\n\n
              <p>{{ 'hello' | reverse }}<\/p><\/code><\/pre>\n\n\n\n
              \n\n\n\n
              \u603b\u7ed3<\/strong><\/h3>\n\n\n\n
              Angular\uff082+\uff09\u662f\u4e00\u4e2a\u73b0\u4ee3\u7684\u3001\u529f\u80fd\u5f3a\u5927\u7684\u6846\u67b6\uff0c\u9002\u7528\u4e8e\u6784\u5efa\u5927\u578b\u7684\u3001\u590d\u6742\u7684\u5355\u9875\u5e94\u7528\u3002\u5b83\u901a\u8fc7\u6a21\u5757\u5316\u3001\u7ec4\u4ef6\u5316\u3001\u670d\u52a1\u548c\u4f9d\u8d56\u6ce8\u5165\u3001\u8def\u7531\u7b49\u7279\u6027\uff0c\u5e2e\u52a9\u5f00\u53d1\u8005\u9ad8\u6548\u7ec4\u7ec7\u548c\u7ba1\u7406\u5e94\u7528\u7684\u4e0d\u540c\u90e8\u5206\u3002\u638c\u63e1\u8fd9\u4e9b\u6838\u5fc3\u6982\u5ff5\u540e\uff0c\u4f60\u53ef\u4ee5\u5f00\u59cb\u6784\u5efa\u81ea\u5df1\u7684 Angular \u5e94\u7528\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
              Angular\uff082+\uff09\u662f\u7531 Google \u5f00\u53d1\u7684\u4e00\u4e2a\u73b0\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u7528\u4e8e\u6784\u5efa\u52a8\u6001\u7684\u3001\u53ef\u6269\u5c55\u7684 Web \u5e94\u7528\u3002\u4e0e  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46],"tags":[],"class_list":["post-647","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/comments?post=647"}],"version-history":[{"count":1,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/647\/revisions"}],"predecessor-version":[{"id":648,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/647\/revisions\/648"}],"wp:attachment":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/media?parent=647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/categories?post=647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/tags?post=647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}