{"id":38865,"date":"2023-01-26T12:11:05","date_gmt":"2023-08-25T21:43:14","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/"},"modified":"2024-04-29T11:33:05","modified_gmt":"2024-04-29T03:33:05","slug":"%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/","title":{"rendered":"\u7528Angular2\u5b9e\u73b0Hello world\uff01"},"content":{"rendered":"

\u7531\u4e8e\u8ba1\u5212\u8bbe\u8ba1\u7684Web\u670d\u52a1\u5c06\u91c7\u7528RIA\uff0c\u6240\u4ee5\u4e3a\u4e86\u672a\u6765\u7684\u5b66\u4e60\u6837\u4f8b\uff0c\u4e5f\u5e0c\u671b\u9009\u62e9\u4e00\u4e9b\u9002\u5408RIA\u7684JS\u6846\u67b6\u3002\u56e0\u6b64\uff0c\u6211\u6253\u7b97\u5148\u5c1d\u8bd5\u4e00\u4e0bAngular2\u3002\u9996\u5148\u662fhello world\u3002<\/p>\n

\u8fd9\u7bc7\u6587\u7ae0\u4e0e\u82f1\u8bed\u7248Angular2\u7684\u5feb\u901f\u5165\u95e8\u9875\u9762\u5185\u5bb9\u51e0\u4e4e\u76f8\u540c\u3002<\/p>\n

\u6211\u4e5f\u5728\u601d\u8003\u7740\u662f\u5426\u503c\u5f97\u53d1\u5e03\u8fd9\u6837\u7684\u6587\u7ae0\u3002\u4f46\u6211\u610f\u8bc6\u5230\u4e16\u754c\u4e0a\u80af\u5b9a\u4e5f\u6709\u53ea\u56e0\u4e3a\u6587\u6863\u662f\u82f1\u6587\u800c\u5931\u53bb\u52a8\u529b\u7684\u4eba\uff0c\u6240\u4ee5\u6211\u5199\u4e86\u4e00\u7bc7\u8f6c\u8f7d\u4e8699\uff05\u539f\u59cb\u5185\u5bb9\u7684\u6587\u7ae0\u3002
\n\u867d\u7136\u6211\u4e5f\u53ef\u4ee5\u5c06\u4ee3\u7801\u6700\u5c0f\u5316\uff0c\u4f46\u8003\u8651\u5230\u6211\u5bf9Angular2\u7684\u4e86\u89e3\u975e\u5e38\u6709\u9650\uff0c\u53ef\u80fd\u4f1a\u53d1\u5e03\u9519\u8bef\u7684\u4fe1\u606f\uff0c\u6240\u4ee5\u6211\u51b3\u5b9a\u505c\u6b62\u8fd9\u4e2a\u60f3\u6cd5\u3002<\/p>\n

\u8fd9\u6b21\u60f3\u505a\u7684\u4e8b\u60c5\u3002<\/h2>\n
    \u7528Angular2\u6765\u663e\u793a\u300chello world\u300d\u3002\u7ed3\u675f\u3002<\/ol>\n

    \u73af\u5883<\/h2>\n
      \n
    • \n
        Microsoft Surface Pro4 (i5 2.4GHz, Mem 4GB)<\/ul>\n<\/li>\n<\/ul>\n

         <\/p>\n

          \n
        • \n
            OS:Windows 10 Pro<\/ul>\n<\/li>\n<\/ul>\n

             <\/p>\n

              \n
            • \n
                node.js v7.1.9<\/ul>\n<\/li>\n<\/ul>\n

                 <\/p>\n

                  npm v3.10.9<\/ul>\n

                  \u4e8b\u524d\u51c6\u5907<\/h2>\n
                    Windows\u7528\u306enode.js\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb https:\/\/nodejs.org\/en\/<\/ul>\n

                    \u5f00\u59cb\u6784\u5efa<\/h2>\n

                    \u6309\u7167\u6b64\u7f51\u5740\u4e0a\u7684\u6b65\u9aa4\u3002<\/p>\n

                    \u521b\u5efa\u5e76\u79fb\u52a8\u81f3\u672c\u6b21\u793a\u4f8b\u7684\u76ee\u5f55\u3002
                    \n\u5f53\u524d\u4f4d\u7f6e\u53ef\u4ee5\u662f\u4efb\u4f55\u5730\u65b9\u3002\uff08\u672c\u4eba\u9009\u62e9\u4e86C:\\work\\angular\\\uff09<\/p>\n

                    mkdir hello_angular2\r\ncd hello_angular2\r\n<\/code><\/pre>\n
                    \u521b\u5efa\u7528\u4e8e\u9879\u76ee\u7684\u914d\u7f6e\u6587\u4ef6<\/h3>\n
                    \u5305.json<\/h4>\n
                    \u5c06package.json\u6587\u4ef6\u521b\u5efa\u5728hello_angular2\u7684\u6839\u76ee\u5f55\u4e0b\u3002
                    \n\u7c7b\u4f3c\u4e8emaven\u7684pom\u6587\u4ef6\uff0c\u8be5\u6587\u4ef6\u8bb0\u5f55\u4e86\u672c\u9879\u76ee\u7684\u4f9d\u8d56\u5e93\u96c6\u5408\u548c\u5305\u4fe1\u606f\uff0c\u5e76\u901a\u8fc7npm\u547d\u4ee4\u8fdb\u884c\u6279\u91cf\u4e0b\u8f7d\u3002\uff08\u6b63\u5982maven\u4e00\u6837\uff09
                    \n\u5728hello world\u8fd9\u4e48\u7b80\u5355\u7684\u793a\u4f8b\u4e2d\uff0c\u6211\u4e5f\u66fe\u60f3\u8fc7\u4e3a\u4ec0\u4e48\u9700\u8981\u8fd9\u4e48\u591a\u4f9d\u8d56\u5e93\uff1f\u4f46\u7531\u4e8e\u6211\u8fd8\u4e0d\u4e86\u89e3\u6bcf\u4e2a\u5e93\u7684\u542b\u4e49\uff0c\u6240\u4ee5\u8fd8\u662f\u6309\u7167\u5feb\u901f\u5165\u95e8\u7684\u65b9\u5f0f\u8fdb\u884c\u4f7f\u7528\u3002
                    \npackage.json\u662fnode.js\u7684\u6807\u51c6\u89c4\u8303\uff0c\u5173\u4e8e\u6bcf\u4e2a\u5b57\u6bb5\u7684\u8be6\u7ec6\u8bf4\u660e\uff0c\u8bf7\u53c2\u8003npm package.json\u7684\u65e5\u672c\u8bed\u7248\u8bf4\u660e\u4e66\u7b49\u8d44\u6599\u3002<\/p>\n
                    \u7531\u4e8e\u672c\u6b21\u793a\u4f8b\u4f7f\u7528\u4e86lite-server\u4f5c\u4e3aHTTP\u670d\u52a1\u5668\uff0c\u6240\u4ee5\u5728scripts.start\u4e2d\u8fdb\u884c\u4e86\u76f8\u5e94\u7684\u63cf\u8ff0\u3002<\/p>\n
                    {<\/span>\r\n  \"name\"<\/span>:<\/span> \"hello_angular2\"<\/span>,<\/span>\r\n  \"version\"<\/span>:<\/span> \"1.0.0\"<\/span>,<\/span>\r\n  \"scripts\"<\/span>:<\/span> {<\/span>\r\n    \"start\"<\/span>:<\/span> \"tsc && concurrently <\/span>\\\"<\/span>tsc -w<\/span>\\\"<\/span> \\\"<\/span>lite-server<\/span>\\\"<\/span> \"<\/span>,<\/span>\r\n    \"lite\"<\/span>:<\/span> \"lite-server\"<\/span>,<\/span>\r\n    \"tsc\"<\/span>:<\/span> \"tsc\"<\/span>,<\/span>\r\n    \"tsc:w\"<\/span>:<\/span> \"tsc -w\"<\/span>\r\n  },<\/span>\r\n  \"licenses\"<\/span>:<\/span> [<\/span>\r\n    {<\/span>\r\n      \"type\"<\/span>:<\/span> \"MIT\"<\/span>,<\/span>\r\n      \"url\"<\/span>:<\/span> \"https:\/\/github.com\/angular\/angular.io\/blob\/master\/LICENSE\"<\/span>\r\n    }<\/span>\r\n  ],<\/span>\r\n  \"dependencies\"<\/span>:<\/span> {<\/span>\r\n    \"@angular\/common\"<\/span>:<\/span> \"~2.2.0\"<\/span>,<\/span>\r\n    \"@angular\/compiler\"<\/span>:<\/span> \"~2.2.0\"<\/span>,<\/span>\r\n    \"@angular\/core\"<\/span>:<\/span> \"~2.2.0\"<\/span>,<\/span>\r\n    \"@angular\/forms\"<\/span>:<\/span> \"~2.2.0\"<\/span>,<\/span>\r\n    \"@angular\/http\"<\/span>:<\/span> \"~2.2.0\"<\/span>,<\/span>\r\n    \"@angular\/platform-browser\"<\/span>:<\/span> \"~2.2.0\"<\/span>,<\/span>\r\n    \"@angular\/platform-browser-dynamic\"<\/span>:<\/span> \"~2.2.0\"<\/span>,<\/span>\r\n    \"@angular\/router\"<\/span>:<\/span> \"~3.2.0\"<\/span>,<\/span>\r\n    \"@angular\/upgrade\"<\/span>:<\/span> \"~2.2.0\"<\/span>,<\/span>\r\n    \"angular-in-memory-web-api\"<\/span>:<\/span> \"~0.1.15\"<\/span>,<\/span>\r\n    \"core-js\"<\/span>:<\/span> \"^2.4.1\"<\/span>,<\/span>\r\n    \"reflect-metadata\"<\/span>:<\/span> \"^0.1.8\"<\/span>,<\/span>\r\n    \"rxjs\"<\/span>:<\/span> \"5.0.0-beta.12\"<\/span>,<\/span>\r\n    \"systemjs\"<\/span>:<\/span> \"0.19.39\"<\/span>,<\/span>\r\n    \"zone.js\"<\/span>:<\/span> \"^0.6.25\"<\/span>\r\n  },<\/span>\r\n  \"devDependencies\"<\/span>:<\/span> {<\/span>\r\n    \"@types\/core-js\"<\/span>:<\/span> \"^0.9.34\"<\/span>,<\/span>\r\n    \"@types\/node\"<\/span>:<\/span> \"^6.0.45\"<\/span>,<\/span>\r\n    \"concurrently\"<\/span>:<\/span> \"^3.0.0\"<\/span>,<\/span>\r\n    \"lite-server\"<\/span>:<\/span> \"^2.2.2\"<\/span>,<\/span>\r\n    \"typescript\"<\/span>:<\/span> \"^2.0.3\"<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                    tsconfig.json\u7684\u91ca\u4e49\u662fTypeScript\u914d\u7f6e\u6587\u4ef6\u3002<\/h4>\n
                    \u5c06tsconfig.json\u6587\u4ef6\u521b\u5efa\u5728hello_angular2\u7684\u6839\u76ee\u5f55\u4e0b\u3002
                    \n\u5728Angular2\u4e2d\uff0c\u4f7f\u7528TypeScript\u662f\u63a8\u8350\u7684\u65b9\u5f0f\uff0c\u4f5c\u8005\u4e5f\u559c\u6b22\u4f7f\u7528TypeScript\u8fdb\u884c\u7f16\u5199\uff0c\u6240\u4ee5\u6253\u7b97\u4f7f\u7528TypeScript\u3002
                    \n\u7136\u800c\uff0c\u76ee\u524d\u652f\u6301TypeScript\u7684\u6d4f\u89c8\u5668\u975e\u5e38\u6709\u9650\u3002
                    \n\u56e0\u6b64\uff0c\u8fd9\u4e2a\u914d\u7f6e\u6587\u4ef6\u7528\u4e8e\u5c06TypeScript\u4ee3\u7801\u8f6c\u6362\u4e3aJavaScript\u3002
                    \n“target”\u53c2\u6570\u6307\u5b9a\u8981\u8f6c\u6362\u6210\u7684JavaScript\u7248\u672c\uff0c\u8fd9\u91cc\u4f7f\u7528”es5″\u8868\u793a\u8f6c\u6362\u4e3aEcmaScript5\u3002
                    \n\u57fa\u672c\u4e0a\uff0c\u9879\u76ee\u4e2d\u7684\u6240\u6709.ts\u6587\u4ef6\u90fd\u4f1a\u88ab\u8f6c\u6362\u3002<\/p>\n
                    \u5982\u679c\u60a8\u60f3\u66f4\u8be6\u7ec6\u4e86\u89e3 tsconfig.json\uff0c\u8bf7\u63a8\u8350\u60a8\u67e5\u770b tsconfig.json\uff08TypeScript\u914d\u7f6e\u6587\u4ef6\uff09- \uff20IT\u3002<\/p>\n
                    {<\/span>\r\n  \"<\/span>compilerOptions<\/span>\"<\/span>:<\/span> {<\/span>\r\n    \"<\/span>target<\/span>\"<\/span>:<\/span> \"<\/span>es5<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>module<\/span>\"<\/span>:<\/span> \"<\/span>commonjs<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>moduleResolution<\/span>\"<\/span>:<\/span> \"<\/span>node<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>sourceMap<\/span>\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"<\/span>emitDecoratorMetadata<\/span>\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"<\/span>experimentalDecorators<\/span>\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"<\/span>removeComments<\/span>\"<\/span>:<\/span> false<\/span>,<\/span>\r\n    \"<\/span>noImplicitAny<\/span>\"<\/span>:<\/span> false<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                    \u7cfb\u7edfjs\u914d\u7f6e\u6587\u4ef6<\/h4>\n
                    \u63a5\u4e0b\u6765\uff0c\u5728hello_angular2\u6587\u4ef6\u5939\u7684\u6839\u76ee\u5f55\u4e0b\u521b\u5efasystemjs.config.js\u6587\u4ef6\u3002
                    \n\u8fd9\u662fAngular2\u542f\u52a8\u65f6\u7684\u57fa\u672c\u914d\u7f6e\u4fe1\u606f\u3002
                    \n\u5173\u4e8e\u8fd9\u4e2a\u914d\u7f6e\u4fe1\u606f\uff0c\u4e3b\u8981\u662f\u82f1\u6587\u6587\u6863\uff0c\u4f46\u662f\u5982\u679c\u5728Google\u4e2d\u641c\u7d22”System.config javascript”\uff0c\u4f1a\u6709\u4e00\u4e9b\u76f8\u5173\u7684\u4fe1\u606f\u51fa\u73b0\uff0c\u5982\u679c\u611f\u5174\u8da3\u7684\u8bdd\uff0c\u8bf7\u81ea\u884c\u67e5\u627e\u3002<\/p>\n
                    \/**\r\n * System configuration for Angular samples\r\n * Adjust as necessary for your application needs.\r\n *\/<\/span>\r\n(<\/span>function<\/span> (<\/span>global<\/span>)<\/span> {<\/span>\r\n  System<\/span>.<\/span>config<\/span>({<\/span>\r\n    paths<\/span>:<\/span> {<\/span>\r\n      \/\/ paths serve as alias<\/span>\r\n      '<\/span>npm:<\/span>'<\/span>:<\/span> '<\/span>node_modules\/<\/span>'<\/span>\r\n    },<\/span>\r\n    \/\/ map tells the System loader where to look for things<\/span>\r\n    map<\/span>:<\/span> {<\/span>\r\n      \/\/ our app is within the app folder<\/span>\r\n      app<\/span>:<\/span> '<\/span>app<\/span>'<\/span>,<\/span>\r\n      \/\/ angular bundles<\/span>\r\n      '<\/span>@angular\/core<\/span>'<\/span>:<\/span> '<\/span>npm:@angular\/core\/bundles\/core.umd.js<\/span>'<\/span>,<\/span>\r\n      '<\/span>@angular\/common<\/span>'<\/span>:<\/span> '<\/span>npm:@angular\/common\/bundles\/common.umd.js<\/span>'<\/span>,<\/span>\r\n      '<\/span>@angular\/compiler<\/span>'<\/span>:<\/span> '<\/span>npm:@angular\/compiler\/bundles\/compiler.umd.js<\/span>'<\/span>,<\/span>\r\n      '<\/span>@angular\/platform-browser<\/span>'<\/span>:<\/span> '<\/span>npm:@angular\/platform-browser\/bundles\/platform-browser.umd.js<\/span>'<\/span>,<\/span>\r\n      '<\/span>@angular\/platform-browser-dynamic<\/span>'<\/span>:<\/span> '<\/span>npm:@angular\/platform-browser-dynamic\/bundles\/platform-browser-dynamic.umd.js<\/span>'<\/span>,<\/span>\r\n      '<\/span>@angular\/http<\/span>'<\/span>:<\/span> '<\/span>npm:@angular\/http\/bundles\/http.umd.js<\/span>'<\/span>,<\/span>\r\n      '<\/span>@angular\/router<\/span>'<\/span>:<\/span> '<\/span>npm:@angular\/router\/bundles\/router.umd.js<\/span>'<\/span>,<\/span>\r\n      '<\/span>@angular\/forms<\/span>'<\/span>:<\/span> '<\/span>npm:@angular\/forms\/bundles\/forms.umd.js<\/span>'<\/span>,<\/span>\r\n      '<\/span>@angular\/upgrade<\/span>'<\/span>:<\/span> '<\/span>npm:@angular\/upgrade\/bundles\/upgrade.umd.js<\/span>'<\/span>,<\/span>\r\n      \/\/ other libraries<\/span>\r\n      '<\/span>rxjs<\/span>'<\/span>:<\/span>                      '<\/span>npm:rxjs<\/span>'<\/span>,<\/span>\r\n      '<\/span>angular-in-memory-web-api<\/span>'<\/span>:<\/span> '<\/span>npm:angular-in-memory-web-api\/bundles\/in-memory-web-api.umd.js<\/span>'<\/span>\r\n    },<\/span>\r\n    \/\/ packages tells the System loader how to load when no filename and\/or no extension<\/span>\r\n    packages<\/span>:<\/span> {<\/span>\r\n      app<\/span>:<\/span> {<\/span>\r\n        main<\/span>:<\/span> '<\/span>.\/main.js<\/span>'<\/span>,<\/span>\r\n        defaultExtension<\/span>:<\/span> '<\/span>js<\/span>'<\/span>\r\n      },<\/span>\r\n      rxjs<\/span>:<\/span> {<\/span>\r\n        defaultExtension<\/span>:<\/span> '<\/span>js<\/span>'<\/span>\r\n      }<\/span>\r\n    }<\/span>\r\n  });<\/span>\r\n})(<\/span>this<\/span>);<\/span>\r\n<\/code><\/pre>\n
                    \u5b89\u88c5<\/h3>\n
                    \u25a0 \u76ee\u524d\u7684\u7ec4\u6210<\/p>\n
                    \u4f60\u597d_angular2\/
                    \n\u251c \u5305\u914d\u7f6e.json
                    \n\u251c \u7cfb\u7edf\u914d\u7f6e.js
                    \n\u2514 TypeScript\u914d\u7f6e.json<\/p><\/blockquote>\n
                    \u60a8\u597d\uff0c\u60a8\u53ef\u4ee5\u5728hello_angular2\u76ee\u5f55\u4e0b\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n
                    npm install\r\n<\/code><\/pre>\n
                    \u6211\u5c06\u521b\u5efa\u4e00\u4e2a\u7528\u4e8e\u653e\u7f6e\u81ea\u5236\u811a\u672c\u7684\u5e94\u7528\u7a0b\u5e8f\u76ee\u5f55\u3002<\/p>\n
                    mkdir app\r\n<\/code><\/pre>\n
                    \u5e94\u7528\u7a0b\u5e8f\u7684\u8bbe\u7f6e<\/h3>\n
                    app\u6a21\u5757.ts<\/h4>\n
                    \u5728app\u6587\u4ef6\u5939\u91cc\u521b\u5efa\u4e00\u4e2aapp.module.ts\u6587\u4ef6\u3002
                    \n\u7531\u4e8e\u662f.ts\u6587\u4ef6\uff0c\u9700\u8981\u4f7f\u7528TypeScript\u7f16\u5199\u7684\u7528\u6237\u811a\u672c\u3002
                    \n\u8be5\u6587\u4ef6\u5c06\u7528\u4e8e\u5bfc\u5165\u6b64\u5e94\u7528\u7a0b\u5e8f\u4e2d\u8981\u4f7f\u7528\u7684\u6a21\u5757\u3002
                    \n\u6709\u5173NgModule\u7684\u8be6\u7ec6\u4fe1\u606f\uff0c\u8bf7\u53c2\u8003\u8fd9\u4e2a\u7f51\u7ad9\u201cNgModule\u5c0e\u5165\u306b\u3064\u3044\u3066 – Angular2 Info\u201d\u3002<\/p>\n
                    import<\/span> {<\/span> NgModule<\/span> }<\/span>      from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> BrowserModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> AppComponent<\/span> }<\/span>   from<\/span> '<\/span>.\/app.component<\/span>'<\/span>;<\/span>\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  imports<\/span>:<\/span>      [<\/span> BrowserModule<\/span> ],<\/span>\r\n  declarations<\/span>:<\/span> [<\/span> AppComponent<\/span> ],<\/span>\r\n  bootstrap<\/span>:<\/span>    [<\/span> AppComponent<\/span> ]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
                    \u5e94\u7528\/\u5e94\u7528\u7ec4\u4ef6.ts<\/h4>\n
                    \u5728app\u7684\u76f4\u4e0b\u521b\u5efa\u4e00\u4e2aapp.component.ts\u6587\u4ef6\u3002
                    \n\u8fd9\u4e5f\u662f\u4e00\u4e2a\u4f7f\u7528TypeScript\u7f16\u5199\u7684\u7528\u6237\u811a\u672c\u3002
                    \n\u7531\u4e8e\u8fd9\u4e2a\u7ec4\u4ef6\u7684\u914d\u7f6e\u5bf9\u4e8eAngular2\u6765\u8bf4\u662f\u6700\u91cd\u8981\u7684\uff0c\u6240\u4ee5\u6211\u5efa\u8bae\u4f60\u5728\u5b8c\u6210hello world\u4e4b\u540e\u5c1d\u8bd5\u6307\u5b9a\u4e00\u4e9b\u4e0d\u540c\u7684\u7ec4\u4ef6\u6765\u73a9\u800d\u3002
                    \n\u5728Angular2\u7684\u6307\u5357\u4e2d\u6709\u5404\u79cd\u5404\u6837\u7684\u793a\u4f8b\u4f9b\u4f60\u53c2\u8003\u3002<\/p>\n
                    import<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>my-app<\/span>'<\/span>,<\/span>\r\n  template<\/span>:<\/span> '<\/span><h1>Hello World!<\/h1><\/span>'<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppComponent<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
                    \u5e94\u7528\u7a0b\u5e8f\/\u4e3b\u8981.ts<\/h4>\n
                    \u5728\u5e94\u7528\u7a0b\u5e8f\u7684\u6839\u76ee\u5f55\u4e0b\u521b\u5efamain.ts\u6587\u4ef6\u3002
                    \n\u8fd9\u662f\u5728\u5e94\u7528\u7a0b\u5e8f\u542f\u52a8\u65f6\u52a0\u8f7d\u7684\u6700\u57fa\u672c\u7684\u811a\u672c\u6587\u4ef6\u3002
                    \n\u540d\u79f0\u5e76\u4e0d\u56fa\u5b9a\uff0c\u800c\u662f\u6839\u636esystemjs.config.js\u4e2d\u7684”map.app\u540d\u79f0”+”packages.app.main”\u8def\u5f84\u4e2d\u7684\u6587\u4ef6\u8fdb\u884c\u52a0\u8f7d\u3002
                    \n\u672c\u4f8b\u4e2d\u6307\u5b9a\u4e86app\u548c.\/main.js\uff0c\u4f46\u662f\u8fd9\u4e2a.ts\u6587\u4ef6\u5c06\u4f1a\u88ab\u8f6c\u6362\u4e3aES5\u7684main.js\u6587\u4ef6\uff0c\u5e76\u8fdb\u884c\u52a0\u8f7d\u3002<\/p>\n
                    import<\/span> {<\/span> platformBrowserDynamic<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser-dynamic<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> AppModule<\/span> }<\/span> from<\/span> '<\/span>.\/app.module<\/span>'<\/span>;<\/span>\r\nconst<\/span> platform<\/span> =<\/span> platformBrowserDynamic<\/span>();<\/span>\r\nplatform<\/span>.<\/span>bootstrapModule<\/span>(<\/span>AppModule<\/span>);<\/span>\r\n<\/code><\/pre>\n
                    \u521b\u5efa\u4e00\u4e2a\u5355\u9875\u9762\u7684HTML\u3002<\/h4>\n
                    \u5728hello_angular2\u9879\u76ee\u4e2d\u521b\u5efa\u4e00\u4e2a\u540d\u4e3aindex.html\u7684\u6587\u4ef6\u3002
                    \n\u8bf7\u6ce8\u610f\uff0c\u5b83\u4e0d\u4f4d\u4e8eapp\u6587\u4ef6\u5939\u4e0b\u3002
                    \n\u4f60\u521a\u624d\u5728app.component.ts\u4e2d\u6307\u5b9a\u7684\u7ec4\u4ef6\u5c06\u88ab\u7ed1\u5b9a\u5230\u8fd9\u91cc\u3002<\/p>\n
                    <html><\/span>\r\n  <head><\/span>\r\n    <title><\/span>Angular QuickStart<\/title><\/span>\r\n    <meta<\/span> charset=<\/span>\"UTF-8\"<\/span>><\/span>\r\n    <meta<\/span> name=<\/span>\"viewport\"<\/span> content=<\/span>\"width=device-width, initial-scale=1\"<\/span>><\/span>\r\n    <link<\/span> rel=<\/span>\"stylesheet\"<\/span> href=<\/span>\"styles.css\"<\/span>><\/span>\r\n    <!-- 1. Load libraries --><\/span>\r\n     <!-- Polyfill for older browsers --><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/core-js\/client\/shim.min.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/zone.js\/dist\/zone.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/reflect-metadata\/Reflect.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/systemjs\/dist\/system.src.js\"<\/span>><\/script><\/span>\r\n    <!-- 2. Configure SystemJS --><\/span>\r\n    <script <\/span>src=<\/span>\"systemjs.config.js\"<\/span>><\/script><\/span>\r\n    <script><\/span>\r\n      System<\/span>.<\/span>import<\/span>(<\/span>'<\/span>app<\/span>'<\/span>).<\/span>catch<\/span>(<\/span>function<\/span>(<\/span>err<\/span>){<\/span> console<\/span>.<\/span>error<\/span>(<\/span>err<\/span>);<\/span> });<\/span>\r\n    <\/script><\/span>\r\n  <\/head><\/span>\r\n  <!-- 3. Display the application --><\/span>\r\n  <body><\/span>\r\n    <my-app><\/span>Loading...<\/my-app><\/span>\r\n  <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                    \u6837\u5f0f.css<\/h4>\n
                    \u4f60\u597d_angular2\uff0c\u6211\u5011\u5728\u5b83\u4e0b\u9762\u5275\u5efa\u4e86\u4e00\u500bstyle.css\u3002
                    \n\u9019\u53ea\u662f\u4e00\u500b\u666e\u901a\u7684CSS\uff0c\u6c92\u6709\u4ec0\u9ebc\u7279\u5225\u4e4b\u8655\u3002<\/p>\n
                    \/* Master Styles *\/<\/span>\r\nh1<\/span> {<\/span>\r\n  color<\/span>:<\/span> #369<\/span>;<\/span>\r\n  font-family<\/span>:<\/span> Arial<\/span>,<\/span> Helvetica<\/span>,<\/span> sans-serif<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 250%<\/span>;<\/span>\r\n}<\/span>\r\nh2<\/span>,<\/span> h3<\/span> {<\/span>\r\n  color<\/span>:<\/span> #444<\/span>;<\/span>\r\n  font-family<\/span>:<\/span> Arial<\/span>,<\/span> Helvetica<\/span>,<\/span> sans-serif<\/span>;<\/span>\r\n  font-weight<\/span>:<\/span> lighter<\/span>;<\/span>\r\n}<\/span>\r\nbody<\/span> {<\/span>\r\n  margin<\/span>:<\/span> 2em<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                    Angular2\u7684\u542f\u52a8<\/h3>\n
                    \u25a0 \u76ee\u524d\u7684\u6784\u6210<\/p>\n
                    \u4f60\u597d\uff0cAngular2\/
                    \n\u251c app\/
                    \n\u2502 \u251c app.component.ts
                    \n\u2502 \u251c app.module.ts
                    \n\u2502 \u2514 main.ts
                    \n\u251c node_modules\/
                    \n\u251c index.html
                    \n\u251c package.json
                    \n\u251c styles.css
                    \n\u251c systemjs.config.js
                    \n\u2514 tsconfig.json<\/p><\/blockquote>\n
                    \u6211\u4eec\u5c06\u6267\u884c`npm start`\u547d\u4ee4\uff0c\u7531\u4e8e`package.json`\u4e2d\u6709`lite-server`\u7684\u914d\u7f6e\uff0c\u6240\u4ee5\u5728\u6784\u5efa\u5b8c\u6210\u540e\u4f1a\u81ea\u52a8\u542f\u52a8\u4e00\u4e2aHTTP\u670d\u52a1\u5668\u5e76\u6253\u5f00\u6d4f\u89c8\u5668\u3002<\/p>\n
                    \u90a3\u4e48\uff0c\u5f00\u59cb\u884c\u52a8\u5427\u3002<\/p>\n
                    npm start\r\n<\/code><\/pre>\n
                    \u5982\u679c\u6d4f\u89c8\u5668\u542f\u52a8\u5e76\u663e\u793a\u4ee5\u4e0b\u5185\u5bb9\uff0c\u5219\u8868\u793a\u6210\u529f\u3002<\/p>\n
                    \"angular.PNG\"<\/div>\n
                    \u53ea\u9700\u8981\u4e00\u4e2a\u9009\u9879\uff1a\u7a0d\u7a0d\u589e\u52a0\u7f16\u8f91\u3002<\/h3>\n
                    \u7531\u4e8e\u53ea\u6709\u8fd9\u4e48\u5c11\u7684\u5185\u5bb9\u5b9e\u5728\u662f\u592a\u6ca1\u6709\u521b\u610f\u4e86\uff0c\u6211\u4f1a\u7a0d\u5fae\u6dfb\u52a0\u4e00\u70b9\u5185\u5bb9\u3002<\/p>\n
                    \u7f16\u8f91app\/app.component.ts\u3002<\/h4>\n
                    \u6211\u5011\u5c07\u7de8\u8f2f\u525b\u525b\u5beb\u7684 app.component.ts \u6587\u4ef6\uff0c\u4e26\u589e\u52a0 Component \u7684\u6307\u5b9a\u3002<\/p>\n
                    import<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>my-app<\/span>'<\/span>,<\/span>\r\n  template<\/span>:<\/span> '<\/span><h1>Hello World!<\/h1><\/span>'<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppComponent<\/span> {<\/span> }<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>key-up2<\/span>'<\/span>,<\/span>\r\n  template<\/span>:<\/span> `\r\n    <input #box (keyup)=\"onKey(box.value)\">\r\n    <p>{{values}}<\/p>\r\n  `<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> KeyUpComponent_v2<\/span> {<\/span>\r\n  values<\/span> =<\/span> ''<\/span>;<\/span>\r\n  onKey<\/span>(<\/span>value<\/span>:<\/span> string<\/span>)<\/span> {<\/span>\r\n    this<\/span>.<\/span>values<\/span> +=<\/span> value<\/span> +<\/span> '<\/span> | <\/span>'<\/span>;<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                    app.module.ts \u7684\u539f\u59cb\u4ee3\u7801<\/h4>\n
                    \u8fd9\u4e2a\u4e5f\u662f\u4e00\u6837\u7684\u3002<\/p>\n
                    import<\/span> {<\/span> NgModule<\/span> }<\/span>      from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> BrowserModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> AppComponent<\/span>,<\/span>KeyUpComponent_v2<\/span> }<\/span>   from<\/span> '<\/span>.\/app.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Ng2TableModule<\/span> }<\/span> from<\/span> '<\/span>ng2-table\/ng2-table<\/span>'<\/span>;<\/span>\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  imports<\/span>:<\/span>      [<\/span> BrowserModule<\/span> ],<\/span>\r\n  declarations<\/span>:<\/span> [<\/span> AppComponent<\/span>,<\/span>KeyUpComponent_v2<\/span> ],<\/span>\r\n  bootstrap<\/span>:<\/span>    [<\/span> AppComponent<\/span>,<\/span>KeyUpComponent_v2<\/span> ]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
                    \u7f16\u8f91index.html<\/h4>\n
                    \u8bf7\u7f16\u8f91\u4e4b\u524d\u5199\u7684index.html\u6587\u4ef6\uff0c\u589e\u52a0key-up2\u6807\u7b7e\u3002<\/p>\n
                    <html><\/span>\r\n  <head><\/span>\r\n    <title><\/span>Angular QuickStart<\/title><\/span>\r\n    <meta<\/span> charset=<\/span>\"UTF-8\"<\/span>><\/span>\r\n    <meta<\/span> name=<\/span>\"viewport\"<\/span> content=<\/span>\"width=device-width, initial-scale=1\"<\/span>><\/span>\r\n    <link<\/span> rel=<\/span>\"stylesheet\"<\/span> href=<\/span>\"styles.css\"<\/span>><\/span>\r\n    <!-- 1. Load libraries --><\/span>\r\n     <!-- Polyfill for older browsers --><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/core-js\/client\/shim.min.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/zone.js\/dist\/zone.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/reflect-metadata\/Reflect.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"node_modules\/systemjs\/dist\/system.src.js\"<\/span>><\/script><\/span>\r\n    <!-- 2. Configure SystemJS --><\/span>\r\n    <script <\/span>src=<\/span>\"systemjs.config.js\"<\/span>><\/script><\/span>\r\n    <script><\/span>\r\n      System<\/span>.<\/span>import<\/span>(<\/span>'<\/span>app<\/span>'<\/span>).<\/span>catch<\/span>(<\/span>function<\/span>(<\/span>err<\/span>){<\/span> console<\/span>.<\/span>error<\/span>(<\/span>err<\/span>);<\/span> });<\/span>\r\n    <\/script><\/span>\r\n  <\/head><\/span>\r\n  <!-- 3. Display the application --><\/span>\r\n  <body><\/span>\r\n    <my-app><\/span>Loading...<\/my-app><\/span>\r\n    <key-up2><\/key-up2><\/span>\r\n  <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                    \u6d4f\u89c8\u5668\u5c55\u793a<\/h4>\n
                    \"angular2.PNG\"<\/div>\n
                    \u597d\u7684\uff0c\u8fd9\u6b21\u5c31\u7ed3\u675f\u4e86\u3002\uff08\u5f88\u62b1\u6b49\uff09<\/p>\n
                    \u4e0b\u6b21\u8ba1\u5212\u4f7f\u7528Go + TaskQueue + CloudDatastore + Angular2.<\/p>\n","protected":false},"excerpt":{"rendered":"
                    \u7531\u4e8e\u8ba1\u5212\u8bbe\u8ba1\u7684Web\u670d\u52a1\u5c06\u91c7\u7528RIA\uff0c\u6240\u4ee5\u4e3a\u4e86\u672a\u6765\u7684\u5b66\u4e60\u6837\u4f8b\uff0c\u4e5f\u5e0c\u671b\u9009\u62e9\u4e00\u4e9b\u9002\u5408RIA\u7684JS\u6846\u67b6\u3002\u56e0\u6b64\uff0c\u6211\u6253\u7b97 […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38865","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u7528Angular2\u5b9e\u73b0Hello world\uff01 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u7528angular2\u5b9e\u73b0hello-world\uff01\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u7528Angular2\u5b9e\u73b0Hello world\uff01\" \/>\n<meta property=\"og:description\" content=\"\u7531\u4e8e\u8ba1\u5212\u8bbe\u8ba1\u7684Web\u670d\u52a1\u5c06\u91c7\u7528RIA\uff0c\u6240\u4ee5\u4e3a\u4e86\u672a\u6765\u7684\u5b66\u4e60\u6837\u4f8b\uff0c\u4e5f\u5e0c\u671b\u9009\u62e9\u4e00\u4e9b\u9002\u5408RIA\u7684JS\u6846\u67b6\u3002\u56e0\u6b64\uff0c\u6211\u6253\u7b97 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u7528angular2\u5b9e\u73b0hello-world\uff01\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-25T21:43:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T03:33:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d371237434c4406c71b20\/55-0.png\" \/>\n<meta name=\"author\" content=\"\u6e05, \u5b87\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6e05, \u5b87\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/\",\"name\":\"\u7528Angular2\u5b9e\u73b0Hello world\uff01 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-08-25T21:43:14+00:00\",\"dateModified\":\"2024-04-29T03:33:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/1a6ecd3d914d22a5ac32791ffc1fbd8e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u7528Angular2\u5b9e\u73b0Hello world\uff01\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/1a6ecd3d914d22a5ac32791ffc1fbd8e\",\"name\":\"\u6e05, \u5b87\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4b2016c18459a605fc469c7566608f5686491baa112d0871ee613f61b7210565?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4b2016c18459a605fc469c7566608f5686491baa112d0871ee613f61b7210565?s=96&d=mm&r=g\",\"caption\":\"\u6e05, \u5b87\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyu\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u7528Angular2\u5b9e\u73b0Hello world\uff01 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u7528angular2\u5b9e\u73b0hello-world\uff01\/","og_locale":"zh_CN","og_type":"article","og_title":"\u7528Angular2\u5b9e\u73b0Hello world\uff01","og_description":"\u7531\u4e8e\u8ba1\u5212\u8bbe\u8ba1\u7684Web\u670d\u52a1\u5c06\u91c7\u7528RIA\uff0c\u6240\u4ee5\u4e3a\u4e86\u672a\u6765\u7684\u5b66\u4e60\u6837\u4f8b\uff0c\u4e5f\u5e0c\u671b\u9009\u62e9\u4e00\u4e9b\u9002\u5408RIA\u7684JS\u6846\u67b6\u3002\u56e0\u6b64\uff0c\u6211\u6253\u7b97 […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u7528angular2\u5b9e\u73b0hello-world\uff01\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-08-25T21:43:14+00:00","article_modified_time":"2024-04-29T03:33:05+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d371237434c4406c71b20\/55-0.png"}],"author":"\u6e05, \u5b87","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6e05, \u5b87","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"5 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/","name":"\u7528Angular2\u5b9e\u73b0Hello world\uff01 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-08-25T21:43:14+00:00","dateModified":"2024-04-29T03:33:05+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/1a6ecd3d914d22a5ac32791ffc1fbd8e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u7528Angular2\u5b9e\u73b0Hello world\uff01"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/1a6ecd3d914d22a5ac32791ffc1fbd8e","name":"\u6e05, \u5b87","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4b2016c18459a605fc469c7566608f5686491baa112d0871ee613f61b7210565?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4b2016c18459a605fc469c7566608f5686491baa112d0871ee613f61b7210565?s=96&d=mm&r=g","caption":"\u6e05, \u5b87"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyu\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular2%e5%ae%9e%e7%8e%b0hello-world%ef%bc%81\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38865"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38865\/revisions"}],"predecessor-version":[{"id":85023,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38865\/revisions\/85023"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}