{"id":39552,"date":"2023-07-02T15:05:46","date_gmt":"2023-04-16T08:12:36","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/"},"modified":"2024-04-30T11:38:05","modified_gmt":"2024-04-30T03:38:05","slug":"%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/","title":{"rendered":"\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60Angular"},"content":{"rendered":"

\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u5c06\u89e3\u91ca\u7528\u4e8eWeb\u5e94\u7528\u5f00\u53d1\u7684JavaScript\u6846\u67b6Angular\u3002<\/p>\n

Angular\u662f\u4ec0\u4e48<\/h2>\n

Angular\uff08\u89d2\uff09\u662f\u7531Google\u5f00\u53d1\u7684\u9762\u5411\u5ba2\u6237\u7aef\u7684JavaScript\u6846\u67b6\u3002\u5b83\u662f\u4e00\u4e2a\u5168\u6808\u6846\u67b6\uff0c\u51e0\u4e4e\u652f\u6301\u4e86\u6784\u5efaWeb\u5e94\u7528\u6240\u9700\u7684\u6240\u6709\u529f\u80fd\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528Angular CLI\uff08\u547d\u4ee4\u884c\u754c\u9762\uff09\u6765\u6267\u884c\u9879\u76ee\u7684\u751f\u6210\u3001\u6784\u5efa\u548c\u90e8\u7f72\u3002<\/p>\n

\u76ee\u524d\uff082019\u5e747\u6708\uff09\uff0c\u6700\u65b0\u7248\u672c\u662fv8.0.0\uff08\u4e3b\u8981\u7248\u672c\uff09\u3002Google\u5ba3\u5e03\u6bcf\u534a\u5e74\u5347\u7ea7\u4e00\u6b21\u7248\u672c\uff0c\u9884\u8ba12019\u5e7410\u6708\u4f1a\u6709v9.x\u7248\u672c\u5347\u7ea7\uff0c\u5e76\u4e142020\u5e745\u6708\u4f1a\u6709v10.x\u7248\u672c\u7684\u66f4\u65b0\u3002<\/p>\n

Angular\u7684\u5f00\u53d1\u521d\u671f\uff08v1.x\uff09\u662f\u4ee5\u201cAngularJS\u201d\u4e3a\u4ea7\u54c1\u540d\u8fdb\u884c\u5f00\u53d1\u7684\uff0c\u4f46\u5728\u5347\u7ea7\u5230v2.x\u65f6\uff0c\u8fdb\u884c\u4e86\u6839\u672c\u6027\u7684\u67b6\u6784\u91cd\u65b0\u5ba1\u89c6\uff0c\u5e76\u5c06\u540d\u5b57\u6539\u4e3a\u201cAngular\u201d\u3002<\/p>\n

AngularJS\u662f\u57fa\u4e8eJavaScript\u7684\u6846\u67b6\uff0c\u800cAngular\u6539\u4e3a\u57fa\u4e8eTypeScript\uff0c\u5e76\u4e14\u5bf9\u8bed\u6cd5\u8fdb\u884c\u4e86\u66f4\u65b0\uff0c\u56e0\u6b64AngularJS\u548cAngular\u4e4b\u95f4\u4e0d\u517c\u5bb9\u3002<\/p>\n

\u203b\u7f51\u4e0a\u6709\u5f88\u591a\u5173\u4e8eAngularJS\u65f6\u671f\u7684\u4fe1\u606f\uff0c\u8bf7\u4e0d\u8981\u88ab\u8bef\u5bfc\u3002\u3002\u3002<\/p>\n

Angular\u7684\u5f00\u53d1\u662f\u5728Node.js\u73af\u5883\u4e0b\u8fdb\u884c\u7684\u3002\u8fd9\u662f\u56e0\u4e3aAngular\u7684\u5f00\u53d1\u652f\u6301\u529f\u80fd\u672c\u8eab\u662f\u7528TypeScript\uff08\u7f16\u8bd1\u6210JavaScript\uff09\u7f16\u5199\u7684\u3002
\n\u6b64\u5916\uff0cAngular\u672c\u8eab\u53ef\u4ee5\u4f7f\u7528npm\u8fdb\u884c\u5b89\u88c5\u3002
\nNode.js\u9700\u8981v8.x\u4ee5\u4e0a\uff0cnpm\u9700\u8981v5.x\u4ee5\u4e0a\u3002\u6ce8\u610f\uff0c\u5982\u679c\u7248\u672c\u8fc7\u65e7\u4f1a\u51fa\u9519\u3002<\/p>\n

\u5b89\u88c5<\/h2>\n

\u5b89\u88c5Angular\u5c31\u7b49\u4e8e\u5b89\u88c5Angular CLI\u3002
\n\u901a\u8fc7\u4f7f\u7528Angular CLI\uff0c\u53ef\u4ee5\u751f\u6210Angular\u9879\u76ee\u5e76\u4eab\u53d7\u8be5\u6846\u67b6\u7684\u5404\u79cd\u597d\u5904\u3002<\/p>\n

npm install @angular\/cli -save\r\n<\/code><\/pre>\n
\u9879\u76ee\u7684\u521b\u5efa<\/h2>\n
\u8981\u751f\u6210Angular\u9879\u76ee\uff0c\u8bf7\u4f7f\u7528Angular CLI\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002
\n\u6267\u884c\u547d\u4ee4\u540e\uff0c\u5c06\u5728\u5f53\u524d\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u5b50\u76ee\u5f55\uff0c\u5e76\u5728\u5176\u4e2d\u5b58\u50a8\u6784\u5efa\u5e94\u7528\u7a0b\u5e8f\u6240\u9700\u7684\u6e90\u4ee3\u7801\u3002
\n\u540c\u65f6\uff0cAngular\u6240\u4f9d\u8d56\u7684\u5916\u90e8\u5e93\u4e5f\u4f1a\u81ea\u52a8\u5b89\u88c5\u3002<\/p>\n
ng new <\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d>\r\n<\/code><\/pre>\n
\u203b\u300cng\u300d\u662f\u8c03\u7528Angular CLI\u547d\u4ee4\u7684\u547d\u4ee4\uff0c\u4f46\u5728\u8bb8\u591a\u5730\u65b9\u4e5f\u7ecf\u5e38\u7528\u6765\u8868\u793aAngular\u3002<\/p>\n
\"angular-project.PNG\"<\/div>\n
\u5728\u751f\u6210\u7684\u9879\u76ee\u6587\u4ef6\u5939\u4e2d\uff0c\u5305\u542b\u4e86\u8868\u793a\u4e3aAngular\u9879\u76ee\u7684 angular.json\uff0c\u4ee5\u53ca\u8868\u793a\u4e3aTypeScript\u9879\u76ee\u7684 tsconfig.json\u3002<\/p>\n
Angular \u81ea\u8eab\u7684\u6a21\u5757\u548c\u5916\u90e8\u5e93\u7b49\u90fd\u5b58\u50a8\u5728 node_modules \u6587\u4ef6\u5939\u4e2d\u3002
\n\u5b9e\u9645\u4e0a\uff0c\u4f5c\u4e3a\u5e94\u7528\u7a0b\u5e8f\u6e90\u4ee3\u7801\u7684\u662f src \u6587\u4ef6\u5939\u3002<\/p>\n
\/\r\n\u251c node_modules\/\r\n\u2514 src\/\r\n\u3000\u251c app\/\r\n\u3000\u2502 \u251c app.component.html\r\n\u3000\u2502 \u251c app.component.css\r\n\u3000\u2502 \u251c app.component.ts\r\n\u3000\u2502 \u251c app.component.spec.ts\r\n\u3000\u2502 \u2514 app.module.ts\r\n\u3000\u251c assets\/\r\n\u3000\u251c environments\/\r\n\u3000\u251c dist\/\r\n\u3000\u251c index.html\r\n\u3000\u251c main.ts\r\n\u3000\u251c styles.css\r\n\u3000\u2514 etc...\r\n<\/code><\/pre>\n
\n
\u8981\u7d20\u6a5f\u80fdnode_modules\/npm \u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\u3002src\/\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u8cc7\u6e90\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\u3002src\/index.html\u30e1\u30a4\u30f3 HTML \u30da\u30fc\u30b8\u3002src\/main.ts\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30eb\u30fc\u30c8\u30b9\u30af\u30ea\u30d7\u30c8\u3002src\/styles.css\u30e1\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3002src\/app\/\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30bd\u30fc\u30b9\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\u3002src\/app\/app.component.htmlindex.html \u304b\u3089\u8aad\u307f\u8fbc\u307e\u308c\u308b\u30eb\u30fc\u30c8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3002src\/app\/app.component.css\u30eb\u30fc\u30c8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3002src\/app\/app.component.ts\u30eb\u30fc\u30c8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3002src\/app\/app.component.spec.ts\u30eb\u30fc\u30c8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8\u30b9\u30af\u30ea\u30d7\u30c8\u3002src\/app\/app.module.tsroot \u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3002assets\/\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3001\u5916\u90e8\u30d5\u30a1\u30a4\u30eb\u7b49\u3001\u30b3\u30f3\u30d1\u30a4\u30eb\u305b\u305a\u306b\u4f7f\u3046\u8cc7\u6e90\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\u3002environments\/\u672c\u756a\u7528\u3001\u958b\u767a\u7528\u7b49\u306e\u30d3\u30eb\u30c9\u8a2d\u5b9a\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\u3002dist\/\u30b3\u30f3\u30d1\u30a4\u30eb\u6e08\u307f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\u3002<\/div>\n<\/div>\n
\u6267\u884c\u5e94\u7528\u7a0b\u5e8f<\/h2>\n
\u53ef\u4ee5\u901a\u8fc7Angular CLI\u4ece\u547d\u4ee4\u884c\u65b9\u4fbf\u5730\u8fdb\u884c\u5f00\u53d1\u4e2d\u7684\u64cd\u4f5c\u786e\u8ba4\u3002\u9700\u8981\u5728Angular\u9879\u76ee\u7684\u6839\u6587\u4ef6\u5939\u4e2d\u8fd0\u884c\u3002<\/p>\n
ng serve --open\r\n<\/code><\/pre>\n
\u4f7f\u7528open\u9009\u9879\uff0c\u6784\u5efa\u5b8c\u6210\u540e\u4f1a\u81ea\u52a8\u6253\u5f00\u6d4f\u89c8\u5668\u3002
\n\u5728ng serve\u5185\u90e8\uff0c\u4f7f\u7528\u4e86webpack\u7684\u5f00\u53d1\u865a\u62df\u670d\u52a1\u5668\u529f\u80fd\uff08webpack-dev-server\uff09\uff0c\u652f\u6301\u70ed\u90e8\u7f72\uff08\u81ea\u52a8\u68c0\u6d4b\u6e90\u4ee3\u7801\u66f4\u6539\u5e76\u81ea\u52a8\u91cd\u65b0\u52a0\u8f7d\uff09\uff0c\u56e0\u6b64\u6e90\u4ee3\u7801\u7684\u4fee\u6539\u7ed3\u679c\u4f1a\u76f4\u63a5\u53cd\u6620\u5230\u6d4f\u89c8\u5668\u4e2d\u3002<\/p>\n
\u5e94\u7528\u7a0b\u5e8f\u7684\u6784\u5efa<\/h2>\n
\u5f53\u4f60\u8981\u5c06Angular\u6e90\u7801\u5b9e\u9645\u8fd0\u4f5c\u4e3a\u5e94\u7528\u7a0b\u5e8f\u65f6\uff0c\u9700\u8981\u8fdb\u884c\u7f16\u8bd1\u3002
\n\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u5c06\u4f1a\u5728\u5185\u90e8\u8fd0\u884cwebpack\u7684\u5904\u7406\u8fc7\u7a0b\uff0c\u751f\u6210\u7f16\u8bd1\u548c\u6253\u5305\u7684\u6e90\u7801\u3002
\n\u5fc5\u987b\u5728Angular\u9879\u76ee\u7684\u6839\u6587\u4ef6\u5939\u4e2d\u6267\u884c\u3002<\/p>\n
ng build --configuration=production\r\n<\/code><\/pre>\n
–configuration\u9009\u9879\u53ef\u4ee5\u6307\u5b9a\u6784\u5efa\u73af\u5883\u8bbe\u7f6e\u3002\u901a\u5e38\uff0c\u6211\u4eec\u4f1a\u5b9a\u4e49\u5404\u4e2a\u73af\u5883\u8bbe\u7f6e\uff0c\u5982production\u3001staging\u3001development\u7b49\u3002\u53ea\u6709\u5728production\u6784\u5efa\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528–prod\u7684\u7b80\u5199\u6765\u8fdb\u884c\u6307\u5b9a\u3002\u5173\u4e8e\u6784\u5efa\u73af\u5883\u548c\u6e90\u4ee3\u7801\u7684\u8f93\u51fa\u8bbe\u7f6e\u7b49\u914d\u7f6e\uff0c\u53ef\u4ee5\u5728angular.json\u6587\u4ef6\u4e2d\u5b9a\u4e49\u3002<\/p>\n
\u7d44\u4ef6<\/h2>\n
Angular \u662f\u4e00\u4e2a\u57fa\u4e8e\u7ec4\u4ef6\u7684\u6846\u67b6\u3002
\n\u7ec4\u4ef6\u53ef\u4ee5\u662f\u7279\u5b9a\u7684\u754c\u9762\uff0c\u4e5f\u53ef\u4ee5\u662f\u5171\u7528\u7684\u90e8\u4ef6\uff0c\u6216\u8005\u662f\u67d0\u4e2a\u5177\u6709\u7279\u5b9a\u529f\u80fd\u7684\u4e00\u5757\u201c\u6574\u4f53\u201d\u3002
\n\u901a\u8fc7\u7ec4\u5408\u4e0d\u540c\u7684\u7ec4\u4ef6\u6765\u6784\u5efa\u754c\u9762\u662f Angular \u7684 Web \u5e94\u7528\u7a0b\u5e8f\u7684\u7279\u70b9\u3002
\n\uff08\u4f8b\u5982\uff0c\u53ef\u4ee5\u901a\u8fc7\u7ec4\u5408\u5934\u90e8\u7ec4\u4ef6\u3001\u5bfc\u822a\u7ec4\u4ef6\u548c\u4e3b\u5185\u5bb9\u7ec4\u4ef6\u6765\u6784\u5efa\u754c\u9762\u7b49\uff09
\n\u8981\u521b\u5efa\u7ec4\u4ef6\uff0c\u8bf7\u5728 Angular CLI \u4e2d\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002
\n\u751f\u6210\u7684\u7ec4\u4ef6\u6e90\u4ee3\u7801\u5c06\u5728\u4ee5\u540c\u540d\u7684\u6587\u4ef6\u5939\u4e2d\u6574\u7406\u8d77\u6765\u3002<\/p>\n
ng generate component hoge\r\n<\/code><\/pre>\n
\u6267\u884c\u8be5\u547d\u4ee4\u4f1a\u751f\u6210\u6e90\u4ee3\u7801\u3002<\/p>\n
CREATE src\/app\/hoge\/hoge.component.html (19 bytes)\r\nCREATE src\/app\/hoge\/hoge.component.spec.ts (614 bytes)\r\nCREATE src\/app\/hoge\/hoge.component.ts (262 bytes)\r\nCREATE src\/app\/hoge\/hoge.component.css (0 bytes)\r\nUPDATE src\/app\/app.module.ts (467 bytes)\r\n<\/code><\/pre>\n
\u300cng generate\u300d\u4e0d\u4ec5\u53ef\u4ee5\u521b\u5efa\u6e90\u6587\u4ef6\uff0c\u8fd8\u53ef\u4ee5\u5c06\u65b0\u521b\u5efa\u7684\u7ec4\u4ef6\u6ce8\u518c\u5230\u6a21\u5757\u4e2d\u3002
\n\u4e3a\u4e86\u4f7fAngular\u80fd\u591f\u4f7f\u7528\u7ec4\u4ef6\uff0c\u5fc5\u987b\u5728\u67d0\u4e2a\u6a21\u5757\u4e2d\u58f0\u660e\u8fd9\u4e9b\u7ec4\u4ef6\u3002
\n\u5173\u4e8eAngular\u4e2d\u7684\u6a21\u5757\u5c06\u5728\u540e\u9762\u7684\u7ae0\u8282\u4e2d\u8fdb\u884c\u89e3\u91ca\u3002<\/p>\n
\u3000\u2514 app\/\r\n\u3000\u3000\u2514 hoge\/\r\n\u3000\u3000\u3000\u2514 hoge.component.html\r\n\u3000\u3000\u3000\u2514 hoge.component.css\r\n\u3000\u3000\u3000\u2514 hoge.component.ts\r\n\u3000\u3000\u3000\u2514 hoge.component.spec.ts\r\n<\/code><\/pre>\n
Angular\u662f\u4e00\u4e2a\u9075\u5faaModel-View-ViewModel\uff08\u6a21\u578b-\u89c6\u56fe-\u89c6\u56fe\u6a21\u578b\uff09\u7684MVVM\u6a21\u5f0f\u7684\u6846\u67b6\u3002<\/p>\n
    \n
  • \n
      Model \u3000\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30b3\u30a2\u3068\u306a\u308b\u30c9\u30e1\u30a4\u30f3\u30ed\u30b8\u30c3\u30af\uff08\u30e6\u30fc\u30b6\u304b\u3089\u306f\u898b\u3048\u306a\u3044\uff09<\/ul>\n<\/li>\n<\/ul>\n
       <\/p>\n
        \n
      • \n
          View \u3000\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u30e6\u30fc\u30b6\u3068\u5bfe\u8a71\u3059\u308b\u30ed\u30b8\u30c3\u30af\uff08\u30e6\u30fc\u30b6\u304b\u3089\u898b\u3048\u308b\uff09<\/ul>\n<\/li>\n<\/ul>\n
           <\/p>\n
            ViewModel \u3000 Model \u3068 View \u306e\u6a4b\u6e21\u3057\u3092\u884c\u3046\u30ed\u30b8\u30c3\u30af<\/ul>\n
            \u6bcf\u4e2a\u7ec4\u4ef6\u5355\u5143\u8d1f\u8d23 View-ViewModel \u5c42\u3002
            \n\u751f\u6210\u7684\u6587\u4ef6\u4e2d\uff0c.html \u6587\u4ef6\u548c .css \u6587\u4ef6\u662f View\uff0c.ts \u6587\u4ef6\u662f ViewModel\u3002<\/p>\n
            \u7ec4\u4ef6\u7684\u4f7f\u7528<\/h2>\n
            \u5c06\u751f\u6210\u7684\u7ec4\u4ef6\u96c6\u6210\u5230\u5e94\u7528\u7a0b\u5e8f\u4e2d\u6709\u51e0\u79cd\u65b9\u6cd5\u53ef\u4ee5\u4f7f\u7528\u3002
            \n\u57fa\u672c\u7684\u65b9\u6cd5\u6709\u4ee5\u4e0b\u4e09\u79cd\u3002<\/p>\n
              \n
            • \n
                HTML\uff08\u30d3\u30e5\u30fc\uff09\u306e\u4e2d\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30bb\u30ec\u30af\u30bf\u3092\u8a18\u8ff0\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n
                 <\/p>\n
                  \n
                • \n
                    \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3067\u9077\u79fb\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n
                     <\/p>\n
                      \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u52d5\u7684\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u751f\u6210\u3059\u308b<\/ul>\n
                      \u5f53\u63cf\u8ff0\u7ec4\u4ef6\u9009\u62e9\u5668\u65f6<\/h3>\n
                      \u5728Angular\u7ec4\u4ef6\u7684TypeScript\u7c7b\u6587\u4ef6\uff08.ts\u6587\u4ef6\uff09\u4e2d\uff0c\u9700\u8981\u4f7f\u7528@Component\u88c5\u9970\u5668\u6765\u8bb0\u5f55\u7ec4\u4ef6\u7684\u5143\u4fe1\u606f\uff08\u7ec4\u4ef6\u672c\u8eab\u7684\u4fe1\u606f\uff09\u3002<\/p>\n
                      @<\/span>Component<\/span>({<\/span>\r\nselector<\/span>:<\/span> '<\/span>app-hoge<\/span>'<\/span>,<\/span>\r\ntemplateUrl<\/span>:<\/span> '<\/span>.\/hoge.component.html<\/span>'<\/span>,<\/span>\r\nstyleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/hoge.component.css<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\n<\/code><\/pre>\n
                      \n
                      \u8981\u7d20\u5099\u8003selector\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30bb\u30ec\u30af\u30bf\uff08Angular \u306e View \u4e0a\u3067\u305d\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u793a\u3059\u540d\u524d\uff09templateUrl\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e View \u69cb\u9020\u3092\u8a18\u8ff0\u3057\u305f\u30d5\u30a1\u30a4\u30eb\uff08HTML\uff09styleUrls\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e View \u30b9\u30bf\u30a4\u30eb\u3092\u8a18\u8ff0\u3057\u305f\u30d5\u30a1\u30a4\u30eb\uff08CSS\uff09<\/div>\n<\/div>\n
                      templateUrl\u3001styleUrls\u53ef\u4ee5\u76f4\u63a5\u5728.ts\u6587\u4ef6\u4e2d\u4ee5\u201ctemplate\u201d\u548c\u201cstyle\u201d\u7684\u5f62\u5f0f\u7f16\u5199HTML\u548cCSS\u3002
                      \n\u4f46\u662f\uff0c\u4ece\u8d23\u4efb\u5206\u79bb\u7684\u89d2\u5ea6\u6765\u770b\uff0c\u6700\u597d\u5c3d\u91cf\u907f\u514d\u8fd9\u6837\u505a\u3002<\/p>\n
                      \u4f8b\u4e2d\u7684\u7ec4\u4ef6\u53ef\u4ee5\u5728Angular\u7684View\u4e2d\u4f7f\u7528app-hoge\u6807\u7b7e\u8fdb\u884c\u63cf\u8ff0\u548c\u4f7f\u7528\u3002
                      \n\u663e\u7136\uff0capp-hoge\u6807\u7b7e\u4e0d\u662fHTML\u6807\u51c6\u6807\u7b7e\uff0c\u5b83\u5e76\u4e0d\u662f\u6d4f\u89c8\u5668\u53ef\u4ee5\u89e3\u91ca\u7684\u6807\u7b7e\u3002
                      \n\u5b83\u4ec5\u4ec5\u662fAngular\u72ec\u81ea\u6269\u5c55HTML\u7684\u6807\u7b7e\uff0c\u5e76\u4e14\u5728\u5b9e\u9645\u5e94\u7528\u4e2d\u4f1a\u7531Angular\u8f6c\u6362\u4e3a\u53ef\u4ee5\u88ab\u6d4f\u89c8\u5668\u89e3\u91ca\u7684\u5f62\u5f0f\u3002<\/p>\n
                      <app-hoge><\/app-hoge><\/span>\r\n<\/code><\/pre>\n
                      \u5982\u679c\u901a\u8fc7\u8def\u7531\u8fdb\u884c\u8f6c\u6362\u7684\u8bdd<\/h3>\n
                      \u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u5f53\u6211\u4eec\u5728\u7f51\u9875\u4e0a\u70b9\u51fb\u8d85\u94fe\u63a5\u65f6\uff0c\u53ef\u4ee5\u8df3\u8f6c\u5230\u53e6\u4e00\u4e2a\u7f51\u9875\u3002
                      \n\u540c\u65f6\uff0c\u6d4f\u89c8\u5668\u4f1a\u8bb0\u5f55\u9875\u9762\u7684\u8bbf\u95ee\u5386\u53f2\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u70b9\u51fb\u201c\u8fd4\u56de\u201d\u548c\u201c\u524d\u8fdb\u201d\u6309\u94ae\u6765\u8fdb\u884c\u5bfc\u822a\u3002<\/p>\n
                      \u5728 SPA \u4e2d\uff08\u4e0d\u4ec5\u9650\u4e8e Angular\uff09\uff0c\u51e0\u4e4e\u4e0d\u4f1a\u5b58\u5728”\u8f6c\u5230\u53e6\u4e00\u4e2a\u7f51\u9875”\u7684\u6982\u5ff5\u3002
                      \n\u901a\u8fc7\u5c06\u4e0e\u8bf7\u6c42\u7684 URL \u76f8\u5bf9\u5e94\u7684\u7ec4\u4ef6\u4e0e\u5f53\u524d\u663e\u793a\u7684\u7ec4\u4ef6\u4ea4\u6362\uff0c\u6a21\u62df\u4e86\u8f6c\u5230\u53e6\u4e00\u4e2a\u7f51\u9875\u7684\u6548\u679c\u3002
                      \n\u540c\u65f6\uff0c\u901a\u8fc7 JavaScript \u5728\u6d4f\u89c8\u5668\u7684\u5386\u53f2\u8bb0\u5f55\u4e2d\u8fdb\u884c\u64cd\u4f5c\uff0c\u5c31\u53ef\u4ee5\u50cf\u5e38\u89c4\u9875\u9762\u5bfc\u822a\u90a3\u6837\u4f7f\u7528”\u540e\u9000”\u548c”\u524d\u8fdb”\u6309\u94ae\u3002
                      \n\u8fd9\u4e2a\u8fc7\u7a0b\u88ab\u79f0\u4e3a\u8def\u7531\uff0c\u5e76\u4e14\u4e3a\u6267\u884c\u8def\u7531\u64cd\u4f5c\u7684\u6a21\u5757\u88ab\u79f0\u4e3a\u8def\u7531\u5668\u3002<\/p>\n
                      \u7531\u4e8eAngular Router\u662f\u6846\u67b6\u4e2d\u7684\u91cd\u8981\u529f\u80fd\uff0c\u6240\u4ee5\u6211\u4eec\u5c06\u5728\u540e\u9762\u7684\u7ae0\u8282\u4e2d\u8fdb\u884c\u89e3\u91ca\u3002<\/p>\n
                      \u5982\u679c\u9700\u8981\u52a8\u6001\u751f\u6210\u7ec4\u4ef6<\/h3>\n
                      \u901a\u8fc7\u7f16\u5199\u811a\u672c\uff0c\u60a8\u53ef\u4ee5\u52a8\u6001\u751f\u6210\u7ec4\u4ef6\u3002
                      \n\uff08\u4f8b\u5982\uff0c\u53ef\u4ee5\u8003\u8651\u5728\u6309\u94ae\u6309\u4e0b\u65f6\u6253\u5f00\u5bf9\u8bdd\u6846\u7b49\u7528\u4f8b\u3002\uff09
                      \n\u751f\u6210\u7ec4\u4ef6\u9700\u8981\u4f7f\u7528\u4ee5\u4e0b\u4e09\u4e2a\u7c7b\u3002<\/p>\n
                      ComponentFactoryResolver\u3000\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30af\u30e9\u30b9\u304b\u3089 ComponentFactory \u3092\u7279\u5b9a\u3059\u308b\u30af\u30e9\u30b9<\/p>\n
                      ComponentFactory\u3000\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u751f\u6210\u3059\u308b\u30af\u30e9\u30b9<\/p>\n
                      ViewContainerRef\u3000 View \u3078\u306e\u53c2\u7167\u3092\u63d0\u4f9b\u3059\u308b\u30af\u30e9\u30b9<\/p>\n
                      ComponentFacroty \u7684\u4efb\u52a1\u662f\u5c06\u7ec4\u4ef6\u7c7b\u8f6c\u6362\u4e3a\u6d4f\u89c8\u5668\u53ef\u89c1\u7684\u5f62\u5f0f\u3002
                      \n\u7136\u800c\uff0cAngular \u5e94\u7528\u7a0b\u5e8f\u4e2d\u5305\u542b\u4e86\u65e0\u6570\u4e2a\u7ec4\u4ef6\uff0c\u76f8\u5e94\u7684 ComponentFactory \u5b9e\u4f8b\u4e5f\u6709\u65e0\u6570\u4e2a\u3002
                      \nComponentFactoryResolver \u7684\u4efb\u52a1\u662f\u4ece\u8fd9\u8bb8\u591a ComponentFactory \u5b9e\u4f8b\u4e2d\u627e\u5230\u4e0e\u6240\u9700\u7ec4\u4ef6\u5bf9\u5e94\u7684\u5de5\u5382\u3002
                      \n\u901a\u8fc7 ComponentFactory \u751f\u6210\u7684\u7ec4\u4ef6\u5c06\u901a\u8fc7\u8bbe\u7f6e\u5230 View \u4e2d\u800c\u51fa\u73b0\u5728\u6d4f\u89c8\u5668\u4e0a\u3002
                      \n\u63d0\u4f9b\u8bbf\u95ee View \u7684\u65b9\u6cd5\u7684\u662f ViewContainerRef\u3002<\/p>\n
                      \u751f\u6210\u5b9e\u9645\u7ec4\u4ef6\u7684\u6d41\u7a0b\u5982\u4e0b\u3002<\/p>\n
                        \n
                      1. \n
                          \u901a\u8fc7\u5c06\u7ec4\u4ef6\u7c7b\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7ed9ComponentFactoryResolver\u7684resolveComponentFactory\u65b9\u6cd5\uff0c\u83b7\u53d6\u76f8\u5e94\u7684ComponentFactory\u3002<\/ol>\n<\/li>\n<\/ol>\n
                           <\/p>\n
                            \u901a\u8fc7\u5c06ComponentFactory\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7ed9ViewContainerRef\u7684createComponent\u65b9\u6cd5\uff0c\u5728View\u4e2d\u751f\u6210\u7ec4\u4ef6\u3002<\/ol>\n
                            \u6211\u4eec\u4e0d\u4f1a\u76f4\u63a5\u64cd\u4f5c Factory\u3002
                            \nViewContainerRef\u81ea\u8eab\u6709\u4e00\u4e2a\u7528\u4e8e\u751f\u6210\u7ec4\u4ef6\u7684\u65b9\u6cd5\uff0c\u5982\u679c\u76f4\u63a5\u5c06 Factory \u4f20\u7ed9\u5b83\uff0cViewContainerRef\u4f1a\u4e3a\u6211\u4eec\u5904\u7406\u4e00\u5207\u3002<\/p>\n
                            \u4f46\u662f\uff0c\u52a8\u6001\u7ec4\u4ef6\u7684\u751f\u6210\u5f80\u5f80\u4f1a\u4f7f\u811a\u672c\u903b\u8f91\u53d8\u5f97\u6709\u4e9b\u590d\u6742\u3002
                            \n\u5982\u679c\u6ca1\u6709\u7279\u522b\u7684\u9650\u5236\uff0c\u6700\u597d\u4f7f\u7528Angular Material\u7684MatDialogModule\u3002<\/p>\n
                            \u670d\u52a1<\/h2>\n
                            Angular \u53ef\u4ee5\u5c06\u7279\u5b9a\u7684\u903b\u8f91\u4f5c\u4e3a\u670d\u52a1\u4e0e\u7ec4\u4ef6\u5206\u79bb\u3002
                            \n\u5c06\u529f\u80fd\u63d0\u53d6\u4e3a\u670d\u52a1\uff0c\u5e76\u5728\u591a\u4e2a\u7ec4\u4ef6\u4e2d\u8fdb\u884c\u8c03\u7528\u548c\u5171\u4eab\u3002
                            \n\u8fd9\u6837\u53ef\u4ee5\u5c06\u7ec4\u4ef6\u7684\u804c\u8d23\u6700\u5c0f\u5316\uff0c\u63d0\u9ad8\u53ef\u7ef4\u62a4\u6027\u3002
                            \n\u540c\u65f6\uff0c\u53ef\u4ee5\u907f\u514d\u4e1a\u52a1\u903b\u8f91\u4e0e\u7279\u5b9a\u7ec4\u4ef6\u8026\u5408\uff0c\u63d0\u9ad8\u91cd\u7528\u6027\u3002<\/p>\n
                            Angular \u5e76\u4e14\u652f\u6301\u4f9d\u8d56\u6ce8\u5165\uff08DI\uff1aDependency Injection\uff09\u3002\u8fd9\u4e2a\u6846\u67b6\u5177\u6709\u4e00\u4e2a\u53eb\u505a\u6ce8\u5165\u5668\u7684\u673a\u5236\uff0c\u6839\u636e\u7ec4\u4ef6\u7c7b\u6216\u670d\u52a1\u7c7b\u7684\u9700\u6c42\uff0c\u53ef\u4ee5\u4ece\u5916\u90e8\u6ce8\u5165\uff08\u6ce8\u5165\uff09\u670d\u52a1\u3002\u670d\u52a1\u7684\u4f7f\u7528\u8005\u53ea\u9700\u5728\u6784\u9020\u51fd\u6570\u4e2d\u58f0\u660e\u4ed6\u4eec\u60f3\u8981\u4f7f\u7528\u7684\u670d\u52a1\uff0c\u5c31\u53ef\u4ee5\u5728\u7c7b\u4e2d\u4f7f\u7528\u670d\u52a1\u7684\u529f\u80fd\uff0c\u800c\u4e0d\u9700\u8981\u624b\u52a8\u5b9e\u4f8b\u5316\u670d\u52a1\u3002<\/p>\n
                            \u8981\u521b\u5efa\u670d\u52a1\uff0c\u8bf7\u5728Angular CLI\u4e2d\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n
                            ng generate service hoge\r\n<\/code><\/pre>\n
                            CREATE src\/app\/hoge.service.spec.ts (323 bytes)\r\nCREATE src\/app\/hoge.service.ts (133 bytes)\r\n<\/code><\/pre>\n
                            \u3000\u2514 app\/\r\n\u3000\u3000\u2514 hoge.service.ts\r\n<\/code><\/pre>\n
                            \u4f7f\u7528\u670d\u52a1<\/h2>\n
                            \u4e3a\u4e86\u4f7f\u7528\u670d\u52a1\uff0c\u9996\u5148\u9700\u8981\u5411\u6ce8\u5165\u5668\uff08Injector\uff09\u63d0\u4f9b\u670d\u52a1\u7684\u521b\u5efa\u65b9\u5f0f\u3002
                            \n\u5c06\u670d\u52a1\u7684\u521b\u5efa\u65b9\u5f0f\u4f5c\u4e3aproviders\u5143\u4fe1\u606f\u6765\u544a\u8bc9\u6ce8\u5165\u5668\u3002\u5bf9\u4e8e\u6bcf\u4e2a\u670d\u52a1\uff0c\u90fd\u9700\u8981\u5b9a\u4e49\u5b83\u7684providers\u5143\u4fe1\u606f\u3002
                            \n\u5728\u4e0b\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u901a\u8fc7\u5728@Component\u88c5\u9970\u5668\u7684providers\u4e2d\u6307\u5b9a\u5bfc\u5165\u7684HogeService\uff0c\u6ce8\u5165\u5668\u5c31\u53ef\u4ee5\u5b9e\u4f8b\u5316\u5e76\u6ce8\u5165HogeService\u3002<\/p>\n
                            src\/app\/hoge\/hoge.component.ts\u7684\u539f\u59cb\u4f4d\u7f6e\u3002<\/p>\n
                            import<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> HogeService<\/span> }<\/span> from<\/span> '<\/span>..\/hoge.service<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-hoge<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/hoge.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/hoge.component.css<\/span>'<\/span>],<\/span>\r\n  providers<\/span>:<\/span> [<\/span>HogeService<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> HogeComponent<\/span> {<\/span>\r\n  constructor<\/span>(<\/span>private<\/span> hoge<\/span>:<\/span> HogeService<\/span>)<\/span> {<\/span>\r\n    this<\/span>.<\/span>hoge<\/span>.<\/span>out<\/span>();<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                            \/src\/app\/hoge.service.ts\u7684\u4e2d\u6587\u539f\u751f\u91ca\u4e49\u4e3a\uff1a<\/p>\n
                            import<\/span> {<\/span> Injectable<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Injectable<\/span>()<\/span>\r\nexport<\/span> class<\/span> HogeService<\/span> {<\/span>\r\n  public<\/span> out<\/span>():<\/span> void<\/span> {<\/span>\r\n    console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>this is HogeService.<\/span>'<\/span>);<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                            \u6ce8\u5c04\u5668\u5728\u6bcf\u4e2a\u5e94\u7528\u7a0b\u5e8f\u7684\u5c42\u6b21\u7ed3\u6784\u4e2d\u5b58\u5728\u3002
                            \n\u6362\u53e5\u8bdd\u8bf4\uff0c\u6839\u636e\u5728\u54ea\u91cc\u5b9a\u4e49providers\u5143\u6570\u636e\uff0c\u53ef\u4ee5\u6539\u53d8\u53ef\u4f7f\u7528\u670d\u52a1\u7684\u8303\u56f4\u3002
                            \n\u5728\u4e0a\u8ff0\u793a\u4f8b\u4e2d\uff0c\u7531\u4e8e\u5728\u7ec4\u4ef6\u7ea7\u522b\u4e0a\u5b9a\u4e49\uff0c\u56e0\u6b64\u53ea\u6709\u77e5\u9053\u5982\u4f55\u521b\u5efaHogeService\u7684\u6ce8\u5c04\u5668\u624d\u80fd\u8bbf\u95ee\u8be5\u7ec4\u4ef6\u7684\u6ce8\u5c04\u5668\uff0c\u5176\u4ed6\u7ec4\u4ef6\u65e0\u6cd5\u4f7f\u7528HogeService\u3002<\/p>\n
                            \u5982\u679c\u670d\u52a1\u6ce8\u5165\u5668\u5728\u4f7f\u7528\u670d\u52a1\u7684\u7ea7\u522b\u65e0\u6cd5\u6ce8\u5165\u670d\u52a1\uff0c\u5219\u4f1a\u56de\u6eaf\u5230\u7956\u5148\u7ea7\u522b\u7684\u6ce8\u5165\u5668\u6765\u5bfb\u627e\u53ef\u6ce8\u5165\u7684\u670d\u52a1\u3002
                            \n\u5982\u679c\u5728\u5e94\u7528\u7a0b\u5e8f\u7684\u6839\u7ea7\u522b\u5b9a\u4e49\u63d0\u4f9b\u7a0b\u5e8f\uff0c\u5219\u8be5\u5e94\u7528\u7a0b\u5e8f\u7684\u6240\u6709\u7ec4\u4ef6\u90fd\u53ef\u4ee5\u4f7f\u7528\u8be5\u670d\u52a1\u3002
                            \n\u9664\u975e\u6709\u7279\u6b8a\u539f\u56e0\uff0c\u5426\u5219\u6700\u597d\u5728\u6839\u7ea7\u522b\u8fdb\u884c\u5b9a\u4e49\u3002
                            \n\u8981\u5c06\u63d0\u4f9b\u7a0b\u5e8f\u8bbe\u7f6e\u4e3a\u6839\u7ea7\u522b\uff0c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u4efb\u4e00\u65b9\u6cd5\u3002<\/p>\n
                              \n
                            • \n
                                root \u30e2\u30b8\u30e5\u30fc\u30eb\uff08app.module.ts\uff09\u306e providers \u306b\u30b5\u30fc\u30d3\u30b9\u3092\u8a18\u8ff0\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n
                                 <\/p>\n
                                  \u30b5\u30fc\u30d3\u30b9\u306e@Injectable \u30c7\u30b3\u30ec\u30fc\u30bf\u306e providedIn \u30e1\u30bf\u60c5\u5831\u306b\u300croot\u300d\u3068\u8a18\u8ff0\u3059\u308b<\/ul>\n
                                  \u5728\u63d0\u4f9b\u8005\u4e2d\uff0c\u6709\u51e0\u79cd\u53ef\u4ee5\u6307\u5b9a\u7684\u670d\u52a1\u521b\u5efa\u65b9\u6cd5\u3002<\/p>\n
                                  useClass\u3000\u6307\u5b9a\u3057\u305f\u30af\u30e9\u30b9\u3092\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\uff08new\uff09\u3057\u3066\u6ce8\u5165\u3059\u308b<\/p>\n
                                  useValue\u3000\u6307\u5b9a\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3084\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6ce8\u5165\u3059\u308b<\/p>\n
                                  useFactory\u3000\u6307\u5b9a\u3057\u305f\u95a2\u6570\u306e\u623b\u308a\u5024\u3092\u6ce8\u5165\u3059\u308b<\/p>\n
                                  \u4e0a\u9762\u793a\u4f8b\u4e2d\u7684providers: [HogeService]\u662f\u4ee5\u4e0b\u8bed\u6cd5\u7684\u7cd6\u8863\u8bed\u6cd5\u3002<\/p>\n
                                  providers<\/span>:<\/span> [{<\/span> provide<\/span>:<\/span> HogeService<\/span>,<\/span> useClass<\/span>:<\/span> HogeService<\/span> }];<\/span>\r\n<\/code><\/pre>\n
                                  provide\u5c5e\u6027\u662f\u7528\u4e8e\u6807\u8bc6\u4f9d\u8d56\u6ce8\u5165\u4ee4\u724c\uff08\u540d\u79f0\uff09\u7684\u670d\u52a1\u5b9e\u4f8b\u3002
                                  \n\u901a\u8fc7\u4f7f\u7528\u8be5\u5c5e\u6027\uff0c\u53ea\u9700\u6307\u5b9aHogeService\uff0c\u5c31\u53ef\u4ee5\u786e\u5b9a\u8981\u6ce8\u5165\u7684HogeService\u7684\u5b9e\u4f8b\u3002<\/p>\n
                                  \u5982\u4e0b\u6240\u793a\uff0cprovider \u7684\u672c\u8d28\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5b83\u540c\u65f6\u6301\u6709\u540d\u79f0\u548c\u670d\u52a1\u521b\u5efa\u65b9\u6cd5\u7684\u96c6\u5408\u3002
                                  \n\u6ce8\u5165\u5668\u4f9d\u9760\u8fd9\u4e9b provider \u5bf9\u8c61\u6765\u521b\u5efa\u670d\u52a1\uff0c\u521b\u5efa\u51fa\u7684\u670d\u52a1\uff08\u5b9e\u4f8b\u6216\u5bf9\u8c61\uff09\u5728\u6ce8\u5165\u5668\u5185\u5171\u4eab\u3002<\/p>\n
                                  \u7d81\u5b9a<\/h2>\n
                                  \u5728Angular\u4e2d\uff0cView\uff08.html\u6587\u4ef6\uff09\u548cViewModel\uff08.ts\u6587\u4ef6\uff09\u76f8\u4e92\u914d\u5408\u6765\u6784\u5efa\u7ec4\u4ef6\u3002
                                  \nView\u548cViewModel\u4e4b\u95f4\u901a\u8fc7\u6570\u636e\u7ed1\u5b9a\u6765\u4ea4\u6362\u4fe1\u606f\u3002
                                  \n\u6570\u636e\u7ed1\u5b9a\u6709\u4ee5\u4e0b\u4e09\u79cd\u7c7b\u578b\u3002<\/p>\n
                                  \u30a4\u30d9\u30f3\u30c8\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3000 View \u304b\u3089 ViewModel \u3078\u60c5\u5831\u3092\u6e21\u3059<\/p>\n
                                  \u30d7\u30ed\u30d1\u30c6\u30a3\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3000 ViewModel \u304b\u3089 View \u3078\u60c5\u5831\u3092\u6e21\u3059<\/p>\n
                                  \u53cc\u65b9\u5411\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3000 View \u3068 ViewModel \u3067\u540c\u671f\u3059\u308b<\/p>\n
                                  \u4e8b\u4ef6\u7ed1\u5b9a<\/h3>\n
                                  \u4e8b\u4ef6\u7ed1\u5b9a\u53ef\u4ee5\u5c06\u5728\u89c6\u56fe\u4e2d\u53d1\u751f\u7684\u67d0\u4e9b\u4e8b\u4ef6\u4f20\u9012\u7ed9\u89c6\u56fe\u6a21\u578b\u3002
                                  \n\u53ef\u4ee5\u5c06\u5176\u7406\u89e3\u4e3a\u7c7b\u4f3c\u4e8eHTML\u4e2d\u7684onClick\u3001onLoad\u7b49\u4e8b\u4ef6\u3002
                                  \n\u8981\u5c06\u5b83\u7ed1\u5b9a\u5230HTML\u6309\u94ae\u7684\u70b9\u51fb\u4e8b\u4ef6\u4e0a\uff0c\u53ef\u4ee5\u8fd9\u6837\u5199\u3002<\/p>\n
                                  <button<\/span> (click)=<\/span>\"hogeFnc()\"<\/span>><\/span>Click Me!<\/button><\/span>\r\n<\/code><\/pre>\n
                                  \u901a\u8fc7\u4e8b\u4ef6\u7ed1\u5b9a\uff0c\u53ef\u4ee5\u4ece\u7f51\u9875\u64cd\u4f5c\u4e2d\u6267\u884c\u7ec4\u4ef6\u7684\u51fd\u6570\u3002
                                  \n\u5728\u4f20\u9012\u53c2\u6570\u7ed9\u51fd\u6570\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528\u6a21\u677f\u5f15\u7528\u53d8\u91cf\u3002
                                  \n\u901a\u8fc7\u7ed9\u89c6\u56fe\u5143\u7d20\u9644\u52a0 # \u524d\u7f00\u4ee5\u53ca\u4efb\u610f\u7684\u540d\u79f0\uff0c\u53ef\u4ee5\u8bbf\u95ee\u5143\u7d20\u7684\u503c\u3002<\/p>\n
                                  <button<\/span> (click)=<\/span>\"hogeFnc(hogeForm.value)\"<\/span>><\/span>Click Me!<\/button><\/span>\r\n<input<\/span> type=<\/span>\"text\"<\/span> #hogeForm<\/span> \/><\/span>\r\n<\/code><\/pre>\n
                                  public<\/span> hogeFnc<\/span>(<\/span>txt<\/span>:<\/span> string<\/span>):<\/span> void<\/span> {<\/span>\r\nconsole<\/span>.<\/span>log<\/span>(<\/span>`hogeForm has value : <\/span>${<\/span>txt<\/span>}<\/span>`<\/span>);<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                  \u5c5e\u6027\u7ed1\u5b9a<\/h3>\n
                                  \u5728\u5c5e\u6027\u7ed1\u5b9a\u4e2d\uff0c\u53ef\u4ee5\u5c06ViewModel\u4e2d\u7684\u4fe1\u606f\u5d4c\u5165\u5230View\u4e2d\u3002
                                  \n\u8981\u7ed1\u5b9a\u5230HTML\u6587\u672c\u8868\u5355\u7684value\u5c5e\u6027\uff0c\u53ef\u4ee5\u8fd9\u6837\u5199\u3002<\/p>\n
                                  <input<\/span> type=<\/span>\"text\"<\/span> [value]=<\/span>\"hoge\"<\/span> \/><\/span>\r\n<\/code><\/pre>\n
                                  \u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0cViewModel \u5c06 hoge \u53d8\u91cf\u8bbe\u7f6e\u4e3a\u6587\u672c\u8868\u5355\u7684\u503c\u3002
                                  \n\u8bf7\u6ce8\u610f\u4e8b\u4ef6\u7ed1\u5b9a\u548c\u62ec\u53f7\u7684\u5f62\u5f0f\u4e0d\u540c\u3002<\/p>\n
                                    \n
                                  • \n
                                      \u30a4\u30d9\u30f3\u30c8\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3000 \uff1aView \u304b\u3089 ViewModel \u3078\u3000 \u21d2 \u3000()\u4e38\u62ec\u5f27<\/ul>\n<\/li>\n<\/ul>\n
                                      \u30d7\u30ed\u30d1\u30c6\u30a3\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0 \uff1aViewModel \u304b\u3089 View \u3078\u3000 \u21d2 \u3000[]\u89d2\u62ec\u5f27<\/p>\n
                                      \u5728\u4e0a\u8ff0\u793a\u4f8b\u4e2d\uff0c\u5373\u4f7f\u66f4\u6539\u6587\u672c\u8868\u5355\u7684\u503c\uff0cViewModel\u4e2d\u7684”hoge”\u53d8\u91cf\u7684\u503c\u4e5f\u4e0d\u4f1a\u6539\u53d8\u3002
                                      \n\u6587\u672c\u8868\u5355\u7684\u503c\u4ec5\u4ec5\u662f”\u8bbe\u7f6ehoge\u53d8\u91cf\u7684\u503c”\uff0c\u5e76\u4e14\u4e0d\u4f1a\u5c06\u6587\u672c\u8868\u5355\u7684\u66f4\u6539\u53cd\u9988\u7ed9hoge\u53d8\u91cf\u3002
                                      \n\u8981\u5c06\u66f4\u6539\u53cd\u9988\u5230hoge\u53d8\u91cf\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528\u53cc\u5411\u7ed1\u5b9a\u3002\uff08\u5982\u4e0b\u6240\u8ff0\uff09<\/p>\n
                                      \u5982\u679c\u60a8\u60f3\u8981\u7b80\u5355\u5730\u8f93\u51fa\u53d8\u91cf\u7684\u5185\u5bb9\uff0c\u800c\u4e0d\u5c06\u5176\u7ed1\u5b9a\u5230\u4efb\u4f55HTML\u5143\u7d20\u4e0a\uff0c\u53ef\u4ee5\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u8fdb\u884c\u63cf\u8ff0\u3002<\/p>\n
                                      {{ hoge }}\r\n<\/code><\/pre>\n
                                      \u5728\u4e2d\u6587\u4e2d\uff0c\u6211\u4eec\u79f0\u8fd9\u79cd\u7528\u5927\u62ec\u53f7\u6765\u5199\u7684\u8bed\u6cd5\u4e3a\u63d2\u503c\uff08Interpolation\uff09\u3002
                                      \n\u82b1\u62ec\u53f7\u5185\u4e0d\u4ec5\u53ef\u4ee5\u8f93\u51fa\u53d8\u91cf\uff0c\u8fd8\u53ef\u4ee5\u5199\u8868\u8fbe\u5f0f\u548c\u51fd\u6570\u3002<\/p>\n
                                      \u6b64\u5916\uff0c\u60a8\u8fd8\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528\u5c5e\u6027\u7ed1\u5b9a\u6765\u66f4\u6539\u89c6\u56fe\u7684\u6837\u5f0f\u3002
                                      \n\u8fd9\u5305\u62ec\u5c06\u6837\u5f0f\u7ed1\u5b9a\u5230style\u5c5e\u6027\u548c\u5c06\u7c7b\u7ed1\u5b9a\u5230class\u5c5e\u6027\u3002
                                      \n\u5728\u6837\u5f0f\u7ed1\u5b9a\u4e2d\uff0c\u60a8\u9700\u8981\u6307\u5b9a [style.CSS\u5c5e\u6027\u540d] \u5e76\u8bbe\u7f6e\u76f8\u5e94\u7684\u503c\u3002
                                      \n\u5728\u7c7b\u7ed1\u5b9a\u4e2d\uff0c\u60a8\u9700\u8981\u6307\u5b9a [class.CSS\u7c7b\u540d] \u5e76\u4f7f\u7528\u5e03\u5c14\u503c\u6765\u63a7\u5236\u7c7b\u7684\u542f\u7528\u6216\u7981\u7528\u3002<\/p>\n
                                      <p<\/span> [style.color]=<\/span>\"hogeStyle\"<\/span>><\/span>hoge works!<\/p><\/span>\r\n<p<\/span> [class.hogeblue]=<\/span>\"hogeClass\"<\/span>><\/span>hoge works!<\/p><\/span>\r\n<\/code><\/pre>\n
                                      public<\/span> hogeStyle<\/span>:<\/span> string<\/span> =<\/span> '<\/span>red<\/span>'<\/span>;<\/span>\r\npublic<\/span> hogeClass<\/span>:<\/span> boolean<\/span> =<\/span> true<\/span>;<\/span>\r\n<\/code><\/pre>\n
                                      .hogeblue<\/span> {<\/span>\r\n  color<\/span>:<\/span> blue<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                      \u5728\u6837\u5f0f\u7ed1\u5b9a\u7684\u60c5\u51b5\u4e0b\uff0cViewModel \u9700\u8981\u6301\u6709\u6837\u5f0f\u4fe1\u606f\u3002\u8fd9\u5e76\u4e0d\u662f\u7406\u60f3\u7684\u72b6\u6001\uff0c\u4ece\u8d23\u4efb\u5206\u79bb\u7684\u89d2\u5ea6\u6765\u770b\uff08\u5b9e\u9645\u4e0a\uff0c\u6837\u5f0f\u5e94\u8be5\u96c6\u4e2d\u5728 CSS \u4e2d\uff09\u3002\u6240\u4ee5\uff0c\u9664\u975e\u6709\u7279\u6b8a\u7684\u7406\u7531\uff0c\u6700\u597d\u4f7f\u7528\u7c7b\u7ed1\u5b9a\u3002<\/p>\n
                                      \u53cc\u5411\u7ed1\u5b9a<\/h3>\n
                                      \u901a\u8fc7\u5c06\u4e8b\u4ef6\u7ed1\u5b9a\u548c\u5c5e\u6027\u7ed1\u5b9a\u7ed3\u5408\u8d77\u6765\uff0c\u53ef\u4ee5\u5b9e\u73b0 View \u548c ViewModel \u7684\u540c\u6b65\u3002
                                      \n\u4ee5\u4e0b\u662f\u6700\u7b80\u5355\u7684\u53cc\u5411\u7ed1\u5b9a\u793a\u4f8b\u3002<\/p>\n
                                      <input<\/span> type=<\/span>\"text\"<\/span> #hogeForm<\/span> [value]=<\/span>\"hoge\"<\/span> (input)=<\/span>\"hoge = hogeForm.value\"<\/span> \/><\/span>\r\n<\/code><\/pre>\n
                                      \u5728\u6587\u672c\u6846\u4e2d\u8bbe\u7f6ehoge\u53d8\u91cf\u7684\u503c\u540e\uff0c\u5982\u679c\u6587\u672c\u6846\u7684\u503c\u53d1\u751f\u53d8\u5316\uff0c\u90a3\u4e48hoge\u53d8\u91cf\u7684\u503c\u4e5f\u4f1a\u76f8\u5e94\u6539\u53d8\u3002\u867d\u7136\u8fd9\u79cd\u65b9\u6cd5\u53ef\u4ee5\u5b9e\u73b0\u53cc\u5411\u7ed1\u5b9a\uff0c\u4f46\u8fc7\u4e8e\u5197\u957f\u3002\u56e0\u6b64\uff0c\u901a\u5e38\u60c5\u51b5\u4e0b\u4f1a\u4f7f\u7528NgModel\u6307\u4ee4\u3002Angular\u63d0\u4f9b\u4e86FormsModule\u6a21\u5757\u6765\u65b9\u4fbf\u5904\u7406\u8868\u5355\u64cd\u4f5c\uff0c\u800cNgModel\u6307\u4ee4\u662fFormsModule\u6a21\u5757\u7684\u4e00\u4e2a\u529f\u80fd\u3002\u901a\u8fc7\u7f16\u5199NgModel\u6307\u4ee4\uff0c\u53ef\u4ee5\u5c06\u8868\u5355\u5143\u7d20\u4f5c\u4e3aFormControl\u5b9e\u4f8b\u5904\u7406\u3002<\/p>\n
                                      \u4f7f\u7528NgModel\u6307\u4ee4\u9700\u8981\u5bfc\u5165FormsModule\u6a21\u5757\uff0c\u7136\u540e\u5728\u89c6\u56fe\u4e2d\u7f16\u5199NgModel\u6307\u4ee4\u3002<\/p>\n
                                      import<\/span> {<\/span> FormsModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/forms<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\ndeclarations<\/span>:<\/span> [<\/span>\r\n\uff5e<\/span> \u7701\u7565<\/span> \uff5e<\/span>\r\n],<\/span>\r\nimports<\/span>:<\/span> [<\/span>\r\nFormsModule<\/span>,<\/span>\r\n\uff5e<\/span> \u7701\u7565<\/span> \uff5e<\/span>\r\n],<\/span>\r\nproviders<\/span>:<\/span> [],<\/span>\r\nbootstrap<\/span>:<\/span> [<\/span>AppComponent<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
                                      <input<\/span> type=<\/span>\"text\"<\/span> [(ngModel)]=<\/span>\"hoge\"<\/span> \/><\/span>\r\n<\/code><\/pre>\n
                                      \u901a\u8fc7\u5c06HTML\u63cf\u8ff0\u8bbe\u7f6e\u4e3a[(ngModel)]\u548choge\u53d8\u91cf\uff0c\u8be5\u8868\u5355\u7684FormControl\u5b9e\u4f8b\u5c06\u4e0ehoge\u53d8\u91cf\u5173\u8054\uff0c\u5e76\u7acb\u5373\u540c\u6b65\u66f4\u6539\u3002
                                      \n\u4e8b\u4ef6\u7ed1\u5b9a\u7684\u8bed\u6cd5\u662f\u5e26\u6709()\u62ec\u53f7\u7684\uff0c\u5c5e\u6027\u7ed1\u5b9a\u7684\u8bed\u6cd5\u662f\u5e26\u6709[]\u62ec\u53f7\u7684\uff0c\u800c\u8fd9\u4e2a\u8bed\u6cd5\u662f\u7ed3\u5408\u4e86\u5b83\u4eec\u7684\u5f62\u5f0f[()]\uff08\u88ab\u79f0\u4e3a\u53cc\u5411\u7ed1\u5b9a\u8bed\u6cd5\uff09\u3002<\/p>\n
                                      \u6307\u4ee4<\/h2>\n
                                      \u901a\u8fc7\u5728HTML\u4e2d\u7f16\u5199Angular\u53ef\u4ee5\u89e3\u91ca\u7684\u7279\u5b9a\u5173\u952e\u5b57\uff0c\u53ef\u4ee5\u6539\u53d8\u89c6\u56fe\u7684\u8f93\u51fa\u7ed3\u679c\u3002\u8fd9\u4e2a\u673a\u5236\u88ab\u79f0\u4e3a\u6307\u4ee4\u3002
                                      \n\u6307\u4ee4\u5206\u4e3a\u4e24\u79cd\u5927\u7c7b\u3002<\/p>\n
                                      \u69cb\u9020\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3000 View \u306e\u69cb\u9020\uff08\u30ec\u30a4\u30a2\u30a6\u30c8\uff09\u305d\u306e\u3082\u306e\u3092\u5909\u5316\u3055\u305b\u308b<\/p>\n
                                      \u5c5e\u6027\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3000 View \u306e\u5c5e\u6027\u3092\u64cd\u4f5c\u3057\u3066\u898b\u305f\u76ee\u3084\u632f\u308b\u821e\u3044\u3092\u5909\u5316\u3055\u305b\u308b<\/p>\n
                                      \u6784\u9020\u6307\u4ee4<\/h3>\n
                                      \u5e38\u5e38\u4f7f\u7528\u7684\u5305\u62ec\u6839\u636e\u6761\u4ef6\u6dfb\u52a0\/\u5220\u9664DOM\u5143\u7d20\u7684NgIf\u548c\u901a\u8fc7\u5faa\u73af\u751f\u6210DOM\u5143\u7d20\u7684NgFor\u3002<\/p>\n
                                      <div<\/span> *ngIf=<\/span>\"hoge === fuga\"<\/span>><\/span>\u3042\u3044\u3046\u3048\u304a<\/div><\/span>\r\n<\/code><\/pre>\n
                                      <div<\/span> *ngFor=<\/span>\"let item of ['AAAA','BBBB','CCCC']\"<\/span>><\/span>{{ item }}<\/div><\/span>\r\n<\/code><\/pre>\n
                                      \u5982\u679c\u6761\u4ef6\u8868\u8fbe\u5f0f\uff08\u6216\u5e03\u5c14\u53d8\u91cf\uff09\u4e3a\u771f\uff0c\u5219NgIf\u4f1a\u751f\u6210DOM\u5143\u7d20\uff1b\u5982\u679c\u6761\u4ef6\u8868\u8fbe\u5f0f\u4e3a\u5047\uff0c\u5219NgIf\u4e0d\u4f1a\u751f\u6210DOM\u5143\u7d20\u3002
                                      \n\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u53ef\u4ee5\u4f7f\u7528CSS\u7684display: none;\u7b49\u65b9\u5f0f\u6765\u6d88\u9664\u7279\u5b9a\u5143\u7d20\uff0c\u4f46\u8fd9\u6837CSS\u4f1a\u5728\u751f\u6210DOM\u5143\u7d20\u540e\u518d\u9690\u85cf\u5b83\u3002
                                      \n\u7531\u4e8eNgIf\u4e0d\u4f1a\u751f\u6210DOM\u5143\u7d20\uff0c\u56e0\u6b64\u5728\u6027\u80fd\u65b9\u9762\u5177\u6709\u4f18\u52bf\u3002<\/p>\n
                                      \u5728NgFor\u7684\u60c5\u51b5\u4e0b\uff0c\u4f1a\u6839\u636e\u6307\u5b9a\u7684\u53ef\u8fed\u4ee3\u503c\u5faa\u73af\u751f\u6210DOM\u5143\u7d20\u3002
                                      \n\u57fa\u672c\u4e0a\u662f\u7528for-of\u8bed\u6cd5\u6765\u7f16\u5199\u7684\uff0c\u5c06\u5faa\u73af\u4e2d\u63d0\u53d6\u7684\u503c\u5b58\u5165\u4e34\u65f6\u53d8\u91cf\u4e2d\u5e76\u4f7f\u7528\u3002
                                      \n\u7531\u4e8eNgFor\u65e0\u6cd5\u6267\u884c\u56fa\u5b9a\u6b21\u6570\u5faa\u73af\uff08\u7c7b\u4f3c\u4e8e”let i=0; i < 10; i++”\uff09\uff0c\u56e0\u6b64\u5fc5\u987b\u4f20\u9012\u53ef\u8fed\u4ee3\u7684\u503c\u3002\uff08\u53ef\u5c06\u5176\u7c7b\u6bd4\u4e3aForEach\uff09<\/p>\n
                                      \u5c5e\u6027\u6307\u4ee4<\/h3>\n
                                      \u7ecf\u5e38\u4f7f\u7528\u7684\u662fNgClass\uff0c\u5b83\u7528\u4e8e\u4e00\u6b21\u6027\u5e94\u7528CSS\u7c7b\uff1b\u8fd8\u6709NgStyle\uff0c\u5b83\u7528\u4e8e\u4e00\u6b21\u6027\u5e94\u7528CSS\u6837\u5f0f\u3002<\/p>\n
                                      <div<\/span> [ngClass]=<\/span>\"hogeClass\"<\/span>><\/span>\u3042\u3044\u3046\u3048\u304a<\/div><\/span>\r\n<\/code><\/pre>\n
                                      .classA<\/span> {<\/span>\r\n  color<\/span>:<\/span> red<\/span>;<\/span>\r\n}<\/span>\r\n.classB<\/span> {<\/span>\r\n  font-weight<\/span>:<\/span> bold<\/span>;<\/span>\r\n}<\/span>\r\n.classC<\/span> {<\/span>\r\n  background-color<\/span>:<\/span> yellow<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                      import<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-hoge<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/hoge.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/hoge.component.css<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> HogeComponent<\/span> {<\/span>\r\n  public<\/span> hogeClass<\/span> =<\/span> {<\/span>\r\n    classA<\/span>:<\/span> true<\/span>,<\/span>\r\n    classB<\/span>:<\/span> true<\/span>,<\/span>\r\n    classC<\/span>:<\/span> true<\/span>\r\n  };<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                      \u5728NgClass\u4e2d\uff0c\u6211\u4eec\u63cf\u8ff0\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5176\u4e2d\u5305\u542b\u4e0eCSS\u7c7b\u540d\u5339\u914d\u7684\u952e\u503c\u5bf9\u3002\u5982\u679c\u952e\u503c\u5bf9\u7684Value\u503c\u4e3atrue\uff0c\u5219\u5e94\u7528\u76f8\u5e94\u7684\u7c7b\uff1b\u5982\u679cValue\u4e3afalse\uff0c\u5219\u4e0d\u5e94\u7528\u8be5\u7c7b\u3002<\/p>\n
                                      <div<\/span> [ngStyle]=<\/span>\"hogeStyle\"<\/span>><\/span>\u3042\u3044\u3046\u3048\u304a<\/div><\/span>\r\n<\/code><\/pre>\n
                                      import<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-hoge<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/hoge.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/hoge.component.css<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> HogeComponent<\/span> {<\/span>\r\n  public<\/span> hogeStyle<\/span> =<\/span> {<\/span>\r\n    color<\/span>:<\/span> '<\/span>blue<\/span>'<\/span>,<\/span>\r\n    '<\/span>text-decoration<\/span>'<\/span>:<\/span> '<\/span>underline<\/span>'<\/span>,<\/span>\r\n    '<\/span>font-size<\/span>'<\/span>:<\/span> '<\/span>20pt<\/span>'<\/span>\r\n  };<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                      \u5728NgStyle\u4e2d\uff0c\u9700\u8981\u7f16\u5199\u5305\u542b\u4e0eCSS\u5c5e\u6027\u540d\u76f8\u5339\u914d\u7684\u952e\u503c\u5bf9\u7684\u5bf9\u8c61\u3002
                                      \n\u6837\u5f0f\u5c06\u6839\u636e\u6240\u6307\u5b9a\u7684\u503c\u5e94\u7528\u3002
                                      \n\u5728\u4f7f\u7528NgStyle\u65f6\uff0cViewModel\u9700\u8981\u5305\u542b\u6837\u5f0f\u4fe1\u606f\u3002
                                      \n\u8fd9\u4e0d\u662f\u4e00\u79cd\u7406\u60f3\u7684\u72b6\u6001\uff0c\u4ece\u8d23\u4efb\u5206\u79bb\u7684\u89d2\u5ea6\u6765\u770b\uff08\u6837\u5f0f\u5e94\u8be5\u96c6\u4e2d\u5728CSS\u4e2d\uff09\uff0c\u56e0\u6b64\u9664\u975e\u6709\u7279\u6b8a\u539f\u56e0\uff0c\u5426\u5219\u6700\u597d\u4f7f\u7528NgClass\u3002<\/p>\n
                                      \u81ea\u5b9a\u4e49\u6307\u4ee4<\/h2>\n
                                      \u9664\u4e86 Angular \u672c\u8eab\u5df2\u7ecf\u5b9e\u73b0\u7684\u5185\u7f6e\u6307\u4ee4\u5916\uff0c\u4f60\u4e5f\u53ef\u4ee5\u81ea\u5b9a\u4e49\u6307\u4ee4\u3002
                                      \n\u5c31\u50cf\u521b\u5efa\u7ec4\u4ef6\u548c\u670d\u52a1\u4e00\u6837\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 Angular CLI \u751f\u6210\u6307\u4ee4\u3002<\/p>\n
                                      ng generate directive directive\/mydirective\r\n<\/code><\/pre>\n
                                      CREATE src\/app\/directive\/mydirective.directive.spec.ts (244 bytes)\r\nCREATE src\/app\/directive\/mydirective.directive.ts (151 bytes)\r\nUPDATE src\/app\/app.module.ts (689 bytes)\r\n<\/code><\/pre>\n
                                      <div<\/span> appMydirective<\/span>><\/span>\u3042\u3044\u3046\u3048\u304a<\/div><\/span>\r\n<\/code><\/pre>\n
                                      import<\/span> {<\/span> Directive<\/span>,<\/span> ElementRef<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Directive<\/span>({<\/span>\r\n  selector<\/span>:<\/span> [<\/span>appMydirective<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> MydirectiveDirective<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n  constructor<\/span>(<\/span>private<\/span> elRef<\/span>:<\/span> ElementRef<\/span>)<\/span> {}<\/span>\r\n\r\n  ngOnInit<\/span>()<\/span> {<\/span>\r\n    const<\/span> el<\/span> =<\/span> this<\/span>.<\/span>elRef<\/span>.<\/span>nativeElement<\/span>;<\/span>\r\n    el<\/span>.<\/span>style<\/span>.<\/span>backgroundColor<\/span> =<\/span> '<\/span>green<\/span>'<\/span>;<\/span>\r\n    el<\/span>.<\/span>style<\/span>.<\/span>color<\/span> =<\/span> '<\/span>yellow<\/span>'<\/span>;<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                      \u5728\u4e0a\u8ff0\u7684\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u5c06\u6307\u4ee4\u9009\u62e9\u5668\u547d\u540d\u4e3aappMydirective\u3002
                                      \n\u901a\u8fc7\u5728\u5143\u7d20\u4e2d\u5199\u5165appMydirective\u7684\u65b9\u5f0f\uff0c\u53ef\u4ee5\u53d1\u6325\u6307\u4ee4\u7684\u4f5c\u7528\uff0c\u4ece\u800c\u6539\u53d8\u5143\u7d20\u7684\u6837\u5f0f\u3002
                                      \n\u4e3a\u4e86\u5f15\u7528\u5df2\u5e94\u7528\u6307\u4ee4\u7684\u5143\u7d20\uff0c\u6211\u4eec\u4f7f\u7528\u4e86ElementRef\u7c7b\u3002<\/p>\n
                                      \u7ba1\u5b50<\/h2>\n
                                      \u5728Angular\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528\u7b80\u5355\u7684\u51fd\u6570\uff08\u8f93\u5165\u2192\u683c\u5f0f\u5316\u2192\u8f93\u51fa\uff09\u7684\u673a\u5236\u6765\u5728\u89c6\u56fe\u4e2d\u5bf9\u663e\u793a\u5185\u5bb9\u8fdb\u884c\u683c\u5f0f\u5316\uff0c\u8fd9\u4e2a\u673a\u5236\u88ab\u79f0\u4e3a\u7ba1\u9053\u3002
                                      \n\u7c7b\u4f3c\u4e8e\u5e38\u89c1\u7684\u547d\u4ee4\u884c\u754c\u9762\u4e2d\u7684\u7ba1\u9053\u64cd\u4f5c\u7b26\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u201c|\u201d\u6765\u8fde\u63a5\u51fd\u6570\u5e76\u8c03\u7528\u5b83\uff0c\u4ee5\u5bf9\u6570\u636e\u8fdb\u884c\u5904\u7406\u3002
                                      \n\u4ee5\u4e0b\u662f\u4e00\u4e9b\u5e38\u7528\u7684\u5185\u7f6e\u7ba1\u9053\u793a\u4f8b\u3002<\/p>\n
                                      <p><\/span>{{ 'This is Pipe' | uppercase }}<\/p><\/span>\r\n<p><\/span>{{ 'This is Pipe' | lowercase }}<\/p><\/span>\r\n<!-- 0\u6587\u5b57\u76ee\u304b\u30894\u6587\u5b57\u62bd\u51fa --><\/span>\r\n<p><\/span>{{ 'This is Pipe' | slice:0:4 }}<\/p><\/span>\r\n<p><\/span>{{ 10000 | currency }}<\/p><\/span>\r\n<p><\/span>{{ 10000 | currency:'JPY' }}<\/p><\/span>\r\n<p><\/span>{{ 10000 | number }}<\/p><\/span>\r\n<!-- \u6574\u6570\u684110\u6841\u4ee5\u4e0a\u3001\u5c0f\u6570\u70b9\u4ee5\u4e0b2\u6841 --><\/span>\r\n<p><\/span>{{ 10000 | number:'10.2' }}<\/p><\/span>\r\n<p><\/span>{{ 0.5 | percent }}<\/p><\/span>\r\n<p><\/span>{{ dateObj | date }}<\/p><\/span>\r\n<p><\/span>{{ dateObj | date:'yyyy\u5e74 MM\u6708 dd\u65e5' }}<\/p><\/span>\r\n<\/code><\/pre>\n
                                      \u203bdateObj\uff1a\u65e5\u671f\u5bf9\u8c61<\/p>\n
                                      \u5b9a\u5236\u7ba1\u9053<\/h2>\n
                                      \u4e0e\u6307\u4ee4\u4e00\u6837\uff0c\u6211\u4eec\u4e5f\u53ef\u4ee5\u81ea\u5df1\u521b\u5efa\u7ba1\u9053\u3002
                                      \n\u5c31\u50cf\u521b\u5efa\u7ec4\u4ef6\u548c\u670d\u52a1\u4e00\u6837\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7Angular CLI\u8fdb\u884c\u751f\u6210\u3002<\/p>\n
                                      ng generate pipe pipe\/mypipe\r\n<\/code><\/pre>\n
                                      CREATE src\/app\/pipe\/mypipe.pipe.spec.ts (187 bytes)\r\nCREATE src\/app\/pipe\/mypipe.pipe.ts (205 bytes)\r\nUPDATE src\/app\/app.module.ts (828 bytes)\r\n<\/code><\/pre>\n
                                      {{ '\u543e\u8f29\u306f\u732b\u3067\u3042\u308b\u3002\u540d\u524d\u306f\u307e\u3060\u7121\u3044\u3002' | mypipe }}\r\n<\/code><\/pre>\n
                                      import<\/span> {<\/span> Pipe<\/span>,<\/span> PipeTransform<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Pipe<\/span>({<\/span>\r\n  name<\/span>:<\/span> '<\/span>mypipe<\/span>'<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> MypipePipe<\/span> implements<\/span> PipeTransform<\/span> {<\/span>\r\n  transform<\/span>(<\/span>value<\/span>:<\/span> string<\/span>):<\/span> string<\/span> {<\/span>\r\n    if<\/span> (<\/span>typeof<\/span> value<\/span> ===<\/span> '<\/span>string<\/span>'<\/span>)<\/span> {<\/span>\r\n      return<\/span> value<\/span>.<\/span>replace<\/span>(<\/span>'<\/span>\u732b<\/span>'<\/span>,<\/span> '<\/span>\u72ac<\/span>'<\/span>);<\/span>\r\n    }<\/span> else<\/span> {<\/span>\r\n      return<\/span> value<\/span>;<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                      \u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u5c06\u7ba1\u9053\u9009\u62e9\u5668\u547d\u540d\u4e3amypipe\u3002
                                      \n\u901a\u8fc7\u5c06\u6570\u636e\u5bfc\u5165\u5230mypipe\u4e2d\uff0c\u53ef\u4ee5\u66ff\u6362\u4f20\u9012\u7684\u5b57\u7b26\u4e32\u4e2d\u7684\u5173\u952e\u5b57\u3002
                                      \n\u5b9e\u9645\u4e0a\uff0c\u7ba1\u9053\u7684\u8f6c\u6362\u64cd\u4f5c\u662f\u901a\u8fc7transform\u65b9\u6cd5\u6765\u5b8c\u6210\u7684\u3002
                                      \nAngular\u901a\u8fc7\u8c03\u7528\u5b9e\u73b0\u4e86PipeTransform\u63a5\u53e3\u7684transform\u65b9\u6cd5\u6765\u8fdb\u884c\u6570\u636e\u8f6c\u6362\u3002
                                      \n\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u7531\u4e8e\u7ba1\u9053\u5904\u7406\u4f1a\u5728\u89c6\u56fe\u4e2d\u9891\u7e41\u6267\u884c\uff0c\u56e0\u6b64\u5e94\u5c3d\u91cf\u907f\u514d\u6267\u884c\u91cd\u91cf\u7ea7\u7684\u64cd\u4f5c\u3002
                                      \n\u6b64\u5916\uff0c\u5728\u7ba1\u9053\u7684\u5904\u7406\u8fc7\u7a0b\u4e2d\uff0c\u6700\u597d\u59cb\u7ec8\u68c0\u67e5\u4f20\u9012\u7684\u53c2\u6570\u7c7b\u578b\u662f\u5426\u7b26\u5408\u9884\u671f\u3002<\/p>\n
                                      \u8def\u7531\u5668<\/h2>\n
                                      \u5728Angular\u4e2d\uff0c\u6211\u4eec\u901a\u8fc7\u7ec4\u5408\u7ec4\u4ef6\u6765\u6784\u5efa\u9875\u9762\uff0c\u4f46\u901a\u8fc7\u66ff\u6362\u663e\u793a\u7ec4\u4ef6\u6765\u8868\u793a\u9875\u9762\u8df3\u8f6c\u7684\u52a8\u4f5c\uff08\u4f8b\u5982\u7528\u6237\u70b9\u51fb\u6309\u94ae\u3001\u8fd0\u884c\u51fd\u6570\u7b49\uff09\uff0c\u53ef\u4ee5\u5b9e\u73b0\u9875\u9762\u7684\u8f6c\u6362\u3002
                                      \n\u8fd9\u4e2a\u529f\u80fd\u88ab\u79f0\u4e3a\u8def\u7531\uff0c\u5e76\u7531RouterModule\u6a21\u5757\u63d0\u4f9b\u3002<\/p>\n
                                      \u8981\u8fdb\u884c\u8def\u7531\uff0c\u9700\u8981\u8fdb\u884c\u4ee5\u4e0b\u51c6\u5907\u5de5\u4f5c\u3002<\/p>\n
                                        \n
                                      1. \n
                                          \u521b\u5efa\u4e00\u4e2aAppRoutingModule\u6a21\u5757\u6765\u63cf\u8ff0\u57fa\u672c\u8981\u7d20\u3002<\/ol>\n<\/li>\n<\/ol>\n
                                           <\/p>\n
                                            \n
                                          1. \n
                                              \u8bbe\u7f6e\u6839\u8def\u7531\u3002<\/ol>\n<\/li>\n<\/ol>\n
                                               <\/p>\n
                                                \n
                                              1. \n
                                                  \u63cf\u8ff0\u8def\u7531\u51fa\u53e3\u3002<\/ol>\n<\/li>\n<\/ol>\n
                                                   <\/p>\n
                                                    \u63cf\u8ff0\u8fdb\u884c\u8fc7\u6e21\u7684\u89e6\u53d1\u5668\u3002<\/ol>\n
                                                    \u63cf\u8ff0\u57fa\u7840\u8981\u7d20<\/h3>\n
                                                    \u9996\u5148\uff0c\u5728index.html\u6587\u4ef6\u7684head\u6807\u7b7e\u4e2d\u4f7f\u7528\u6807\u7b7e\u6765\u6307\u793a\u5e94\u7528\u7a0b\u5e8f\u7684\u57fa\u51c6\u9875\u9762\u7684\u4f4d\u7f6e\u3002
                                                    \n\u901a\u8fc7\u5c06href\u5c5e\u6027\u8bbe\u7f6e\u4e3a\u201c\/\u201d\uff0c\u5c06\u6b64\u9875\u9762\u6307\u793a\u4e3a\u8def\u7531\u5668\u4e2d\u5e94\u7528\u7a0b\u5e8f\u7684\u6839\u3002
                                                    \n\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u5982\u679c\u4f7f\u7528Angular CLI\u751f\u6210\u5e94\u7528\u7a0b\u5e8f\u7684\u6a21\u677f\uff08ng new\uff09\uff0c\u5219\u4f1a\u81ea\u52a8\u5199\u5165index.html\u6587\u4ef6\u4e2d\u3002<\/p>\n
                                                    <base<\/span> href=<\/span>\"\/\"<\/span> \/><\/span>\r\n<\/code><\/pre>\n
                                                    \u521b\u5efa AppRoutingModule \u6a21\u5757\u3002<\/h3>\n
                                                    \u70ba\u4e86\u4f7f\u7528\u8def\u7531\u529f\u80fd\uff0c\u9700\u8981\u5c0e\u5165Angular\u7684RouterModule\u3002
                                                    \n\u96d6\u7136\u53ef\u4ee5\u76f4\u63a5\u5728\u6839\u6a21\u584a\u4e2d\u5c0e\u5165\uff0c\u4f46\u901a\u5e38\u6703\u5c07\u8def\u7531\u5c08\u7528\u7684\u6a21\u584a\u6e96\u5099\u597d\u4e26\u5c0e\u5165\u6839\u6a21\u584a\u3002
                                                    \n\u7531\u65bc\u9700\u8981\u9032\u884c\u521d\u59cb\u8a2d\u5b9a\u5de5\u4f5c\uff0c\u5c07\u6a21\u584a\u5206\u96e2\u53ef\u4ee5\u907f\u514d\u6839\u6a21\u584a\u7684\u4ee3\u78bc\u8b8a\u5f97\u8907\u96dc\u3002
                                                    \n\u6a21\u584a\u540d\u53ef\u4ee5\u4efb\u610f\u547d\u540d\uff0c\u4f46\u901a\u5e38\u63a8\u85a6\u4f7f\u7528\u300cAppRoutingModule\u300d\u4f5c\u70ba\u6163\u4f8b\u3002<\/p>\n
                                                    ng generate module app-routing --flat --module=app\r\n<\/code><\/pre>\n
                                                    –flat\u3000\u56fa\u6709\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u3089\u305a\u3001src\/app \u76f4\u4e0b\u306b\u4f5c\u6210\u3059\u308b<\/p>\n
                                                    –module\u3000\u6307\u5b9a\u3057\u305f\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\u306b\u81ea\u52d5\u7684\u306b\u8ffd\u52a0\u3059\u308b<\/p>\n
                                                    CREATE src\/app\/app-routing.module.ts (194 bytes)\r\nUPDATE src\/app\/app.module.ts (1119 bytes)\r\n<\/code><\/pre>\n
                                                    \u7531\u4e8e\u8def\u7531\u6a21\u5757\u662f\u5728\u6574\u4e2a\u5e94\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528\u7684\u6a21\u5757\uff0c\u6240\u4ee5\u901a\u5e38\u4f1a\u5c06\u5176\u653e\u5728AppModule\uff08\u6839\u6a21\u5757\uff09\u7684\u76f8\u540c\u6587\u4ef6\u5939\u4e2d\u3002
                                                    \n\u53e6\u5916\uff0c\u5728\u4e0a\u8ff0\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u76f4\u63a5\u5c06\u751f\u6210\u7684\u6a21\u5757\u5bfc\u5165\u5230AppModule\u4e2d\u3002
                                                    \n\u5982\u679c\u4e0d\u4f7f\u7528module\u9009\u9879\uff0c\u5219\u9700\u8981\u624b\u52a8\u5bfc\u5165\u3002<\/p>\n
                                                    \u8bbe\u5b9a\u8def\u5f84<\/h3>\n
                                                    Angular\u5185\u7f6e\u7684RouterModule\u6a21\u5757\u4e0d\u80fd\u76f4\u63a5\u4f7f\u7528\u3002
                                                    \n\u9700\u8981\u6559\u7ed9\u5b83\u4f5c\u4e3a\u8fdb\u884c\u8def\u7531\u7684\u5730\u56fe\u7684\u8def\u7531\uff08Route\uff09\u3002
                                                    \n\u521a\u521a\u751f\u6210\u7684AppRoutingModule\u6a21\u5757\u662f\u4e00\u4e2a\u7a7a\u7684\u72b6\u6001\uff0c\u4ec0\u4e48\u4e5f\u6ca1\u6709\u5199\u3002
                                                    \n\u6211\u4eec\u5c06\u5bfc\u5165RouterModule\u6a21\u5757\uff0c\u5e76\u8fdb\u884c\u8bbe\u7f6e\uff0c\u4f7f\u5176\u6210\u4e3a\u4e00\u4e2a\u8def\u7531\u6a21\u5757\u3002<\/p>\n
                                                    import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Routes<\/span>,<\/span> RouterModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/router<\/span>'<\/span>;<\/span> \/\/ RouterModule\u3068Routes\u578b\u3092\u30a4\u30f3\u30dd\u30fc\u30c8<\/span>\r\n\r\nimport<\/span> {<\/span> HogeComponent<\/span> }<\/span> from<\/span> '<\/span>.\/hoge\/hoge.component<\/span>'<\/span>;<\/span> \/\/ \u30b5\u30f3\u30d7\u30eb\u7528\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 #1<\/span>\r\nimport<\/span> {<\/span> FugaComponent<\/span> }<\/span> from<\/span> '<\/span>.\/fuga\/fuga.component<\/span>'<\/span>;<\/span> \/\/ \u30b5\u30f3\u30d7\u30eb\u7528\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 #2<\/span>\r\n\r\nconst<\/span> routes<\/span>:<\/span> Routes<\/span> =<\/span> [<\/span>\r\n  \/\/ https:\/\/example.jp\/hoge \u306b\u30a2\u30af\u30bb\u30b9\u3055\u308c\u305f\u3089HogeComponent\u3092\u8868\u793a\u3059\u308b<\/span>\r\n  {<\/span> path<\/span>:<\/span> '<\/span>hoge<\/span>'<\/span>,<\/span> component<\/span>:<\/span> HogeComponent<\/span> },<\/span>\r\n  \/\/ https:\/\/example.jp\/fuga \u306b\u30a2\u30af\u30bb\u30b9\u3055\u308c\u305f\u3089FugaComponent\u3092\u8868\u793a\u3059\u308b<\/span>\r\n  {<\/span> path<\/span>:<\/span> '<\/span>fuga<\/span>'<\/span>,<\/span> component<\/span>:<\/span> FugaComponent<\/span> },<\/span>\r\n  \/\/ \u4e0a\u8a18\u4ee5\u5916\u306eURL\u306b\u30a2\u30af\u30bb\u30b9\u3055\u308c\u305f\u3089 https:\/\/example.jp\/ \u306b\u9077\u79fb\u3059\u308b<\/span>\r\n  {<\/span> path<\/span>:<\/span> '<\/span>**<\/span>'<\/span>,<\/span> redirectTo<\/span>:<\/span> '<\/span>\/<\/span>'<\/span> }<\/span>\r\n];<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  imports<\/span>:<\/span> [<\/span>RouterModule<\/span>.<\/span>forRoot<\/span>(<\/span>routes<\/span>)],<\/span> \/\/ \u30eb\u30fc\u30c8\u3092\u8aad\u307f\u8fbc\u3080<\/span>\r\n  exports<\/span>:<\/span> [<\/span>RouterModule<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppRoutingModule<\/span> {}<\/span>\r\n<\/code><\/pre>\n
                                                    \u9996\u5148\uff0c\u6211\u4eec\u5bfc\u5165RouterModule\u6a21\u5757\u548cRoutes\u7c7b\u578b\u3002
                                                    \nRoutes\u7c7b\u578b\u662fRoute\u7c7b\u578b\uff08\u4e00\u4e2a\u8def\u7531\u76841\u4e2a\u6761\u76ee\uff09\u7684\u6570\u7ec4\u3002
                                                    \nRoute\u7c7b\u578b\u53ef\u4ee5\u6307\u5b9a\u4ee5\u4e0b\u5c5e\u6027\u4e4b\u4e00\uff0c\u4f8b\u5982\uff1a<\/p>\n
                                                    \n
                                                    \u30d7\u30ed\u30d1\u30c6\u30a3\u5185\u5bb9pathURL \u3068\u6bd4\u8f03\u3059\u308b\u6587\u5b57\u5217\u3002
                                                    \n**<\/code>\u3092\u6307\u5b9a\u3059\u308b\u3068\u30ef\u30a4\u30eb\u30c9\u30ab\u30fc\u30c9\u306b\u306a\u308b\u3002pathMatchURL \u306e\u6bd4\u8f03\u30eb\u30fc\u30eb\u3002
                                                    \n\u30fbprefix\uff08\u524d\u65b9\u4e00\u81f4\uff09\uff1a\u30c7\u30d5\u30a9\u30eb\u30c8
                                                    \n\u30fbfull\uff08\u5b8c\u5168\u4e00\u81f4\uff09componentpath \u304c\u4e00\u81f4\u3057\u305f\u5834\u5408\u306b\u8868\u793a\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8redirectTopath \u304c\u4e00\u81f4\u3057\u305f\u5834\u5408\u306b\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u3059\u308b URLcanActivate\u30a2\u30af\u30c6\u30a3\u30d6\u5316\u53ef\u80fd\u304b\u5224\u5b9a\u3059\u308b\u30ac\u30fc\u30c9\uff08\u5f8c\u8ff0\uff09\u306e\u914d\u5217loadChildren\u9045\u5ef6\u30ed\u30fc\u30c9\u3092\u884c\u3046\u305f\u3081\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af<\/div>\n<\/div>\n
                                                    \u8def\u7531\u7684\u4f18\u5148\u7ea7\u6309\u7167\u6307\u5b9a\u7684\u987a\u5e8f\u6765\u786e\u5b9a\u3002
                                                    \n\u5f53\u4f7f\u7528\u901a\u914d\u7b26\u65f6\uff0c\u5982\u679c\u987a\u5e8f\u4e0d\u6b63\u786e\uff0c\u6240\u6709\u8bbf\u95ee\u90fd\u4f1a\u88ab\u901a\u914d\u7b26\u6355\u83b7\uff0c\u6240\u4ee5\u52a1\u5fc5\u5728\u6700\u540e\u8fdb\u884c\u8bbe\u7f6e\u3002
                                                    \n\u901a\u8fc7\u5728 RouterModule \u6a21\u5757\u7684 forRoot \u65b9\u6cd5\u4e2d\u52a0\u8f7d\u521b\u5efa\u7684\u8def\u7531\uff08routes \u5e38\u91cf\uff09\uff0c\u53ef\u4ee5\u5c06\u5176\u4f5c\u4e3a\u8def\u7531\u5668\u8fd0\u884c\u3002<\/p>\n
                                                    \u63cf\u8ff0\u8def\u7531\u5668\u63d2\u5ea7<\/h3>\n
                                                    \u5728\u8def\u7531\u5668\u4e2d\u88ab\u66ff\u4ee3\u7684\u7ec4\u4ef6\u5360\u4f4d\u7b26\u662f”router-outlet”\u6307\u4ee4\u3002\u901a\u8fc7\u5728\u89c6\u56fe\u7684\u4efb\u610f\u4f4d\u7f6e\u8fdb\u884c\u7f16\u5199\uff0c\u53ef\u4ee5\u5c06\u4e0eURL\u76f8\u5bf9\u5e94\u7684\u7ec4\u4ef6\u4e0e\u8def\u7531\u5668\u8fdb\u884c\u7ed1\u5b9a\u3002<\/p>\n
                                                    <router-outlet><\/router-outlet><\/span>\r\n<\/code><\/pre>\n
                                                    \u63cf\u8ff0\u89e6\u53d1\u8fc1\u79fb\u7684\u884c\u4e3a<\/h3>\n
                                                    \u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u901a\u8fc7\u5728Web\u9875\u9762\u4e0a\u70b9\u51fb\u94fe\u63a5\u6216\u6309\u94ae\u6765\u8fdb\u884c\u9875\u9762\u8df3\u8f6c\u3002\u4e3a\u4e86\u5b9a\u4e49\u8fd9\u4e9b\u8df3\u8f6c\u89e6\u53d1\u5668\uff0c\u6709\u4ee5\u4e0b\u51e0\u79cd\u65b9\u6cd5\u53ef\u4f9b\u9009\u62e9\u3002<\/p>\n
                                                    routerLink\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u8a18\u8ff0\u3059\u308b<\/p>\n
                                                    Router\u306enavigate\u30e1\u30bd\u30c3\u30c9\u3092\u5b9f\u884c\u3059\u308b<\/p>\n
                                                    \u5982\u679c\u4f7f\u7528routerLink\u6307\u4ee4\uff0c\u9700\u8981\u5c06\u8be5\u6307\u4ee4\u6dfb\u52a0\u5230\u89c6\u56fe\u7684a\u6807\u7b7e\u6216button\u6807\u7b7e\u4e2d\u3002<\/p>\n
                                                    <div><\/span>\r\n  <a<\/span> routerLink=<\/span>\"hoge\"<\/span>><\/span>Go To Hoge<\/a><\/span>\r\n  <button<\/span> routerLink=<\/span>\"hoge\"<\/span>><\/span>Go To Hoge<\/button><\/span>\r\n<\/div><\/span>\r\n<div><\/span>\r\n  <a<\/span> routerLink=<\/span>\"fuga\"<\/span>><\/span>Go To Fuga<\/a><\/span>\r\n  <button<\/span> routerLink=<\/span>\"fuga\"<\/span>><\/span>Go To Fuga<\/button><\/span>\r\n<\/div><\/span>\r\n<router-outlet><\/router-outlet><\/span>\r\n<\/code><\/pre>\n
                                                    \u5728\u4e0a\u8ff0\u7684\u4f8b\u5b50\u4e2d\uff0c\u65e0\u8bba\u662f\u70b9\u51fb\u94fe\u63a5\u8fd8\u662f\u6309\u94ae\uff0c\u90fd\u4f1a\u5206\u522b\u8f6c\u5230”\/hoge”\u548c”\/fuga”\u3002\uff08”\/hoge”\u548c”\/fuga”\u7684\u5185\u5bb9\u4f1a\u663e\u793a\u5728\u4e0b\u65b9\u7684router-outlet\u4e2d\u3002\uff09<\/p>\n
                                                    \u5982\u679c\u5728\u811a\u672c\u4e2d\u5b8c\u6210\u67d0\u4e9b\u5904\u7406\u540e\u5e0c\u671b\u8fdb\u884c\u9875\u9762\u8df3\u8f6c\uff0c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u65b9\u5f0f\u8c03\u7528 navigate \u65b9\u6cd5\u3002<\/p>\n
                                                    <div><\/span>\r\n  <input<\/span> type=<\/span>\"text\"<\/span> #password<\/span> \/><\/span>\r\n  <button<\/span> (click)=<\/span>\"goNext(password.value)\"<\/span>><\/span>Go<\/button><\/span>\r\n<\/div><\/span>\r\n<router-outlet><\/router-outlet><\/span>\r\n<\/code><\/pre>\n
                                                    import<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Router<\/span> }<\/span> from<\/span> '<\/span>@angular\/router<\/span>'<\/span>;<\/span> \/\/ \u9077\u79fb\u3092\u884c\u3046\u305f\u3081\u306eRouter\u3092\u30a4\u30f3\u30dd\u30fc\u30c8<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-root<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/app.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/app.component.css<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppComponent<\/span> {<\/span>\r\n  title<\/span> =<\/span> '<\/span>ngtest<\/span>'<\/span>;<\/span>\r\n\r\n  constructor<\/span>(<\/span>private<\/span> router<\/span>:<\/span> Router<\/span>)<\/span> {}<\/span>\r\n\r\n  goNext<\/span>(<\/span>pass<\/span>:<\/span> string<\/span>):<\/span> void<\/span> {<\/span>\r\n    if<\/span> (<\/span>pass<\/span> ===<\/span> '<\/span>piyo<\/span>'<\/span>)<\/span> {<\/span>\r\n      this<\/span>.<\/span>router<\/span>.<\/span>navigate<\/span>([<\/span>'<\/span>hoge<\/span>'<\/span>]);<\/span> \/\/ \u5165\u529b\u3055\u308c\u305f\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u300cpiyo\u300d\u306a\u3089\u300c\/hoge\u300d\u306b\u9077\u79fb<\/span>\r\n    }<\/span> else<\/span> {<\/span>\r\n      console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>NG! \u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u8aa4\u3063\u3066\u3044\u307e\u3059<\/span>'<\/span>);<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                    \u4fdd\u5b89\u5458<\/h2>\n
                                                    \u901a\u8fc7\u8def\u7531\u5668\uff0c\u7528\u6237\u53ef\u4ee5\u81ea\u7531\u5207\u6362\u548c\u5f15\u7528\u5e94\u7528\u7a0b\u5e8f\u5185\u7684\u7ec4\u4ef6\u3002\u7136\u800c\uff0c\u5728\u4e00\u822c\u7684\u5e94\u7528\u7a0b\u5e8f\u4e2d\uff0c\u6709\u4e00\u4e9b\u529f\u80fd\u4ec5\u5141\u8bb8\u7279\u5b9a\u7528\u6237\u8fdb\u884c\u5f15\u7528\uff08\u4f8b\u5982\u767b\u5f55\u529f\u80fd\u5c31\u662f\u6700\u5178\u578b\u7684\u4f8b\u5b50\uff09\u3002\u4e3a\u4e86\u63a7\u5236\u9488\u5bf9\u8fd9\u79cd\u7279\u6b8a\u529f\u80fd\u7684\u8def\u7531\u65b9\u5f0f\uff0cAngular \u62e5\u6709\u4e00\u79cd\u540d\u4e3a\u201c\u5b88\u536b\u201d\u7684\u529f\u80fd\u3002\u5b88\u536b\u53ef\u4ee5\u88ab\u89c6\u4e3a\u7528\u4e8e\u5224\u65ad\u76ee\u6807\u8f6c\u6362\u662f\u5426\u53ef\u7528\u7684\u51fd\u6570\u3002\u5982\u679c\u5b88\u536b\u8fd4\u56de NG\uff0c\u5219\u8def\u7531\u5668\u4f1a\u53d6\u6d88\u8f6c\u6362\u3002<\/p>\n
                                                    ng generate guard guard\/auth\r\n<\/code><\/pre>\n
                                                    import<\/span> {<\/span> Injectable<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span>\r\n  CanActivate<\/span>,<\/span>\r\n  ActivatedRouteSnapshot<\/span>,<\/span>\r\n  RouterStateSnapshot<\/span>\r\n}<\/span> from<\/span> '<\/span>@angular\/router<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Injectable<\/span>({<\/span>\r\n  providedIn<\/span>:<\/span> '<\/span>root<\/span>'<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AuthGuard<\/span> implements<\/span> CanActivate<\/span> {<\/span>\r\n  canActivate<\/span>(<\/span>\r\n    next<\/span>:<\/span> ActivatedRouteSnapshot<\/span>,<\/span>\r\n    state<\/span>:<\/span> RouterStateSnapshot<\/span>\r\n  ):<\/span> boolean<\/span> {<\/span>\r\n    \/\/ \u3053\u3053\u306b\u4f55\u304b\u51e6\u7406\u3092\u66f8\u304f<\/span>\r\n    return<\/span> true<\/span>;<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                    \u5728\u4e0a\u8ff0\u4f8b\u5b50\u4e2d\uff0c\u8def\u7531\u5668\u901a\u8fc7\u8c03\u7528CanActivate\u63a5\u53e3\u7684canActivate\u65b9\u6cd5\u6765\u8fdb\u884c\u5224\u65ad\u3002
                                                    \n\u521b\u5efa\u7684\u4fdd\u536b\u8005\u4f1a\u5728\u8def\u7531\u5bf9\u8c61\u4e2d\u6307\u5b9a\u3002
                                                    \n\u8fd9\u6837\uff0c\u5728\u5c1d\u8bd5\u8f6c\u5230\u76f8\u5e94\u8def\u5f84\u65f6\uff0c\u5c06\u6267\u884c\u4fdd\u536b\u8005\u68c0\u67e5\u5e76\u5224\u65ad\u662f\u5426\u53ef\u4ee5\u8fdb\u884c\u8f6c\u6362\u3002<\/p>\n
                                                    const<\/span> routes<\/span>:<\/span> Routes<\/span> =<\/span> [<\/span>\r\n{<\/span> path<\/span>:<\/span> \"<\/span>hoge<\/span>\"<\/span>,<\/span> component<\/span>:<\/span> HogeComponent<\/span>,<\/span> canActivate<\/span>:<\/span> [<\/span>AuthGuard<\/span>]<\/span> },<\/span> \/\/ AuthGuard\u306e\u30c1\u30a7\u30c3\u30af\u304cOK\u306a\u3089\u53c2\u7167\u53ef\u80fd<\/span>\r\n{<\/span> path<\/span>:<\/span> \"<\/span>fuga<\/span>\"<\/span>,<\/span> component<\/span>:<\/span> FugaComponent<\/span>,<\/span> canActivate<\/span>:<\/span> [<\/span>AuthGuard<\/span>,<\/span> UserGuard<\/span>,<\/span> DateGuard<\/span>,<\/span> ....]},<\/span> \/\/ \u3059\u3079\u3066\u306e\u30ac\u30fc\u30c9\u306e\u30c1\u30a7\u30c3\u30af\u304cOK\u306a\u3089\u53c2\u7167\u53ef\u80fd<\/span>\r\n{<\/span> path<\/span>:<\/span> \"<\/span>piyo<\/span>\"<\/span>,<\/span> component<\/span>:<\/span> PiyoComponent<\/span> },<\/span> \/\/ \u30ac\u30fc\u30c9\u306e\u30c1\u30a7\u30c3\u30af\u306a\u3057\u3067\u53c2\u7167\u53ef\u80fd<\/span>\r\n{<\/span> path<\/span>:<\/span> \"<\/span>**<\/span>\"<\/span>,<\/span> redirectTo<\/span>:<\/span> \"<\/span>\/<\/span>\"<\/span> }<\/span>\r\n];<\/span>\r\n<\/code><\/pre>\n
                                                    \u8fdb\u884c\u68c0\u67e5\u7684\u5b88\u536b\u662f\u901a\u8fc7\u6570\u7ec4\u6765\u6307\u5b9a\u7684\u3002
                                                    \n\u5982\u679c\u6709\u591a\u4e2a\u5b88\u536b\u8fde\u7eed\u6392\u5217\uff0c\u53ea\u6709\u5f53\u6240\u6709\u5b88\u536b\u7684\u5224\u65ad\u90fd\u4e3aOK\u65f6\uff0c\u624d\u80fd\u88ab\u8bbf\u95ee\u3002
                                                    \n\u68c0\u67e5\u7684\u987a\u5e8f\u5c06\u6309\u7167\u6307\u5b9a\u7684\u6570\u7ec4\u987a\u5e8f\u8fdb\u884c\uff0c\u5373\u4f7f\u5728\u4e2d\u95f4\u7684\u5b88\u536b\u51fa\u73b0NG\u7684\u60c5\u51b5\uff0c\u6240\u6709\u5b88\u536b\u7684\u68c0\u67e5\u4ecd\u5c06\u88ab\u6267\u884c\u3002<\/p>\n
                                                    HTTP \u5ba2\u6237\u7aef<\/h2>\n
                                                    \u5728Angular\u4e2d\uff0c\u63d0\u4f9b\u4e86\u7528\u4e8e\u4e0e\u670d\u52a1\u5668\u8fdb\u884c\u5f02\u6b65\u901a\u4fe1\u7684HTTP\u5ba2\u6237\u7aef\u3002\u8981\u4f7f\u7528HTTP\u5ba2\u6237\u7aef\uff0c\u9700\u8981\u5bfc\u5165HttpClientModule\u3002\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u7531\u4e8eHTTP\u5ba2\u6237\u7aef\u662f\u5e94\u7528\u7a0b\u5e8f\u5168\u5c40\u6240\u9700\u7684\u529f\u80fd\uff0c\u56e0\u6b64\u5e94\u5728\u6839\u6a21\u5757\u4e2d\u8fdb\u884c\u5bfc\u5165\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> HttpClientModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/common\/http<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    BrowserModule<\/span>,<\/span>\r\n    \/\/ BrowserModule \u306e\u3042\u3068\u306b HttpClientModule \u3092\u30a4\u30f3\u30dd\u30fc\u30c8<\/span>\r\n    HttpClientModule<\/span>\r\n  ],<\/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>\r\n<\/code><\/pre>\n
                                                    \u901a\u8fc7\u5bfc\u5165`HttpClientModule`\uff0c\u53ef\u4ee5\u4f7f\u7528`HttpClient`\u7c7b\u3002
                                                    \n\u5b9e\u9645\u7684HTTP\u8bbf\u95ee\u662f\u901a\u8fc7`HttpClient`\u7c7b\u7684\u65b9\u6cd5\u6765\u5b9e\u73b0\u7684\u3002<\/p>\n
                                                    \u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528HttpClient\u662f\u4e0d\u63a8\u8350\u7684\u3002\u5982\u679c\u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528HttpClient\uff0c\u7ec4\u4ef6\u7684\u804c\u8d23\u4f1a\u53d8\u5f97\u591a\u6837\u5316\u5e76\u4e14\u96be\u4ee5\u7ba1\u7406\u3002\u4e00\u822c\u6765\u8bf4\uff0c\u5e94\u8be5\u51c6\u5907\u4e00\u4e2a\u72ec\u7acb\u7684\uff08\u5c01\u88c5\u7684\uff09\u670d\u52a1\u7c7b\u6765\u4f7f\u7528HttpClient\uff0c\u4ece\u800c\u4e0e\u7ec4\u4ef6\u5206\u79bb\u3002<\/p>\n
                                                    import<\/span> {<\/span> Injectable<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> HttpClient<\/span> }<\/span> from<\/span> '<\/span>@angular\/common\/http<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Observable<\/span> }<\/span> from<\/span> '<\/span>rxjs<\/span>'<\/span>;<\/span>\r\n\r\nconst<\/span> URL<\/span>:<\/span> string<\/span> =<\/span> '<\/span>https:\/\/hogehoge.jp\/api\/backend-fuga<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Injectable<\/span>()<\/span>\r\nexport<\/span> class<\/span> ServerAccessService<\/span> {<\/span>\r\n  constructor<\/span>(<\/span>private<\/span> http<\/span>:<\/span> HttpClient<\/span>)<\/span> {}<\/span>\r\n\r\n  getRequest<\/span>():<\/span> Observable<\/span><<\/span>string<\/span>><\/span> {<\/span>\r\n    return<\/span> this<\/span>.<\/span>http<\/span>.<\/span>get<\/span>(<\/span>URL<\/span>);<\/span>\r\n  }<\/span>\r\n\r\n  postRequest<\/span>(<\/span>param<\/span>:<\/span> string<\/span>):<\/span> Observable<\/span><<\/span>string<\/span>><\/span> {<\/span>\r\n    const<\/span> httpOptions<\/span> =<\/span> {<\/span>\r\n      '<\/span>Content-Type<\/span>'<\/span>:<\/span> '<\/span>text\/plain; charset=UTF-8<\/span>'<\/span>\r\n    };<\/span>\r\n    return<\/span> this<\/span>.<\/span>http<\/span>.<\/span>post<\/span>(<\/span>URL<\/span>,<\/span> param<\/span>,<\/span> httpOptions<\/span>);<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                    \u4e3a\u4e86\u6355\u6349\u5f02\u6b65\u901a\u4fe1\u7684\u54cd\u5e94\uff0cHttpClient \u65b9\u6cd5\u7684\u8fd4\u56de\u503c\u662f Observable \u7c7b\u578b\u7684\u503c\u3002
                                                    \n\u901a\u8fc7\u8ba2\u9605\uff08subscribe\uff09\u6b64\u503c\uff0c\u5e94\u7528\u7a0b\u5e8f\u53ef\u4ee5\u63a5\u6536\u5230\u670d\u52a1\u5668\u7684\u54cd\u5e94\u3002<\/p>\n
                                                    @<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-root<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/app.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/app.component.css<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppComponent<\/span> {<\/span>\r\n  private<\/span> data<\/span>:<\/span> string<\/span>;<\/span>\r\n\r\n  constructor<\/span>(<\/span>private<\/span> accessService<\/span>:<\/span> ServerAccessService<\/span>)<\/span> {}<\/span>\r\n\r\n  getData<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>accessService<\/span>.<\/span>get<\/span>().<\/span>subscribe<\/span>(<\/span>\r\n      (<\/span>data<\/span>:<\/span> string<\/span>)<\/span> =><\/span> (<\/span>this<\/span>.<\/span>data<\/span> =<\/span> data<\/span>),<\/span> \/\/ \u901a\u4fe1\u6210\u529f\u6642<\/span>\r\n      error<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>error!!<\/span>'<\/span>)<\/span> \/\/\u901a\u4fe1\u5931\u6557\u6642<\/span>\r\n    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                    \u9664\u4e86\u8ba2\u9605\uff08subscribe\uff09\u5916\uff0c\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528async\u7ba1\u9053\uff08View\uff09\u3002
                                                    \n\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u5f53\u63a5\u6536\u5230\u670d\u52a1\u5668\u7684\u54cd\u5e94\u65f6\uff0cAngular\u4f1a\u81ea\u52a8\u8bfb\u53d6\u6570\u636e\u5e76\u5c06\u5176\u7ed1\u5b9a\u5230\u89c6\u56fe\u4e0a\u3002
                                                    \n\u4e0e\u8ba2\u9605\u4e0d\u540c\uff0c\u4f7f\u7528async\u7ba1\u9053\u7684\u60c5\u51b5\u4e0b\uff0cAngular\u4f1a\u5728\u7ec4\u4ef6\u88ab\u9500\u6bc1\u65f6\u81ea\u52a8\u53d6\u6d88\u8ba2\u9605\u3002
                                                    \n\u7136\u800c\uff0casync\u7ba1\u9053\u4e0d\u9002\u7528\u4e8e\u5904\u7406\u5177\u6709\u590d\u6742\u6570\u636e\u7ed3\u6784\u7684\u54cd\u5e94\u3002
                                                    \n\u6b64\u5916\uff0c\u5728\u63a5\u6536\u5230\u54cd\u5e94\u4e4b\u524d\uff0c\u4f1a\u5c06\u5176\u89c6\u4e3anull\uff0c\u5e76\u4e14\u9700\u8981\u6ce8\u610f\u5728\u89c6\u56fe\u4e0a\u4e0d\u4f1a\u663e\u793a\u4efb\u4f55\u5185\u5bb9\u3002<\/p>\n
                                                    @<\/span>Component<\/span>({<\/span>\r\nselector<\/span>:<\/span> \"<\/span>app-root<\/span>\"<\/span>,<\/span>\r\ntemplateUrl<\/span>:<\/span> \"<\/span>.\/app.component.html<\/span>\"<\/span>,<\/span>\r\nstyleUrls<\/span>:<\/span> [<\/span>\"<\/span>.\/app.component.css<\/span>\"<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppComponent<\/span> {<\/span>\r\nprivate<\/span> data$<\/span>:<\/span> Observable<\/span><<\/span>string<\/span>><\/span>;<\/span> \/\/ Observable\u5909\u6570\u3067\u3042\u308b\u3053\u3068\u3092\u793a\u3059\u305f\u3081\u306b\u3001\u6163\u4f8b\u7684\u306b\u300c$\u300d\u3092\u672b\u5c3e\u306b\u4ed8\u4e0e\u3057\u307e\u3059<\/span>\r\n\r\nconstructor<\/span>(<\/span>private<\/span> accessService<\/span>:<\/span> ServerAccessService<\/span>)<\/span> {}<\/span>\r\n\r\ngetData<\/span>()<\/span> {<\/span>\r\nthis<\/span> data$<\/span> =<\/span> this<\/span>.<\/span>accessService<\/span>.<\/span>get<\/span>();<\/span>\r\n}<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                    <div><\/span>\r\n  <h1><\/span>\u30b5\u30fc\u30d0\u304b\u3089\u53d7\u4fe1\u3057\u305f\u5024<\/h1><\/span>\r\n  {{ data$ | async }}\r\n<\/div><\/span>\r\n<\/code><\/pre>\n
                                                    RxJS<\/h2>\n
                                                    RxJS \u662f\u4e00\u500b\u53ef\u4ee5\u7c21\u6f54\u5730\u63cf\u8ff0\u8655\u7406\u96a8\u6642\u9593\u8b8a\u5316\u7684\uff08\u4e0d\u77e5\u9053\u4f55\u6642\u767c\u751f\u7684\uff09\u6578\u64da\uff0c\u4f8b\u5982\u7570\u6b65\u8655\u7406\u548c\u4e8b\u4ef6\u8655\u7406\u7684\u7a0b\u5f0f\u5eab\u3002<\/p>\n
                                                    Angular \u5728\u5176\u6838\u5fc3\u529f\u80fd\u7684\u4f9d\u8cf4\u5eab\u4e2d\u4f7f\u7528 RxJS\uff0c\u56e0\u6b64\u5728 Angular \u61c9\u7528\u7a0b\u5e8f\u4e2d\u4e5f\u7121\u6cd5\u907f\u514d\u4f7f\u7528 RxJS \u7684\u601d\u7dad\u65b9\u5f0f\u3002<\/p>\n
                                                    \u5728RxJS\u4e2d\uff0c\u4ee5\u4e0b\u4e09\u4e2a\u91cd\u8981\u6982\u5ff5\u88ab\u5f15\u5165\u3002<\/p>\n
                                                    \n
                                                    \u540d\u524d\u5185\u5bb9Observable<\/code>\uff08\u89b3\u6e2c\u53ef\u80fd\u306a\u3082\u306e\uff09\u9045\u5ef6\u30d7\u30c3\u30b7\u30e5\u3055\u308c\u308b\u8907\u6570\u306e\u5024\u306e\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\u3002Observer<\/code>\uff08\u89b3\u6e2c\u8005\uff09\u30d7\u30c3\u30b7\u30e5\u3055\u308c\u305f\u5024\u306e\u51e6\u7406\u65b9\u6cd5\u3092\u5b9a\u7fa9\u3057\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3002
                                                    \n\u4ee5\u4e0b\u306e 3 \u3064\u306e\u95a2\u6570\u3092\u6301\u3064\u3002
                                                    \n\u30fbnext\uff08\u6210\u529f\u6642\u306e\u51e6\u7406\uff09
                                                    \n\u30fberror\uff08\u30a8\u30e9\u30fc\u6642\u306e\u51e6\u7406\uff09
                                                    \n\u30fbcomplete\uff08\u5b8c\u4e86\u6642\u306e\u51e6\u7406\uff09Subscribe<\/code>\uff08\u8cfc\u8aad\uff09Observable \u3068 Observer \u3092\u7d10\u3065\u3051\u3001
                                                    \nObservable \u306e\u89b3\u6e2c\u3092\u958b\u59cb\u3059\u308b\u3053\u3068\u3002<\/div>\n<\/div>\n
                                                    \u6839\u636e\u751f\u4ea7\u8005\u65ad\u7eed\u63d0\u4f9b\u7684\u6570\u636e\u4f5c\u51fa\u53cd\u5e94\uff0c\u5e76\u8fdb\u884c\u67d0\u79cd\u5904\u7406\u7684\u8bbe\u8ba1\u601d\u60f3\u79f0\u4e3a\u54cd\u5e94\u5f0f\u7f16\u7a0b\u3002\u6b63\u5982RxJS\u6240\u6307\u7684\u201cJavaScript\u7684\u54cd\u5e94\u5f0f\u6269\u5c55\u5e93\u201d\uff0c\u5b83\u7b26\u5408\u8fd9\u79cd\u54cd\u5e94\u5f0f\u7f16\u7a0b\u7684\u7406\u5ff5\u3002\u5728\u4e0a\u8ff0\u8868\u4e2d\uff0cObservable\u7684\u89d2\u8272\u76f8\u5f53\u4e8e\u751f\u4ea7\u8005\uff0cObserver\u7684\u89d2\u8272\u76f8\u5f53\u4e8e\u6d88\u8d39\u8005\u3002<\/p>\n
                                                    \u5bf9\u4e8e Observable \u7c7b\u578b\u7684\u6570\u636e\uff0c\u901a\u8fc7 subscribe \u65b9\u6cd5\u63d0\u4f9b Observer\uff0c\u5e76\u6309\u7167 Observer \u6240\u5177\u6709\u7684\u5904\u7406\u65b9\u6cd5\u6765\u5904\u7406\u63a8\u9001\u7684\u503c\u3002<\/p>\n
                                                    \u5728\u4e0b\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4e3a\u4f9d\u6b21\u63a8\u9001\u5e76\u5b8c\u6210\u7684\u5305\u542b\u503c “1”\u3001”2″\u3001”3″ \u7684 Observable \u5206\u522b\u89c2\u5bdf\u5e76\u6267\u884c\u4e0d\u540c\u7684\u5904\u7406\u64cd\u4f5c\u3002<\/p>\n
                                                    import<\/span> {<\/span> Observable<\/span> }<\/span> from<\/span> '<\/span>rxjs<\/span>'<\/span>;<\/span>\r\n\r\nconst<\/span> observable<\/span> =<\/span> new<\/span> Observable<\/span>(<\/span>observer<\/span> =><\/span> {<\/span>\r\n  observer<\/span>.<\/span>next<\/span>(<\/span>1<\/span>);<\/span>\r\n  observer<\/span>.<\/span>next<\/span>(<\/span>2<\/span>);<\/span>\r\n  observer<\/span>.<\/span>next<\/span>(<\/span>3<\/span>);<\/span>\r\n  observer<\/span>.<\/span>complete<\/span>();<\/span>\r\n});<\/span>\r\n\r\nconst<\/span> observer1<\/span> =<\/span> {<\/span>\r\n  next<\/span>(<\/span>data<\/span>)<\/span> {<\/span>\r\n    console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>subscription1 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a <\/span>'<\/span> +<\/span> data<\/span>);<\/span>\r\n  },<\/span>\r\n  error<\/span>(<\/span>err<\/span>)<\/span> {<\/span>\r\n    console<\/span>.<\/span>error<\/span>(<\/span>'<\/span>subscription1 \u3067\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\uff1a <\/span>'<\/span> +<\/span> err<\/span>);<\/span>\r\n  },<\/span>\r\n  complete<\/span>()<\/span> {<\/span>\r\n    console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>subscription1 \u306e\u8cfc\u8aad\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002<\/span>'<\/span>);<\/span>\r\n  }<\/span>\r\n};<\/span>\r\nconst<\/span> observer2<\/span> =<\/span> {<\/span>\r\n  next<\/span>(<\/span>data<\/span>)<\/span> {<\/span>\r\n    console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>subscription2 got new value\uff1a <\/span>'<\/span> +<\/span> data<\/span>);<\/span>\r\n  },<\/span>\r\n  error<\/span>(<\/span>err<\/span>)<\/span> {<\/span>\r\n    console<\/span>.<\/span>error<\/span>(<\/span>'<\/span>subscription2 got new error\uff1a <\/span>'<\/span> +<\/span> err<\/span>);<\/span>\r\n  },<\/span>\r\n  complete<\/span>()<\/span> {<\/span>\r\n    console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>subscription2 finished.<\/span>'<\/span>);<\/span>\r\n  }<\/span>\r\n};<\/span>\r\n\r\nconst<\/span> subscription1<\/span> =<\/span> observable<\/span>.<\/span>subscribe<\/span>(<\/span>observer1<\/span>);<\/span>\r\nconst<\/span> subscription2<\/span> =<\/span> observable<\/span>.<\/span>subscribe<\/span>(<\/span>observer2<\/span>);<\/span>\r\n<\/code><\/pre>\n
                                                    subscription1 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a 1main.js:591:25\r\nsubscription1 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a 2main.js:591:25\r\nsubscription1 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a 3main.js:591:25\r\nsubscription1 \u306e\u8cfc\u8aad\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002main.js:597:25\r\nsubscription2 got new value\uff1a 1 main.js:602:25\r\nsubscription2 got new value\uff1a 2 main.js:602:25\r\nsubscription2 got new value\uff1a 3 main.js:602:25\r\nsubscription2 finished. main.js:608:25\r\n<\/code><\/pre>\n
                                                    \u53ef\u4ee5\u76f4\u63a5\u5728subscribe\u65b9\u6cd5\u4e2d\u7f16\u5199Observer\u5bf9\u8c61\u3002\u9664\u4e86\u5c06Observer\u5bf9\u8c61\u4f5c\u4e3a\u53c2\u6570\u5916\uff0c\u8fd8\u53ef\u4ee5\u901a\u8fc7\u4f20\u90121\u81f33\u4e2a\u51fd\u6570\u6765\u5b9e\u73b0subscribe\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u8fd9\u4e9b\u51fd\u6570\u5c06\u4f9d\u6b21\u88ab\u89c6\u4e3anext\u3001error\u548ccomplete\u3002\u53e6\u5916\uff0c\u9664\u4e86next\u65b9\u6cd5\u5916\uff0c\u5176\u4ed6\u65b9\u6cd5\u90fd\u662f\u53ef\u9009\u7684\uff0c\u53ef\u4ee5\u4e0d\u6307\u5b9a\u800c\u4ecd\u7136\u53ef\u4ee5\u5de5\u4f5c\u3002<\/p>\n
                                                    const<\/span> subscription1<\/span> =<\/span> observable<\/span>.<\/span>subscribe<\/span>({<\/span>\r\n  next<\/span>(<\/span>data<\/span>)<\/span> {<\/span>\r\n    console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>subscription1 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a <\/span>'<\/span> +<\/span> data<\/span>);<\/span>\r\n  },<\/span>\r\n  error<\/span>(<\/span>err<\/span>)<\/span> {<\/span>\r\n    console<\/span>.<\/span>error<\/span>(<\/span>'<\/span>subscription1 \u3067\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\uff1a <\/span>'<\/span> +<\/span> err<\/span>);<\/span>\r\n  },<\/span>\r\n  complete<\/span>()<\/span> {<\/span>\r\n    console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>subscription1 \u306e\u8cfc\u8aad\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002<\/span>'<\/span>);<\/span>\r\n  }<\/span>\r\n});<\/span>\r\nconst<\/span> subscription2<\/span> =<\/span> observable<\/span>.<\/span>subscribe<\/span>(<\/span>\r\n  data<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>subscription2 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a <\/span>'<\/span> +<\/span> data<\/span>),<\/span>\r\n  err<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>subscription2 \u3067\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\uff1a <\/span>'<\/span> +<\/span> err<\/span>),<\/span>\r\n  ()<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>subscription2 \u306e\u8cfc\u8aad\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002<\/span>'<\/span>)<\/span>\r\n);<\/span>\r\nconst<\/span> subscription3<\/span> =<\/span> observable<\/span>.<\/span>subscribe<\/span>(<\/span>data<\/span> =><\/span>\r\n  console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>subscription3 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a <\/span>'<\/span> +<\/span> data<\/span>)<\/span>\r\n);<\/span>\r\n<\/code><\/pre>\n
                                                    subscription1 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a 1main.js:591:25\r\nsubscription1 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a 2main.js:591:25\r\nsubscription1 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a 3main.js:591:25\r\nsubscription1 \u306e\u8cfc\u8aad\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002main.js:597:25\r\nsubscription2 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a 1main.js:600:68\r\nsubscription2 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a 2main.js:600:68\r\nsubscription2 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a 3main.js:600:68\r\nsubscription2 \u306e\u8cfc\u8aad\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002main.js:600:182\r\nsubscription3 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a 1main.js:601:68\r\nsubscription3 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a 2main.js:601:68\r\nsubscription3 \u304c\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u307e\u3057\u305f\uff1a 3main.js:601:68\r\n<\/code><\/pre>\n
                                                    \u5f53\u8c03\u7528complete\u65b9\u6cd5\u6216Error\u65b9\u6cd5\u65f6\uff0c\u89c2\u6d4b\u5c06\u7ed3\u675f\uff0c\u4f46\u4e5f\u6709Observable\u5728\u4e0d\u8c03\u7528complete\u65b9\u6cd5\u7684\u60c5\u51b5\u4e0b\u6301\u7eed\u63d0\u4f9b\u6570\u636e\u8fdb\u884c\u89c2\u6d4b\u3002
                                                    \n\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u6570\u636e\u7684\u4f7f\u7528\u8005\u9700\u8981\u5728\u4efb\u610f\u65f6\u95f4\u7ed3\u675f\u89c2\u6d4b\u3002
                                                    \n\u8981\u7ed3\u675f\u89c2\u6d4b\uff0c\u9700\u8981\u6267\u884cSubscription\u5bf9\u8c61\u7684unsubscribe\u65b9\u6cd5\u3002
                                                    \nSubscription\u662f\u8868\u793a\u89c2\u6d4b\u884c\u4e3a\u672c\u8eab\u7684\u5bf9\u8c61\uff08\u53ef\u4ee5\u5c06\u5176\u7c7b\u6bd4\u4e3a\u8ba2\u9605\u6742\u5fd7\u7684\u5951\u7ea6\uff09\u3002
                                                    \n\u5f53\u901a\u8fc7subscribe\u65b9\u6cd5\u5f00\u59cb\u89c2\u6d4b\u65f6\uff0c\u5c06\u8fd4\u56de\u5176\u4f5c\u4e3a\u8fd4\u56de\u503c\u3002<\/p>\n
                                                    \/\/ \u89b3\u6e2c\u306e\u958b\u59cb<\/span>\r\nconst<\/span> subscription<\/span> =<\/span> observable<\/span>.<\/span>subscribe<\/span>({<\/span>\r\n  next<\/span>(<\/span>data<\/span>)<\/span> {<\/span>\r\n    \/\/ \u4f55\u304b\u306e\u51e6\u7406<\/span>\r\n  },<\/span>\r\n  error<\/span>(<\/span>err<\/span>)<\/span> {<\/span>\r\n    \/\/ \u4f55\u304b\u306e\u51e6\u7406<\/span>\r\n  },<\/span>\r\n  complete<\/span>()<\/span> {<\/span>\r\n    \/\/ \u4f55\u304b\u306e\u51e6\u7406<\/span>\r\n  }<\/span>\r\n});<\/span>\r\n\r\n\/\/ \u89b3\u6e2c\u306e\u7d42\u4e86<\/span>\r\nsubscription<\/span>.<\/span>unsubscribe<\/span>();<\/span>\r\n<\/code><\/pre>\n
                                                    \u4f5c\u4e3a RxJS \u7684\u7279\u70b9\u4e4b\u4e00\uff0c\u5b83\u53ef\u4ee5\u50cf\u5904\u7406\u6570\u7ec4\u4e00\u6837\u5904\u7406\u95f4\u65ad\u5730\u63d0\u4f9b\u7684\u6570\u636e\u3002
                                                    \n\u4f8b\u5982\uff0c\u5982\u679c\u6709\u4e00\u4e2a Observable \u6309\u987a\u5e8f\u63d0\u4f9b “1”\uff0c”2″\uff0c”3″ \uff0c\u6211\u4eec\u53ef\u4ee5\u50cf\u64cd\u4f5c\u6570\u7ec4 [1, 2, 3] \u4e00\u6837\u5bf9\u5176\u8fdb\u884c\u64cd\u4f5c\u3002
                                                    \n\u8fd9\u79cd\u6570\u636e\u64cd\u4f5c\u529f\u80fd\u79f0\u4e3a\u64cd\u4f5c\u7b26\u3002<\/p>\n
                                                    \u5728\u4e0b\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4ece Observable \u63d0\u4f9b\u7684\u6570\u636e\u4e2d\u63d0\u53d6\u51fa\u5947\u6570\uff0c\u5e76\u5c06\u5176\u4e58\u4ee5100\u3002<\/p>\n
                                                    import<\/span> {<\/span> Observable<\/span>,<\/span> pipe<\/span> }<\/span> from<\/span> '<\/span>rxjs<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> map<\/span>,<\/span> filter<\/span> }<\/span> from<\/span> '<\/span>rxjs\/operators<\/span>'<\/span>;<\/span>\r\n\r\nconst<\/span> observable<\/span> =<\/span> new<\/span> Observable<\/span><<\/span>number<\/span>><\/span>(<\/span>observer<\/span> =><\/span> {<\/span>\r\n  observer<\/span>.<\/span>next<\/span>(<\/span>1<\/span>);<\/span>\r\n  observer<\/span>.<\/span>next<\/span>(<\/span>2<\/span>);<\/span>\r\n  observer<\/span>.<\/span>next<\/span>(<\/span>3<\/span>);<\/span>\r\n  observer<\/span>.<\/span>complete<\/span>();<\/span>\r\n});<\/span>\r\n\r\nconst<\/span> sub<\/span> =<\/span> observable<\/span>\r\n  .<\/span>pipe<\/span>(<\/span>\r\n    filter<\/span>(<\/span>data<\/span> =><\/span> data<\/span> %<\/span> 2<\/span> !==<\/span> 0<\/span>),<\/span> \/\/ \u5947\u6570\u306e\u307f\u53d6\u308a\u51fa\u3059<\/span>\r\n    map<\/span>(<\/span>data<\/span> =><\/span> data<\/span> *<\/span> 100<\/span>)<\/span> \/\/ 100\u500d\u3059\u308b<\/span>\r\n  )<\/span>\r\n  .<\/span>subscribe<\/span>(<\/span>data<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>data<\/span>));<\/span>\r\n<\/code><\/pre>\n
                                                    100 main.js:591:232\r\n300 main.js:591:232\r\n<\/code><\/pre>\n
                                                    \u5728\u4e0a\u8ff0\u7684\u4f8b\u5b50\u4e2d\uff0cfilter\u548cmap\u662f\u8fd0\u7b97\u7b26\u3002
                                                    \n\u8981\u8fde\u7eed\u4f7f\u7528\u591a\u4e2a\u8fd0\u7b97\u7b26\uff0c\u53ef\u4ee5\u4f7f\u7528pipe\u65b9\u6cd5\u3002<\/p>\n
                                                    Angular\u6750\u6599<\/h2>\n
                                                    \u8fd1\u5e74\uff0cGoogle\u63d0\u5021\u7684\u8bbe\u8ba1\u65b9\u6cd5\u662f\u6750\u8d28\u8bbe\u8ba1\u3002\u8fd9\u662f\u4e00\u79cd\u901a\u8fc7\u7ed9\u7531”\u7eb8”\u548c”\u58a8\u6c34”\u7ec4\u6210\u7684\u5143\u4ef6\u6dfb\u52a0\u53cd\u5c04\u5149\u548c\u9634\u5f71\u6548\u679c\uff0c\u4ee5\u66f4\u81ea\u7136\u5730\u8868\u73b0”\u7269\u4f53\u5b58\u5728”\u7684\u8bbe\u8ba1\u65b9\u6cd5\u3002<\/p>\n
                                                    \u6839\u636e Material Design \u7684\u539f\u5219\uff0cAngular Material \u662f\u4e00\u4e2a UI \u7ec4\u4ef6\uff08\u6309\u94ae\u3001\u8868\u5355\u7b49\uff09\u5e93\u3002\u8fd9\u4e2a\u5e93\u662f\u7531 Angular \u5f00\u53d1\u56e2\u961f\u521b\u5efa\u7684\uff0c\u5c5e\u4e8e\u5b98\u65b9\u7684 Angular \u5bb6\u65cf\u3002\u56e0\u6b64\uff0c\u5b83\u80fd\u591f\u63d0\u4f9b\u4e0e Angular \u6846\u67b6\u9ad8\u5ea6\u517c\u5bb9\u3001\u4e0d\u5f71\u54cd\u5728 View\uff08.html \u6587\u4ef6\uff09\u4e2d\u7684\u5904\u7406\uff0c\u5e76\u4e14\u5177\u6709\u826f\u597d\u7684\u4e92\u64cd\u4f5c\u6027\u7684 UI \u7ec4\u4ef6\u3002<\/p>\n
                                                    Angular Material \u4ee5 npm \u5305\u7684\u5f62\u5f0f\u53d1\u5e03\u4e8e\u5916\u90e8\u3002\u53ef\u4ee5\u901a\u8fc7 npm install \u8fdb\u884c\u5b89\u88c5\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 ng add \u547d\u4ee4\u8fdb\u884c\u5b89\u88c5\u3002\u7531\u4e8e ng add \u53ef\u4ee5\u8f7b\u677e\u5b8c\u6210\u4ee5\u4e0b\u76f8\u5173\u7684\u521d\u59cb\u8bbe\u7f6e\uff0c\u56e0\u6b64\u5b98\u65b9\u63a8\u8350\u4f7f\u7528 ng add\u3002<\/p>\n
                                                      \n
                                                    • \n
                                                        \u4f9d\u5b58\u30e9\u30a4\u30d6\u30e9\u30ea\uff08Component Dev Kit\u3001Angular Animations\uff09\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/ul>\n<\/li>\n<\/ul>\n
                                                         <\/p>\n
                                                          \n
                                                        • \n
                                                            \u30ab\u30e9\u30fc\u30c6\u30fc\u30de\u306e\u8a2d\u5b9a<\/ul>\n<\/li>\n<\/ul>\n
                                                             <\/p>\n
                                                              \n
                                                            • \n
                                                                HammerJS\uff08\u30b8\u30a7\u30b9\u30c1\u30e3\u30fc\u8a8d\u8b58\u30e9\u30a4\u30d6\u30e9\u30ea\uff09\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/ul>\n<\/li>\n<\/ul>\n
                                                                 <\/p>\n
                                                                  \n
                                                                • \n
                                                                    BrowserAnimationsModule \u306e\u30a4\u30f3\u30dd\u30fc\u30c8<\/ul>\n<\/li>\n<\/ul>\n
                                                                     <\/p>\n
                                                                      \n
                                                                    • \n
                                                                        index.html \u3078\u306e Roboto \u30d5\u30a9\u30f3\u30c8\u306e\u8ffd\u52a0<\/ul>\n<\/li>\n<\/ul>\n
                                                                         <\/p>\n
                                                                          \n
                                                                        • \n
                                                                            index.html \u3078\u306e\u30de\u30c6\u30ea\u30a2\u30eb\u30c7\u30b6\u30a4\u30f3\u30a2\u30a4\u30b3\u30f3\u30d5\u30a9\u30f3\u30c8\u306e\u8ffd\u52a0<\/ul>\n<\/li>\n<\/ul>\n
                                                                             <\/p>\n
                                                                              \n
                                                                            • \n
                                                                                root CSS \u306e\u8abf\u6574<\/ul>\n<\/li>\n<\/ul>\n
                                                                                 <\/p>\n
                                                                                  \n
                                                                                • \n
                                                                                    body \u306e margin \u3092 0 \u306b<\/ul>\n<\/li>\n<\/ul>\n
                                                                                     <\/p>\n
                                                                                      \n
                                                                                    • \n
                                                                                        html \u3068 body \u306e height \u3092 100%\u306b<\/ul>\n<\/li>\n<\/ul>\n
                                                                                         <\/p>\n
                                                                                          \u30c7\u30d5\u30a9\u30eb\u30c8\u30d5\u30a9\u30f3\u30c8\u306e\u8a2d\u5b9a<\/ul>\n
                                                                                          ng add @angular\/material\r\n<\/code><\/pre>\n
                                                                                          \u5728Angular Material\u4e2d\uff0c\u6211\u4eec\u79f0\u9002\u7528\u4e8e\u5176\u7684\u914d\u8272\u65b9\u6848\u4e3a\u4e3b\u9898\u3002\u867d\u7136\u4f60\u53ef\u4ee5\u81ea\u5df1\u521b\u5efa\u4e3b\u9898\uff0c\u4f46Angular Material\u63d0\u4f9b\u4e86\u4ee5\u4e0b4\u79cd\u9884\u8bbe\u4e3b\u9898\u4f5c\u4e3a\u5185\u7f6e\u4e3b\u9898\u3002<\/p>\n
                                                                                            \n
                                                                                          • \n
                                                                                              deeppurple-amber.css<\/ul>\n<\/li>\n<\/ul>\n
                                                                                               <\/p>\n
                                                                                                \n
                                                                                              • \n
                                                                                                  indigo-pink.css<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                   <\/p>\n
                                                                                                    \n
                                                                                                  • \n
                                                                                                      pink-bluegrey.css<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                       <\/p>\n
                                                                                                        purple-green.css<\/ul>\n
                                                                                                        \u53ef\u4ee5\u901a\u8fc7\u5728\u6839CSS\u4e2d\u5f15\u5165\u6216\u5c06\u5176\u6dfb\u52a0\u5230Angular.json\u7684\u6784\u5efa\u8bbe\u7f6e\uff08\u5168\u5c40\u6837\u5f0f\uff09\u4e2d\u6765\u5e94\u7528\u5230\u5e94\u7528\u7a0b\u5e8f\u4e2d\uff0c\u8fd9\u662f\u60a8\u60f3\u8981\u4f7f\u7528\u7684\u4e3b\u9898\uff08\u5982\u679c\u60a8\u662f\u901a\u8fc7ng add\u5b89\u88c5\u7684\u8bdd\uff0c\u8bf7\u4f7f\u7528\u540e\u4e00\u79cd\u65b9\u6cd5\uff09\u3002<\/p>\n
                                                                                                        \"build\"<\/span>:<\/span> {<\/span>\r\n\uff5e<\/span> \u7701\u7565<\/span> \uff5e<\/span>\r\n\"styles\"<\/span>:<\/span> [<\/span>\r\n\".\/node_modules\/@angular\/material\/prebuilt-themes\/deeppurple-amber.css\"<\/span>,<\/span>\r\n\"src\/styles.css\"<\/span>\r\n],<\/span>\r\n\uff5e<\/span> \u7701\u7565<\/span> \uff5e<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                                                        Angular Material\u7684UI\u7ec4\u4ef6\uff08\u5982\u6309\u94ae\u548c\u590d\u9009\u6846\u7b49\uff09\u90fd\u662f\u6a21\u5757\u5316\u7684\uff0c\u56e0\u6b64\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528\u5b83\u4eec\u9700\u8981\u9996\u5148\u5bfc\u5165\u76f8\u5e94\u7684\u6a21\u5757\u3002
                                                                                                        \n\u5982\u679c\u5728\u6839\u6a21\u5757\u4e2d\u8fdb\u884c\u5bfc\u5165\uff0c\u90a3\u4e48\u5b83\u4eec\u5c31\u53ef\u4ee5\u5728\u6574\u4e2a\u5e94\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528\uff0c\u6240\u4ee5\u9664\u975e\u6709\u7279\u6b8a\u7684\u7406\u7531\uff0c\u6700\u597d\u5728\u6839\u6a21\u5757\u4e2d\u8fdb\u884c\u5bfc\u5165\u3002<\/p>\n
                                                                                                        import<\/span> {<\/span> MatButtonModule<\/span>,<\/span> MatCheckboxModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n\uff5e<\/span> \u7701\u7565<\/span> \uff5e<\/span>\r\nimports<\/span>:<\/span> [<\/span>\r\nMatButtonModule<\/span>,<\/span>\r\nMatCheckboxModule<\/span>\r\n],<\/span>\r\n\uff5e<\/span> \u7701\u7565<\/span> \uff5e<\/span>\r\n})<\/span>\r\n<\/code><\/pre>\n
                                                                                                        \u901a\u8fc7\u5c06\u5bfc\u5165\u7684 UI \u7ec4\u4ef6\u5199\u5165 View \u4e2d\uff0c\u60a8\u53ef\u4ee5\u5728\u5c4f\u5e55\u4e0a\u653e\u7f6e Angular Material \u7684 UI \u7ec4\u4ef6\u3002
                                                                                                        \n\u4ee5\u4e0b\u662f\u4e00\u4e9b\u5e38\u7528\u7ec4\u4ef6\u7684\u793a\u4f8b\u3002
                                                                                                        \n\u5f53\u7136\uff0c\u60a8\u4e5f\u53ef\u4ee5\u5bf9\u8fd9\u4e9b\u7ec4\u4ef6\u4f7f\u7528\u6307\u4ee4\u6216\u8fdb\u884c\u7ed1\u5b9a\u3002<\/p>\n
                                                                                                        <div><\/span>\r\n  <button<\/span> mat-raised-button<\/span>><\/span>Button<\/button><\/span>\r\n<\/div><\/span>\r\n\r\n<div><\/span>\r\n  <mat-form-field><\/span>\r\n    <input<\/span> matInput<\/span> type=<\/span>\"text\"<\/span> \/><\/span>\r\n  <\/mat-form-field><\/span>\r\n<\/div><\/span>\r\n\r\n<div><\/span>\r\n  <mat-checkbox><\/span>Checkbox label<\/mat-checkbox><\/span>\r\n<\/div><\/span>\r\n\r\n<div><\/span>\r\n  <mat-radio-group><\/span>\r\n    <mat-radio-button><\/span>Radio A<\/mat-radio-button><\/span>\r\n    <mat-radio-button><\/span>Radio B<\/mat-radio-button><\/span>\r\n    <mat-radio-button><\/span>Radio C<\/mat-radio-button><\/span>\r\n  <\/mat-radio-group><\/span>\r\n<\/div><\/span>\r\n\r\n<div><\/span>\r\n  <mat-icon><\/span>home<\/mat-icon><\/span>\r\n<\/div><\/span>\r\n<\/code><\/pre>\n
                                                                                                        \"angular-material.PNG\"<\/div>\n
                                                                                                        \u5982\u679c\u4f7f\u7528\u4fa7\u6ed1\u5207\u6362\u548c\u6ed1\u5757\u7b49\u652f\u6301\u624b\u52bf\u64cd\u4f5c\u7684UI\u7ec4\u4ef6\uff0c\u9700\u8981\u5bfc\u5165HammerJS\u5e93\u3002
                                                                                                        \n\u5982\u679c\u4f7f\u7528ng add\u5b89\u88c5\u4e86Angular Material\uff0c\u5219\u4f1a\u4e00\u5e76\u786e\u8ba4\u662f\u5426\u5b89\u88c5HammerJS\u3002
                                                                                                        \n\u5982\u679c\u5728ng add\u65f6\u62d2\u7edd\u4e86HammerJS\u7684\u5b89\u88c5\uff0c\u6216\u8005\u901a\u8fc7npm install\u5b89\u88c5\u4e86Angular Material\u7b49\u5176\u4ed6\u65b9\u5f0f\uff0c\u53ef\u4ee5\u901a\u8fc7\u53e6\u5916\u4ecenpm\u5b89\u88c5\u6765\u4f7f\u7528HammerJS\u3002<\/p>\n
                                                                                                        npm install --save hammerjs\r\n<\/code><\/pre>\n
                                                                                                        \u5f53\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u9700\u8981\u5728\u5e94\u7528\u7a0b\u5e8f\u7684\u5165\u53e3\u70b9\uff08main.ts\uff09\u8fdb\u884c\u5bfc\u5165\u3002
                                                                                                        \n\u8fd9\u6837\uff0c\u60a8\u5c31\u53ef\u4ee5\u4f7f\u7528\u5177\u6709\u624b\u52bf\u64cd\u4f5c\u7684 UI \u7ec4\u4ef6\u4e86\u3002<\/p>\n
                                                                                                        import<\/span> '<\/span>hammerjs<\/span>'<\/span>;<\/span>\r\n<\/code><\/pre>\n
                                                                                                        \u8003\u8bd5<\/h2>\n
                                                                                                        Angular \u652f\u6301\u4ee5\u4e0b\u81ea\u52a8\u6d4b\u8bd5\u3002<\/p>\n
                                                                                                        Jasmine\u30c6\u30b9\u30c8\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af + Karma\u30c6\u30b9\u30c8\u30e9\u30f3\u30ca\u30fc\u306b\u3088\u308b\u81ea\u52d5\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8<\/p>\n
                                                                                                        Protractor\u30c6\u30b9\u30c8\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306b\u3088\u308b\u81ea\u52d5 e2e\uff08End-to-End\uff09\u30c6\u30b9\u30c8<\/p>\n
                                                                                                        \u5355\u5143\u6d4b\u8bd5<\/h3>\n
                                                                                                        \u5355\u5143\u6d4b\u8bd5\u5728Angular\u4e2d\u7531Jasmine\u548cKarma\u6267\u884c\u3002
                                                                                                        \n\u89e3\u91ca\u548c\u6267\u884c\u6d4b\u8bd5\u4ee3\u7801\u662f\u7531Jasmine\u7684\u529f\u80fd\u5b8c\u6210\u7684\u3002
                                                                                                        \nKarma\u5229\u7528Jasmine\u7684\u529f\u80fd\u5728\u6d4f\u89c8\u5668\u4e2d\u8fdb\u884c\u6d4b\u8bd5\uff0c\u5e76\u751f\u6210\u62a5\u544a\u3002
                                                                                                        \n\u6b64\u5916\uff0cKarma\u4f1a\u5728\u6267\u884c\u8fc7\u7a0b\u4e2d\u68c0\u6d4b\u5230\u6e90\u4ee3\u7801\u7684\u66f4\u6539\u5e76\u91cd\u65b0\u6267\u884c\u6d4b\u8bd5\u3002<\/p>\n
                                                                                                        \u60a8\u53ef\u4ee5\u901a\u8fc7Angular CLI\u547d\u4ee4\u6765\u81ea\u52a8\u6267\u884c\u5355\u5143\u6d4b\u8bd5\u3002
                                                                                                        \n\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u5373\u53ef\u5f00\u59cb\u6d4b\u8bd5\uff0c\u5e76\u6267\u884c\u5728\u9879\u76ee\u4e2d\u5b9a\u4e49\u7684.spec.ts\u6587\u4ef6\u4e2d\u7684\u6d4b\u8bd5\u3002<\/p>\n
                                                                                                        ng test\r\n<\/code><\/pre>\n
                                                                                                        $ ng test\r\nBrowserslist: caniuse-lite is outdated. Please run next command `npm update`\r\n 30% building 15\/15 modules 0 active22 11 2019 15:36:30.973:WARN [karma]: No captured browser, open http:\/\/localhost:9876\/\r\n22 11 2019 15:36:31.026:INFO [karma-server]: Karma v4.1.0 server started at http:\/\/0.0.0.0:9876\/\r\n22 11 2019 15:36:31.027:INFO [launcher]: Launching browsers Chrome with concurrency unlimited\r\n 30% building 17\/17 modules 0 active22 11 2019 15:36:31.089:INFO [launcher]: Starting browser Chrome\r\n22 11 2019 15:36:35.035:WARN [karma]: No captured browser, open http:\/\/localhost:9876\/\r\n22 11 2019 15:36:35.132:INFO [Chrome 78.0.3904 (Windows 10.0.0)]: Connected on socket WxxEvvEsAy5bM4a2AAAA with id 10021485\r\nChrome 78.0.3904 (Windows 10.0.0): Executed 12 of 12 SUCCESS (2.265 secs \/ 2.225 secs)\r\nTOTAL: 12 SUCCESS\r\nTOTAL: 12 SUCCESS\r\nTOTAL: 12 SUCCESS\r\n\r\n=============================== Coverage summary ===============================\r\nStatements : 100% ( 41\/41 )\r\nBranches : 100% ( 2\/2 )\r\nFunctions: 100% ( 17\/17 )\r\nLines: 100% ( 32\/32 )\r\n================================================================================\r\n<\/code><\/pre>\n
                                                                                                        \"angular-karma.PNG\"<\/div>\n
                                                                                                        \u8981\u8f93\u51fa\u6d4b\u8bd5\u4ee3\u7801\u8986\u76d6\u7387\uff0c\u8bf7\u5728 ng test \u547d\u4ee4\u4e2d\u6dfb\u52a0 –code-coverage \u9009\u9879\uff0c\u6216\u8005\u5728 Angular.json \u6587\u4ef6\u4e2d\u8fdb\u884c\u4ee5\u4e0b\u8bbe\u7f6e\u3002<\/p>\n
                                                                                                        \"test\"<\/span>:<\/span> {<\/span>\r\n\uff5e<\/span> \u7701\u7565<\/span> \uff5e<\/span>\r\n\"codeCoverage\"<\/span>:<\/span> true<\/span>\r\n\uff5e<\/span> \u7701\u7565<\/span> \uff5e<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                                                        \u5f53\u8f93\u51fa\u4ee3\u7801\u8986\u76d6\u7387\u65f6\uff0c\u5c06\u4f1a\u5728\u9879\u76ee\u4e2d\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a coverage \u7684\u6587\u4ef6\u5939\uff0c\u5e76\u751f\u6210\u4e00\u4e2a\u4ee5 HTML \u5f62\u5f0f\u7684\u62a5\u544a\u3002
                                                                                                        \n\u540c\u65f6\uff0c\u8fd8\u4f1a\u50cf\u4e0a\u8ff0\u4f8b\u5b50\u4e00\u6837\u5728\u63a7\u5236\u53f0\u663e\u793a\u8986\u76d6\u7387\u6458\u8981\u3002<\/p>\n
                                                                                                        \"angular-karma2.PNG\"<\/div>\n
                                                                                                        \u6d4b\u8bd5\u4ee3\u7801\uff08.spec.ts\uff09\u7684\u7ed3\u6784\u5982\u4e0b\u6240\u793a\u3002<\/p>\n
                                                                                                          \n
                                                                                                        • \n
                                                                                                            import<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                             <\/p>\n
                                                                                                              \n
                                                                                                            • \n
                                                                                                                describe<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                 <\/p>\n
                                                                                                                  \n
                                                                                                                • \n
                                                                                                                    beforeEach<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                     <\/p>\n
                                                                                                                      \n
                                                                                                                    • \n
                                                                                                                        it<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                         <\/p>\n
                                                                                                                          \n
                                                                                                                        • \n
                                                                                                                            expect<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                             <\/p>\n
                                                                                                                              afterEach<\/ul>\n
                                                                                                                              \u5728import\u4e2d\uff0c\u6211\u4eec\u4f1a\u5bfc\u5165\u6240\u9700\u7684\u6a21\u5757\u548c\u8981\u6d4b\u8bd5\u7684\u7c7b\u3002
                                                                                                                              \ndescribe\u7528\u4e8e\u8868\u793a\u4e00\u4e2a\u5b8c\u6574\u7684\u6d4b\u8bd5\u573a\u666f\u3002\u6211\u4eec\u4e5f\u53ef\u4ee5\u5728describe\u4e2d\u5d4c\u5957\u53e6\u4e00\u4e2adescribe\u3002
                                                                                                                              \nbeforeEach\u3001it\u3001afterEach\u53ef\u4ee5\u5728describe\u4e2d\u4efb\u610f\u591a\u6b21\u5730\u8fdb\u884c\u8bb0\u5f55\u3002<\/p>\n
                                                                                                                              \u8868\u793a\u5b9e\u9645\u6d4b\u8bd5\u6848\u4f8b\u7684\u662f it\u3002
                                                                                                                              \n\u5728\u6bcf\u4e2a it \u524d\u540e\uff0c\u6211\u4eec\u4f1a\u8bb0\u5f55\u521d\u59cb\u5316\u548c\u7ed3\u675f\u7684\u5904\u7406\uff0c\u8fd9\u4e9b\u5904\u7406\u4f1a\u88ab beforeEach \u548c afterEach \u6267\u884c\u3002
                                                                                                                              \n\u5728 it \u4e2d\uff0c\u6211\u4eec\u5fc5\u987b\u59cb\u7ec8\u5199\u4e0b\u9884\u671f\u7ed3\u679c\u9a8c\u8bc1\u5904\u7406 expect\u3002
                                                                                                                              \n\u53ef\u4ee5\u4efb\u610f\u5199\u4e0b\u591a\u4e2a expect\uff0c\u4f46\u5982\u679c\u5176\u4e2d\u4e00\u4e2a\u5931\u8d25\uff0c\u90a3\u4e48\u8be5 it \u5c31\u4f1a\u53d8\u6210 NG\u3002<\/p>\n
                                                                                                                              import<\/span> {<\/span> TestBed<\/span>,<\/span> async<\/span> }<\/span> from<\/span> '<\/span>@angular\/core\/testing<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> RouterTestingModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/router\/testing<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> AppComponent<\/span> }<\/span> from<\/span> '<\/span>.\/app.component<\/span>'<\/span>;<\/span>\r\n\r\ndescribe<\/span>(<\/span>'<\/span>C-1: \u30eb\u30fc\u30c8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8<\/span>'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n  beforeEach<\/span>(<\/span>async<\/span>(()<\/span> =><\/span> {<\/span>\r\n    TestBed<\/span>.<\/span>configureTestingModule<\/span>({<\/span>\r\n      imports<\/span>:<\/span> [<\/span>RouterTestingModule<\/span>],<\/span>\r\n      declarations<\/span>:<\/span> [<\/span>AppComponent<\/span>]<\/span>\r\n    }).<\/span>compileComponents<\/span>();<\/span>\r\n  }));<\/span>\r\n\r\n  it<\/span>(<\/span>'<\/span>C-1-1: \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u751f\u6210\u3067\u304d\u308b\u3053\u3068<\/span>'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n    const<\/span> fixture<\/span> =<\/span> TestBed<\/span>.<\/span>createComponent<\/span>(<\/span>AppComponent<\/span>);<\/span>\r\n    const<\/span> app<\/span> =<\/span> fixture<\/span>.<\/span>debugElement<\/span>.<\/span>componentInstance<\/span>;<\/span>\r\n    expect<\/span>(<\/span>app<\/span>).<\/span>toBeTruthy<\/span>();<\/span>\r\n  });<\/span>\r\n\r\n  it<\/span>(<\/span>`C-1-2: \u30bf\u30a4\u30c8\u30eb\u304c\u300ctest-sample\u300d\u3067\u3042\u308b\u3053\u3068`<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n    const<\/span> fixture<\/span> =<\/span> TestBed<\/span>.<\/span>createComponent<\/span>(<\/span>AppComponent<\/span>);<\/span>\r\n    const<\/span> app<\/span> =<\/span> fixture<\/span>.<\/span>debugElement<\/span>.<\/span>componentInstance<\/span>;<\/span>\r\n    expect<\/span>(<\/span>app<\/span>.<\/span>title<\/span>).<\/span>toEqual<\/span>(<\/span>'<\/span>test-sample<\/span>'<\/span>);<\/span>\r\n  });<\/span>\r\n\r\n  it<\/span>(<\/span>'<\/span>C-1-3: H1\u898b\u51fa\u3057\u306e\u30c6\u30ad\u30b9\u30c8\u304c\u300cWelcome to test-sample!\u300d\u3067\u3042\u308b\u3053\u3068<\/span>'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n    const<\/span> fixture<\/span> =<\/span> TestBed<\/span>.<\/span>createComponent<\/span>(<\/span>AppComponent<\/span>);<\/span>\r\n    fixture<\/span>.<\/span>detectChanges<\/span>();<\/span>\r\n    const<\/span> compiled<\/span> =<\/span> fixture<\/span>.<\/span>debugElement<\/span>.<\/span>nativeElement<\/span>;<\/span>\r\n    expect<\/span>(<\/span>compiled<\/span>.<\/span>querySelector<\/span>(<\/span>'<\/span>h1<\/span>'<\/span>).<\/span>textContent<\/span>).<\/span>toContain<\/span>(<\/span>\r\n      '<\/span>Welcome to test-sample!<\/span>'<\/span>\r\n    );<\/span>\r\n  });<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                              expect \u540e\u9762\u8ddf\u7740 toBeTruthy\u3001toEqual\u3001toContain \u7b49\u51fd\u6570\u88ab\u79f0\u4e3aMatcher\u3002<\/p>\n
                                                                                                                              \u901a\u8fc7\u5c06 expect \u7684\u53c2\u6570\uff08\u88ab\u9a8c\u8bc1\u7684\u5bf9\u8c61\uff09\u548c Matcher \u7684\u53c2\u6570\uff08\u6bd4\u8f83\u7684\u5bf9\u8c61\uff09\u8fdb\u884c\u5bf9\u6bd4\uff0c\u5982\u679c\u6ee1\u8db3\u6761\u4ef6\uff0cexpect \u5c31\u4f1a\u6210\u529f\u3002<\/p>\n
                                                                                                                              \u5728Angular\u7684\u5355\u5143\u6d4b\u8bd5\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u540d\u4e3aTestBed\u7684\u6d4b\u8bd5\u865a\u62dfNgModule\u3002TestBed\u53ef\u4ee5\u50cf\u666e\u901a\u7684NgModule\u4e00\u6837\u8bbe\u7f6edeclarations\uff0cimports\uff0cproviders\u7b49\uff0c\u5e76\u4e14\u5982\u679c\u9700\u8981\u4f7f\u7528\u6a21\u62df\u670d\u52a1\u6216\u6a21\u62df\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u5c06\u5b83\u4eec\u52a0\u8f7d\u5230TestBed\u4e2d\u3002<\/p>\n
                                                                                                                              import<\/span> {<\/span> async<\/span>,<\/span> ComponentFixture<\/span>,<\/span> TestBed<\/span> }<\/span> from<\/span> '<\/span>@angular\/core\/testing<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> TweetListComponent<\/span> }<\/span> from<\/span> '<\/span>.\/tweet-list.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Component<\/span>,<\/span> Input<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> By<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-tweet<\/span>'<\/span>,<\/span>\r\n  template<\/span>:<\/span> '<\/span><div>Stub Component<\/div><\/span>'<\/span>\r\n})<\/span>\r\nclass<\/span> StubTweetComponent<\/span> {<\/span>\r\n  @<\/span>Input<\/span>()<\/span> tweet<\/span>:<\/span> any<\/span>;<\/span>\r\n}<\/span>\r\n\r\ndescribe<\/span>(<\/span>'<\/span>C-3: \u30c4\u30a4\u30fc\u30c8\u30ea\u30b9\u30c8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8<\/span>'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n  let<\/span> component<\/span>:<\/span> TweetListComponent<\/span>;<\/span>\r\n  let<\/span> fixture<\/span>:<\/span> ComponentFixture<\/span><<\/span>TweetListComponent<\/span>><\/span>;<\/span>\r\n\r\n  beforeEach<\/span>(<\/span>async<\/span>(()<\/span> =><\/span> {<\/span>\r\n    TestBed<\/span>.<\/span>configureTestingModule<\/span>({<\/span>\r\n      declarations<\/span>:<\/span> [<\/span>TweetListComponent<\/span>,<\/span> StubTweetComponent<\/span>]<\/span>\r\n    }).<\/span>compileComponents<\/span>();<\/span>\r\n  }));<\/span>\r\n\r\n  beforeEach<\/span>(()<\/span> =><\/span> {<\/span>\r\n    fixture<\/span> =<\/span> TestBed<\/span>.<\/span>createComponent<\/span>(<\/span>TweetListComponent<\/span>);<\/span>\r\n    component<\/span> =<\/span> fixture<\/span>.<\/span>componentInstance<\/span>;<\/span>\r\n    const<\/span> stubValue<\/span> =<\/span> [<\/span>\r\n      {<\/span>\r\n        user<\/span>:<\/span> '<\/span>test 1<\/span>'<\/span>,<\/span>\r\n        content<\/span>:<\/span> `xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`<\/span>,<\/span>\r\n        retweet<\/span>:<\/span> 12345<\/span>,<\/span>\r\n        like<\/span>:<\/span> 67890<\/span>\r\n      }<\/span>\r\n    ];<\/span>\r\n    component<\/span>.<\/span>tweetList<\/span> =<\/span> stubValue<\/span>;<\/span>\r\n    fixture<\/span>.<\/span>detectChanges<\/span>();<\/span>\r\n  });<\/span>\r\n\r\n  it<\/span>(<\/span>'<\/span>C-3-1: \u30c4\u30a4\u30fc\u30c8\u30ea\u30b9\u30c8\u304c\u3059\u3079\u3066\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u3053\u3068<\/span>'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n    const<\/span> element<\/span>:<\/span> HTMLElement<\/span> =<\/span> fixture<\/span>.<\/span>debugElement<\/span>.<\/span>nativeElement<\/span>;<\/span>\r\n    const<\/span> tweetComponents<\/span> =<\/span> element<\/span>.<\/span>querySelectorAll<\/span>(<\/span>'<\/span>app-tweet<\/span>'<\/span>);<\/span>\r\n    expect<\/span>(<\/span>tweetComponents<\/span>.<\/span>length<\/span>).<\/span>toBe<\/span>(<\/span>3<\/span>);<\/span>\r\n  });<\/span>\r\n\r\n  it<\/span>(<\/span>'<\/span>C-3-2: \u30ea\u30c4\u30a4\u30fc\u30c8\u30a4\u30d9\u30f3\u30c8\u306b\u5fdc\u3058\u3066RT\u6570\u304c\u5897\u52a0\u3059\u308b\u3053\u3068<\/span>'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n    let<\/span> beforeCount<\/span>:<\/span> number<\/span>;<\/span>\r\n    const<\/span> spy<\/span> =<\/span> spyOn<\/span>(<\/span>component<\/span>,<\/span> '<\/span>retweet<\/span>'<\/span>).<\/span>and<\/span>.<\/span>callThrough<\/span>();<\/span>\r\n    component<\/span>.<\/span>tweetList<\/span>.<\/span>forEach<\/span>(<\/span>tweet<\/span> =><\/span> {<\/span>\r\n      beforeCount<\/span> =<\/span> tweet<\/span>.<\/span>retweet<\/span>;<\/span>\r\n      fixture<\/span>.<\/span>debugElement<\/span>\r\n        .<\/span>query<\/span>(<\/span>By<\/span>.<\/span>css<\/span>(<\/span>'<\/span>.tweet<\/span>'<\/span>))<\/span>\r\n        .<\/span>triggerEventHandler<\/span>(<\/span>'<\/span>retweet<\/span>'<\/span>,<\/span> tweet<\/span>);<\/span>\r\n      expect<\/span>(<\/span>spy<\/span>).<\/span>toHaveBeenCalled<\/span>();<\/span>\r\n      expect<\/span>(<\/span>tweet<\/span>.<\/span>retweet<\/span>).<\/span>toBe<\/span>(<\/span>beforeCount<\/span> +<\/span> 1<\/span>);<\/span>\r\n    });<\/span>\r\n  });<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                              Jasmine\u63d0\u4f9b\u4e86\u4e00\u4e2a\u529f\u80fd\uff0c\u53ef\u4ee5\u68c0\u6d4b\u7279\u5b9a\u7684\u5bf9\u8c61\u65b9\u6cd5\u6216\u51fd\u6570\u7684\u6267\u884c\uff0c\u5e76\u5c06\u5176\u66ff\u6362\u4e3a\u4efb\u610f\u7684\u64cd\u4f5c\u3002
                                                                                                                              \n\u5728\u4e0a\u8ff0\u4f8b\u5b50\uff08\u6d4b\u8bd5\u7528\u4f8bC-3-2\uff09\u4e2d\uff0c\u6211\u4eec\u5bf9TweetListComponent\u5b9e\u4f8b\u7684retweet\u65b9\u6cd5\u8fdb\u884c\u4e86\u62e6\u622a\uff0c\u5e76\u4f7f\u7528callThrough\u65b9\u6cd5\uff08\u8c03\u7528\u539f\u59cb\u65b9\u6cd5\uff09\u3002
                                                                                                                              \n\u901a\u8fc7\u5728expect\u4e2d\u68c0\u67e5spy\u5bf9\u8c61\u7684toHaveBeenCalled\u65b9\u6cd5\uff0c\u6211\u4eec\u53ef\u4ee5\u68c0\u67e5\u8be5\u65b9\u6cd5\u662f\u5426\u88ab\u8c03\u7528\u3002
                                                                                                                              \n\u4e0a\u8ff0\u4f8b\u5b50\u53ea\u662f\u901a\u8fc7spy\u8f6c\u53d1\uff0c\u4f46\u662f\u901a\u8fc7\u8ba9spy\u8fd4\u56de\u9884\u5148\u786e\u5b9a\u7684\u8fd4\u56de\u503c\uff0c\u53ef\u4ee5\u5b9e\u73b0\u6a21\u62df\u548c\u5b58\u6839\u3002<\/p>\n
                                                                                                                              \u7aef\u5230\u7aef\u6d4b\u8bd5<\/h3>\n
                                                                                                                              \u5728\u6d4f\u89c8\u5668\u4e0a\u8fdb\u884c\u7684\u6d4b\u8bd5\u5e94\u7528\u7a0b\u5e8f\u7684\u6784\u5efa\u6d4b\u8bd5\u88ab\u79f0\u4e3ae2e\uff08End-to-End\uff09\u6d4b\u8bd5\u3002
                                                                                                                              \n\u5728\u5355\u5143\u6d4b\u8bd5\u4e2d\uff0c\u6211\u4eec\u5c06\u51c6\u5907\u6a21\u62df\u548c\u5b58\u6839\uff0c\u5e76\u8fdb\u884c\u4ec5\u5173\u6ce8\u6d4b\u8bd5\u5bf9\u8c61\u884c\u4e3a\u7684\u6d4b\u8bd5\uff0c\u800ce2e\u6d4b\u8bd5\u65e8\u5728\u68c0\u67e5\u6574\u4f53\u7684\u8fd0\u884c\u60c5\u51b5\uff0c\u5305\u62ec\u670d\u52a1\u5668\u7aef\u3002\uff08\u76f8\u5f53\u4e8e\u7efc\u5408\u6d4b\u8bd5\u9636\u6bb5\uff09
                                                                                                                              \n\u5728e2e\u6d4b\u8bd5\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528Protractor\u6846\u67b6\uff0c\u800cProtractor\u5728\u5185\u90e8\u4f7f\u7528Jasmine\u7684\u6d4b\u8bd5\u529f\u80fd\u3002
                                                                                                                              \n\u56e0\u6b64\uff0c\u6d4b\u8bd5\u4ee3\u7801\u7684\u8bed\u6cd5\u7b49\u53ef\u4ee5\u50cf\u5355\u5143\u6d4b\u8bd5\u4e00\u6837\u7f16\u5199\u3002<\/p>\n
                                                                                                                              \u60a8\u53ef\u4ee5\u4f7f\u7528Angular CLI\u7684\u547d\u4ee4\u6765\u6267\u884c\u81ea\u52a8\u7684\u7aef\u5230\u7aef\u6d4b\u8bd5\u3002
                                                                                                                              \n\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u65f6\uff0c\u4f1a\u8fd0\u884capp.e2e-spec.ts\u6587\u4ef6\uff08\u6587\u4ef6\u540d\u53ef\u66f4\u6539\uff09\u4e2d\u5b9a\u4e49\u7684\u6d4b\u8bd5\u4ee3\u7801\uff0c\u5e76\u751f\u6210\u6d4b\u8bd5\u62a5\u544a\u3002<\/p>\n
                                                                                                                              ng e2e\r\n<\/code><\/pre>\n
                                                                                                                              $ ng e2e\r\n[15:09:32] I\/config_source - curl -oC:\\Users\\user\\Desktop\\DEV\\test-sample\\node_modules\\protractor\\node_modules\\webdriver-manager\\selenium\\chrome-response.xml https:\/\/chromedriver.storage.googleapis.com\/\r\n[15:09:33] I\/update - chromedriver: file exists C:\\Users\\user\\Desktop\\DEV\\test-sample\\node_modules\\protractor\\node_modules\\webdriver-manager\\selenium\\chromedriver_78.0.3904.105.zip\r\n[15:09:33] I\/update - chromedriver: unzipping chromedriver_78.0.3904.105.zip\r\n[15:09:34] I\/update - chromedriver: chromedriver_78.0.3904.105.exe up to date\r\nBrowserslist: caniuse-lite is outdated. Please run next command `npm update`\r\n\r\nDate: 2019-11-22T06:09:51.188Z\r\nHash: 13114b74aad04ac5cd11\r\nTime: 8615ms\r\nchunk {main} main.js, main.js.map (main) 28 kB [initial] [rendered]\r\nchunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 248 kB [initial] [rendered]\r\nchunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]\r\nchunk {styles} styles.js, styles.js.map (styles) 16.7 kB [initial] [rendered]\r\nchunk {vendor} vendor.js, vendor.js.map (vendor) 3.94 MB [initial] [rendered]\r\n** Angular Live Development Server is listening on localhost:4200, open your browser on http:\/\/localhost:4200\/ **\r\ni \uff62wdm\uff63: Compiled successfully.\r\n[15:09:53] I\/launcher - Running 1 instances of WebDriver\r\n[15:09:53] I\/direct - Using ChromeDriver directly...\r\n\r\nDevTools listening on ws:\/\/127.0.0.1:55696\/devtools\/browser\/05988235-51e7-497a-920a-346cd5940efc\r\nJasmine started\r\n\r\nworkspace-project App\r\n\u221a should display welcome message\r\n\r\nExecuted 1 of 1 spec SUCCESS in 1 sec.\r\n[15:10:00] I\/launcher - 0 instance(s) of WebDriver still running\r\n[15:10:00] I\/launcher - chrome #01 passed\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
                                                                                                                              \u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u5c06\u89e3\u91ca\u7528\u4e8eWeb\u5e94\u7528\u5f00\u53d1\u7684JavaScript\u6846\u67b6Angular\u3002 Angular\u662f\u4ec0\u4e48 Ang […]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39552","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60Angular - 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\/\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60angular\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60Angular\" \/>\n<meta property=\"og:description\" content=\"\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u5c06\u89e3\u91ca\u7528\u4e8eWeb\u5e94\u7528\u5f00\u53d1\u7684JavaScript\u6846\u67b6Angular\u3002 Angular\u662f\u4ec0\u4e48 Ang […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-16T08:12:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T03:38:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b0137434c4406c7fef4\/12-0.png\" \/>\n<meta name=\"author\" content=\"\u79d1, \u9896\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u79d1, \u9896\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 \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\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/\",\"name\":\"\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60Angular - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-04-16T08:12:36+00:00\",\"dateModified\":\"2024-04-30T03:38:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60Angular\"}]},{\"@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\/8ca01ba7f7362ad4edb7da206a12f29e\",\"name\":\"\u79d1, \u9896\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g\",\"caption\":\"\u79d1, \u9896\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keying\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60Angular - 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\/\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60angular\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60Angular","og_description":"\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u5c06\u89e3\u91ca\u7528\u4e8eWeb\u5e94\u7528\u5f00\u53d1\u7684JavaScript\u6846\u67b6Angular\u3002 Angular\u662f\u4ec0\u4e48 Ang […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60angular\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-04-16T08:12:36+00:00","article_modified_time":"2024-04-30T03:38:05+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b0137434c4406c7fef4\/12-0.png"}],"author":"\u79d1, \u9896","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u79d1, \u9896","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"14 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/","name":"\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60Angular - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-04-16T08:12:36+00:00","dateModified":"2024-04-30T03:38:05+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60Angular"}]},{"@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\/8ca01ba7f7362ad4edb7da206a12f29e","name":"\u79d1, \u9896","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g","caption":"\u79d1, \u9896"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keying\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e4%bb%8a%e5%a4%a9%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0angular\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39552","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\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=39552"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39552\/revisions"}],"predecessor-version":[{"id":91681,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39552\/revisions\/91681"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=39552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=39552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=39552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}