{ "version": "https://jsonfeed.org/version/1", "title": "Angular", "description": "Superheroic Javascript MVW Framework", "home_page_url": "go/angular", "feed_url": "feed/angular.json", "icon": "https://cdn.v2ex.com/navatar/96b9/bff0/814_large.png?m=1579006072", "favicon": "https://cdn.v2ex.com/navatar/96b9/bff0/814_normal.png?m=1579006072", "items": [ { "author": { "url": "member/insanny", "name": "insanny", "avatar": "https://cdn.v2ex.com/avatar/0b96/f319/629218_large.png?m=1684473226" }, "url": "t/1145133", "title": "\u5173\u4e8e\u5916\u90e8 js \u4fee\u6539 dx-select-box \u7684\u503c\u7684\u53ef\u884c\u6027", "id": "t/1145133", "date_published": "2025-07-14T10:53:57+00:00", "content_html": "\u8bf7\u95ee\u5bf9\u4e8e devExtreme \u4e2d\u7684 dx-select-box \uff0c\u6709\u6ca1\u6709\u65b9\u6cd5\u901a\u8fc7\u5916\u90e8 js \uff08\u5982\u6d4f\u89c8\u5668\u7684\u63a7\u5236\u53f0\u3001\u6d4f\u89c8\u5668\u63d2\u4ef6\u7b49\uff09\u76f4\u63a5\u4fee\u6539\u5b83\u7684 value \uff1f\u76ee\u524d\u4e86\u89e3\u5230\u7684\u65b9\u6848\u90fd\u662f
const selectBoxElement = document.querySelector('.dx-selectbox');
const dxSelectBoxInstance = $(selectBoxElement).data('dxSelectBox');
dxSelectBoxInstance.option('value', 'YourDesiredValue');
\u7136\u800c\u6211\u5728\u76ee\u6807\u7f51\u7ad9\u4e0a dxSelectBoxInstance \u8fd4\u56de\u7684\u662f Null
\u5e76\u4e14 ng.getComponent \u4e5f\u7528\u4e0d\u4e86\uff0cprobe \u8fd4\u56de\u7684\u4e5f\u662f\u7a7a\uff0c\u9875\u9762\u4e0a\u7684 html \u5143\u7d20\u76f4\u63a5\u663e\u793a\u7684\u5c31\u662f<dx-select-box>\uff0c\u5e76\u4e0d\u662f<div class='dx-selectbox'>" }, { "author": { "url": "member/drymonfidelia", "name": "drymonfidelia", "avatar": "https://cdn.v2ex.com/gravatar/017bcef6e642dbf067e17838a9cd447a?s=73&d=retro" }, "url": "t/1144132", "title": "2025 \u5e74 Angular SSR \u8fbe\u5230 Next.js \u7684\u6c34\u5e73\u4e86\u5417\uff1f\u8bb0\u5f97\u4e24\u4e09\u5e74\u524d\uff0c Angular \u81ea\u5df1\u7684\u5b98\u65b9\u6587\u6863 Google \u90fd\u53ea\u7d22\u5f15\u4e2a\u9996\u9875\uff0c\u73b0\u5728\u597d\u50cf\u6b63\u5e38\u6536\u5f55\u4e86", "id": "t/1144132", "date_published": "2025-07-09T19:55:43+00:00", "content_html": "" }, { "author": { "url": "member/wusheng0", "name": "wusheng0", "avatar": "https://cdn.v2ex.com/avatar/2c75/30bb/314309_large.png?m=1552810458" }, "url": "t/1044816", "title": "Angular \u8fd9\u4e48\u6ca1\u843d\u4e86\u5417", "id": "t/1044816", "date_published": "2024-05-28T11:12:22+00:00", "content_html": "

18 \u53d1\u5e03\u4e86\uff0c\u597d\u50cf\u4e5f\u6ca1\u6709\u8ba8\u8bba\u7684\u3002

\n

Angular.dev\n\u65b0\u6587\u6863\u7ad9\uff0c\u770b\u7740\u4e0d\u9519\u3002

\n

signals \u611f\u89c9\u4e0d\u5982 vue \u90a3\u79cd\u65b9\u4fbf\uff0c\u793a\u4f8b\u597d\u50cf\u4e5f\u6ca1\u63d0\u5230\u5305\u88f9\u5bf9\u8c61\u7684\u5b9e\u8df5\u3002

\n" }, { "author": { "url": "member/nzbin", "name": "nzbin", "avatar": "https://cdn.v2ex.com/avatar/293a/868b/277218_large.png?m=1719151770" }, "url": "t/1035762", "title": "ng-dnd 3.0 \u53d1\u5e03\u4e86\uff01\ud83c\udf89", "id": "t/1035762", "date_published": "2024-04-25T16:00:52+00:00", "content_html": "

https://github.com/ng-dnd/ng-dnd/releases/tag/v3.0.0

\u4f7f\u7528 computed \u83b7\u53d6\u6570\u7ec4\u957f\u5ea6\uff0c\u4f46\u662f\u89c6\u56fe\u4e0d\u4f1a\u66f4\u65b0

 addrLength = computed(() => {\n const user = this.dataService.user();\n\n return user.addresses.length;\n });\n

\u4f7f\u7528 computed \u91cd\u65b0\u6784\u5efa\u65b0\u7684\u6570\u7ec4\uff0c\u89c6\u56fe\u4e5f\u4e0d\u4f1a\u66f4\u65b0

 addresses = computed(() => {\n const user = this.dataService.user();\n // transform data \u540e\u9875\u9762\u4e0d\u4f1a\u66f4\u65b0\n // return user.addresses.map(addr => ({ address: addr, title: `Address-${addr.title}` }));\n\n // \u76f4\u63a5\u8fd4\u56de user.addresses \uff0c\u9875\u9762\u4f1a\u66f4\u65b0\n return user.addresses;\n });\n

\u8fd9\u91cc\u662f\u5728\u7ebf demo

\u7a7a\u95f2\u65f6\u95f4\u4f7f\u7528 Angular \u590d\u523b\u4e86\u4e00\u4e0b uvcanvas \uff0c\u4eca\u5929\u53d1\u5e03\u4e86\u6700\u521d\u7684\u7248\u672c\uff5e\u3000(\u4e5f\u662f\u7b2c\u4e00\u6b21\u53d1\u5e03\u4e3b\u9898\u5e16\ud83d\ude33)

\n
• \u76ee\u524d \u53ea\u6284\u4e86 6 \u4e2a\u7ec4\u4ef6 \ud83d\ude05\uff08\u5f97\u5230\u4e86\u4f5c\u8005\u8bb8\u53ef\u4e86\uff09
\n
• \u6b22\u8fce \u8bd5\u7528/star/pr \ud83d\ude06
\n
• \u671f\u5f85 \u6dfb\u52a0\u66f4\u591a\u7684\u52a8\u6001\u80cc\u666f \ud83e\udd29
\n

\u9879\u76ee\uff1a https://github.com/teddingdev/ngx-uvcanvas
\n\u6587\u6863\uff1a https://ngx-uvcanvas.ife.app/

\u6709\u4e00\u4e2a\u5c0f\u7f51\u7ad9\u9700\u8981 SEO \uff0c\u4f46\u662f\u53d1\u73b0 17 \u7684 SSR \uff0c\u6ca1\u6709\u4efb\u4f55\u90e8\u7f72\u7684\u6587\u6863\u3002\u770b\u5230 Angular \u90a3\u5e2e\u5b50\u4eba\u5929\u5929\u5728\u7f51\u4e0a\u6b4c\u821e\u5347\u5e73\u5c31\u6765\u6c14\u3002

\n
1. \u901a\u8fc7 serverless \u90e8\u7f72\n\u641c\u4e86\u6700\u591a\u7684\u662f\u8fd9\u4e2a\uff0c\u4e5f\u662f\u4e2a\u7b2c\u4e09\u65b9\u516c\u53f8\u7684\u5e93\uff0c\u88c5\u5230 aws \u4e0a\uff0c\u7136\u540e\u627e\u5230\u7684\u6587\u6863\u90fd\u662f\u4ee5\u524d 16 \u7248\u7684\uff0c\u6ca1\u53d1\u7528\u3002
\n
2. \u901a\u8fc7 sst \u90e8\u7f72\n\u6709\u4e00\u4e2a\u7b2c\u4e09\u65b9\u7684\uff0c\u8fd9\u4e9b\u90fd\u5fcd\u4e86\u3002\u5e76\u4e14\u8fd9\u73a9\u610f\u672c\u8eab\u5c31\u4e0d\u652f\u6301 Angular \uff0c\u8dcc\u8dcc\u649e\u649e\u5f04\u597d\u4e86\uff0c\u7f51\u7ad9\u4e5f\u4e0a\u7ebf\u4e86\u3002\u4e5f\u53ef\u4ee5\u91cd\u590d\u90e8\u7f72\uff0c\u4f46\u662f\u8fc7\u4e86\u4e00\u6bb5\u65f6\u95f4\uff0c\u6628\u5929\u4fee\u6539\u4e00\u4e0b\uff0c\u518d\u90e8\u7f72\u5c31\u5931\u8d25\u4e86\uff0c\u771f\u662f\u65e0\u8bed\u3002\u4eca\u5929\u5f04\u4e86\u4e00\u5929\uff0c\u4e5f\u4e0d\u77e5\u9053\u662f\u7f51\u7edc\u95ee\u9898\u8fd8\u662f\u522b\u7684\u4ec0\u4e48\uff08\u6211\u7f51\u7edc\u6ca1\u95ee\u9898\uff09
\n

\u4e0a\u9762\u8fd9\u4e24\u4e2a\u90fd\u662f lambda \uff0c\u7136\u540e\u53c8\u5c1d\u8bd5\u4e86 ECS \u5bb9\u5668\uff0c\u4e5f\u53ef\u803b\u7684\u5931\u8d25\u9e1f\u3002\u6700\u4e3b\u8981\u7684\u662f angular \u6ca1\u6709\u63d0\u4f9b\u4efb\u4f55\u4e00\u4e01\u70b9\u7684\u90e8\u7f72\u6587\u6863\uff0c\u54ea\u4e9b\u88ab\u90e8\u7f72\u7684\u5730\u65b9\uff0c\u4e5f\u6ca1\u6709\u4efb\u4f55\u9884\u5236\u7684\u6a21\u677f\u3002

\u63a5\u624b\u4e86\u4e00\u4e2a\u7f8e\u56fd\u540c\u4e8b\u5199\u7684\u8001\u5c4e\u5c71\uff0c\u9879\u76ee\u7ed3\u6784\u975e\u5e38\u590d\u6742\uff0c\u5230\u5904\u90fd\u662f {{accessdata|filterby:window['cache']['accessdata']}}\u8fd9\u79cd\u79bb\u8c31\u4ee3\u7801\uff0c\u542f\u7528 strictTemplates \u540e build \u76f4\u63a5\u62a5\u4e86 999+ \u4e2a\u9519\u8bef\u3002WebStorm \u5373\u4f7f\u4e0d\u5f00 strictTemplates \u4e5f\u80fd\u7528 Ctrl+B \u8df3\u8f6c\u5c5e\u6027\u5b9a\u4e49\u4f4d\u7f6e\uff0cVS Code \u7684 F12 \u53ea\u6709\u5728\u5f00\u542f strictTemplates \u624d\u80fd\u627e\u5230\u5b9a\u4e49\u3002\u6211\u719f\u6089\u7684\u5f88\u591a\u524d\u7aef\u6269\u5c55\u90fd\u5728 VS Code \u4e0a\uff0cv \u53cb\u6709\u529e\u6cd5\u89e3\u51b3\u5417\uff1f

\u8fd9\u662f\u4e00\u4e2a\u5927\u5347\u7ea7\uff0c\u4f46\u662f\u5bf9\u539f\u6765\u7684 16 \u7684\u9879\u76ee\u975e\u5e38\u4e0d\u53cb\u597d\uff0c\u6211\u5c1d\u8bd5 ng update \uff0c\u9047\u5230\u4e86\u5f88\u591a\u5947\u8469\u7684\u9519\u8bef\uff0c\u540e\u6765\u5e72\u8106\u91cd\u65b0 ng new app \uff0c\u5728\u91cd\u65b0\u590d\u5236\u4ee3\u7801\u3002\u7136\u540e\u53d1\u73b0\u4e86\u5f88\u591a\u53d8\u5316\uff1a

\n
1. \n

   \u6211 NAS \u4e0a\u6620\u5c04\u7684\u9a71\u52a8\u5668\uff0c\u65e0\u6cd5\u4f7f\u7528\u4e86\u3002\u6bd4\u5982\u628a NAS \u7684\u8def\u5f84\u6620\u5c04\u4e3a W:\\\uff0c\u7136\u540e\u5728 W:\\\u4e0b\u521b\u5efa app \uff0c\u73b0\u5728\u521b\u5efa\u540e\u65e0\u6cd5\u6267\u884c\uff0c\u62a5\u9519\uff0c\u8fd9\u5bfc\u81f4\u65e0\u6cd5\u591a\u673a\u5f00\u53d1\u3002

   \n
\n
2. \n

   \u7ec4\u4ef6\u591a\u4e86\u4e00\u4e2a standalone: true \u7684\u6982\u5ff5\uff0c\u8fd9\u6837\u4ee5\u524d\u53ef\u4ee5\u76f4\u63a5\u7528\u7684\u7ec4\u4ef6\uff0c\u90fd\u9700\u8981\u6309\u9700 import \u4e00\u4e0b\uff0c\u5176\u5b9e\u8fd9\u6837\u633a\u597d\u7684\uff0c\u9632\u6b62\u4e0d\u5fc5\u8981\u7684\u52a0\u8f7d\uff0c\u4f46\u4ee3\u7801\u6539\u8d77\u6765\u7d2f\u6b7b\u4e86\uff0c\u5c24\u5176\u662f material.angular \u3002\u3002\u3002

   \n
\n
3. \n

   \u4ee5\u524d\u7684 app.module.ts \u4e0d\u89c1\u4e86\uff0c\u5f88\u591a\u90fd\u9700\u8981\u81ea\u5df1\u6539\u5730\u65b9

   \n
\n
4. \n

   and much more....

   \n
\n

https://blog.angular.io/introducing-angular-v17-4d7033312e4b

https://www.youtube.com/watch?v=d0daPe9q35w

\u90fd\u662f\u6700\u65b0\u7248\uff0c\u7528\u4e86 sass \u548c material \u3002\n\u6a21\u677f\u91cc\u8fd9\u6837\uff1a\n<mat-toolbar>\n\u6587\u5b57 1\n<button mat-button>\u6587\u5b57 2<button>\n</mat-toolbar>

\u6b64\u65f6\u6587\u5b57 1 \u81ea\u52a8\u4f7f\u7528\u4e86 Material \u7684 Roboto \u5b57\u4f53\uff0c\u4f46\u662f\u5728\u6211\u7684 windows 10 \u53f0\u5f0f\u673a\u7684 chrome \u4e0b\uff0c\u6587\u5b57 2 \u5374\u4f7f\u7528\u4e86 Arial \u5b57\u4f53\u3002\u5728 Windows 11 \u7b14\u8bb0\u672c\u7684 chrome \u4e0b\uff0c\u6587\u5b57 2 \u4e5f\u4f7f\u7528\u4e86 Arial \u5b57\u4f53\uff0c\u4f46\u662f\u597d\u770b\u5f88\u591a\u3002

\u628a sass \u6539\u6210\u8fd9\u6837\uff1a\nmat-toolbar\nbutton\ncolor: red\nfont-family: Roboto, \"Helvetica Neue\", sans-serif

\u53d1\u73b0\u6587\u5b57 2 \u53d8\u6210\u4e86\u7ea2\u8272\uff0c\u5728 windows11 \u4e2d\u4e5f\u4f7f\u7528\u4e86 Roboto \u5b57\u4f53\uff0c\u4f46\u662f\u5728 windows10 \u4e2d\u5c45\u7136\u8fd8\u4fdd\u6301 Arial \u5b57\u4f53\u3002\u8bf7\u95ee\u8fd9\u662f\u4ec0\u4e48\u60c5\u51b5\uff1f

\u5982\u679c\u4e0d\u83b7\u53d6\u8fd9\u4e2a\u7ed3\u679c\uff0c\u800c\u76f4\u63a5\u5728\u540e\u53f0\u66f4\u65b0\u6570\u7ec4\uff0c\u5219\u540e\u9762\u6b65\u9aa4\u7684\u64cd\u4f5c\u4e0d\u4f1a\u751f\u6548\uff0c\u56e0\u4e3a\u6e32\u67d3\u662f\u5f02\u6b65\u7684

\u7f8e\u56fd\u7f57\u5207\u65af\u7279\u7406\u5de5\u5927\u5b66 CS \u4e13\u4e1a\uff0cNode.js \u8f6f\u4ef6\u5de5\u7a0b\u5e08\uff0cWeb \u5f00\u53d1\u8005\u3002\u9879\u76ee\u7ecf\u9a8c\u4e30\u5bcc\uff0c\u5f00\u6e90\u793e\u533a\u6d3b\u8dc3\uff0c\u5f00\u53d1\u6709\u6570\u4e2a\u5f00\u6e90\u5e93\u548c\u5e94\u7528\uff0c\u6781\u5ea6\u6ce8\u91cd\u67b6\u6784\u8bbe\u8ba1\uff0c\u91cd\u89c6\u9879\u76ee\u8d28\u91cf\u3002\u81ea\u9ad8\u4e2d\u8d77\u5373\u79ef\u6781\u81ea\u5b66\u8f6f\u4ef6\u5f00\u53d1\uff0c\u56e0\u57fa\u7840\u624e\u5b9e\u70ed\u7231\u5f00\u6e90\uff0c\u9ad8\u4e2d\u671f\u95f4\u5728\u77e5\u4e4e\u5f97\u5230\u4e0d\u5c11\u5173\u6ce8\u3002

\u5bb6\u5ead\u6761\u4ef6\u5e76\u4e0d\u597d\uff0c\u5bb6\u91cc\u4eba\u81ea\u4ece\u9ad8\u4e2d\u8d77\u5c31\u5f88\u652f\u6301\u6211\u8ba1\u7b97\u673a\u65b9\u9762\u7684\u5174\u8da3\uff0c\u7eb5\u4f7f\u4e4b\u540e\u53ef\u80fd\u5f97\u5356\u6389\u81ea\u5df1\u4f4f\u7684\u623f\u5b50\u4e5f\u575a\u6301\u627e\u4e2d\u4ecb\u9001\u6211\u53bb\u7f8e\u56fd\u6df1\u9020\u3002\u5728\u7f8e\u7684\u4e00\u4e2a\u5b66\u671f\u771f\u771f\u5207\u5207\u5730\u611f\u53d7\u5230\u7f8e\u56fd\u7684\u7269\u4ef7\u5bf9\u4e8e\u7559\u5b66\u751f\u6765\u8bf4\u6709\u591a\u8d35\uff0c\u51e0\u4e4e\u4e0d\u6562\u4e70\u4e1c\u897f\uff0c\u4f46\u82e6\u4e8e\u672a\u6210\u5e74\u5e76\u4e14\u7f8e\u56fd\u4e0d\u5141\u8bb8\u7b2c\u4e00\u5e74\u627e\u5b9e\u4e60\uff0c\u4e5f\u6682\u65f6\u6ca1\u627e\u5230\u9014\u5f84\u6253\u5c0f\u9ed1\u5de5\uff0c\u6ca1\u529e\u6cd5\u81ea\u5df1\u8d5a\u94b1\u3002

\u4e0a\u4e2a\u6708\u521a\u8fc7\u5341\u516b\u5468\u5c81\u751f\u65e5\uff0c\u4f46\u76f4\u5230\u6700\u8fd1\u624d\u7a81\u7136\u610f\u8bc6\u5230\u53ef\u4ee5\u5728\u56fd\u5185\u627e\u5b9e\u4e60\u4e86\u3002\u3002\u7531\u4e8e Angular \u5728\u56fd\u5185\u5de5\u4f5c\u673a\u4f1a\u5e76\u4e0d\u591a\uff0c\u62db\u8058\u7f51\u7ad9\u4e0a\u5e76\u6ca1\u6709\u4ec0\u4e48\u5b9e\u4e60\u673a\u4f1a\uff0c\u4e8e\u662f\u6765\u8fd9\u91cc\u78b0\u78b0\u8fd0\u6c14\u3002

\u7b80\u5386\uff08 OneDrive \uff09\uff1a https://1drv.ms/b/s!ArmN_DYQwMC8g-BEiie287s3b88WPA?e=waNeFu
\n\u8fd9\u4e2a\u94fe\u63a5\u91cc\u7684\u7b80\u5386\u91cc\u6709\u4e9b\u4fe1\u606f\u5220\u6389\u4e86\uff0c\u56e0\u4e3a\u4e0d\u662f\u5f88\u60f3\u5728\u516c\u5171\u573a\u5408\u900f\u9732\u592a\u591a\u4e2a\u4eba\u4fe1\u606f\u3002\u3002
\n\u8fd9\u4e5f\u662f\u6211\u7684\u7b2c\u4e00\u4efd\u6c42\u804c\u7b80\u5386\uff0c\u5982\u679c\u6709\u53d1\u73b0\u6709\u95ee\u9898\u9ebb\u70e6\u72e0\u72e0\u5730\u544a\u8bc9\u6211\uff01\u975e\u5e38\u611f\u8c22\uff01

\u6709\u610f\u5411\u62db\u5b9e\u4e60\u751f\u7684\u8bf7\u72e0\u72e0\u5730\u8054\u7cfb\u6211\uff01\u5f00\u5b66\u671f\u95f4\u6211\u4e5f\u80fd\u5e72\u6d3b\uff01\uff01
\n\u90ae\u7bb1\uff1a char2s@outlook.com

\u65b0\u624b\u8bf7\u6559 Angular \u5b66\u4e60\u8def\u7ebf\u4e0e\u8bfe\u7a0b

\u672c\u4eba\u5f53\u524d\u5927\u4e09, \u627e\u5230\u4e00\u4e2a\u524d\u7aef\u5b9e\u4e60, \u516c\u53f8\u6280\u672f\u6808\u662f Angular. \u672c\u4eba\u6709\u4e00\u5b9a\u7684\u524d\u7aef\u57fa\u7840, Vue \u548c React \u90fd\u6bd4\u8f83\u719f\u6089, \u4f46\u662f\u4ece\u672a\u63a5\u89e6\u8fc7 Angular, \u8bf7\u95ee\u6709\u4ec0\u4e48\u63a8\u8350\u7684 Angular \u8bfe\u7a0b\u5417?

Github V16.0.0

\u5df2\u7ecf\u5c06 7 \u30018 \u4e2a\u9879\u76ee\u5347\u7ea7\u5b8c\u4e86\uff0c\u6709\u4e00\u4e2a ssr \u9879\u76ee\u7528\u4e86 Hydration \uff0c\u7ec8\u4e8e\u4e0d\u95ea\u5c4f\u4e86[\u6cea\u76ee]

\u665a\u70b9\u73a9\u4f1a signal

Angular \u6bcf\u534a\u5e74\u63a8\u51fa\u4e00\u4e2a\u5927\u7248\u672c\uff0c\u4ee5\u4fdd\u6301\u6846\u67b6\u7684\u6301\u7eed\u66f4\u65b0\u3002\u7136\u800c\uff0c\u81ea\u4ece 2020 \u5e74\u521d Angular 9 \u63a8\u51fa\u91cd\u5927\u66f4\u65b0\u5e76\u5c06\u9ed8\u8ba4\u7f16\u8bd1\u548c\u6e32\u67d3\u5f15\u64ce\u4ece View Engine \u5207\u6362\u5230 Ivy \u540e\uff0cAngular \u7684\u8fed\u4ee3\u4f3c\u4e4e\u4e00\u76f4\u5904\u4e8e\u76f8\u5f53\u6d88\u6781\u7684\u72b6\u6001\u3002\u66f4\u65b0\u5185\u5bb9\u4e3b\u8981\u96c6\u4e2d\u5728\u8ddf\u8fdb TypeScript \u548c RxJS \u7248\u672c\u3001\u5c0f\u7279\u6027\u548c\u6027\u80fd\u4f18\u5316\u65b9\u9762\uff0c\u800c\u4e00\u4e9b\u9648\u5e74\u95ee\u9898\u4ecd\u672a\u89e3\u51b3\u3002

\u6709\u4eba\u8ba4\u4e3a\u8fd9\u662f Angular \u7a33\u5b9a\u6210\u719f\u7684\u8868\u73b0\uff0c\u4e5f\u6709\u4eba\u8ba4\u4e3a\u8fd9\u662f Google \u653e\u5f03 Angular \u7684\u524d\u5146\u3002\u5728\u793e\u533a\u5185\u5145\u65a5\u7740\u5404\u79cd\u6d88\u6781\u60c5\u7eea\u65f6\uff0cAngular \u56e2\u961f\u5728\u4e00\u5e74\u65f6\u95f4\u5185\u63a5\u8fde\u63d0\u51fa\u4e86 Standalone APIs RFC \u548c Signals RFC \u8fd9\u4e24\u4e2a\u63d0\u6848\uff0c\u63a8\u51fa\u4e86\u5168\u65b0\u7684\u5e94\u7528\u7ec4\u7ec7\u65b9\u5f0f\u548c\u4e0e\u8fc7\u53bb\u5b8c\u5168\u4e0d\u540c\u7684\u57fa\u4e8e Signal \u7684\u54cd\u5e94\u6027\u548c\u6570\u636e\u6d41\u65b9\u6848\u3002Angular \u4f3c\u4e4e\u6b63\u5728\u6b65\u5165\u4e00\u4e2a\u65b0\u7684\u7eaa\u5143\u3002

Signals RFC \u5206\u4e3a\u4e3b RFC \u548c\u56db\u4e2a\u5b50 RFC\uff1a

\n
• RFC #1: Signals for Angular Reactivity.
\n
• RFC #2: Signal APIs.
\n
• RFC #3: Signal-based components.
\n
• RFC #4: Observable and Signal Interoperability.
\n

\u672c\u6587\u5c06\u6982\u8ff0\u4e3b RFC \u548c\u6240\u6709\u5b50 RFC \u7684\u5185\u5bb9\uff0c\u4e0d\u5305\u542b\u7b14\u8005\u4e2a\u4eba\u89c2\u70b9\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u8fd9\u4e9b\u53ea\u662f\u8be5 RFC \u5f53\u524d\u9636\u6bb5\uff08 2023/04/12 \uff09\u7684\u5185\u5bb9\uff0cRFC \u53ef\u80fd\u968f\u65f6\u66f4\u65b0\uff0c\u6700\u7ec8\u7684\u5b9e\u73b0\u53ef\u80fd\u6709\u8f83\u5927\u51fa\u5165\u3002

Signals RFC

Signals RFC \u662f\u8fd1\u5e74\u6765 Angular \u56e2\u961f\u63d0\u51fa\u7684\u89c4\u6a21\u6700\u5927\uff0c\u4e5f\u6700\u5177\u98a0\u8986\u6027\u7684\u63d0\u6848\uff0c\u5176\u76ee\u6807\u662f\u89e3\u51b3\u6570\u4e2a\u5728\u793e\u533a\u4e2d\u7559\u5b58\u6570\u5e74\u7684\u95ee\u9898\uff0c\u5982\u57fa\u4e8e Zone.js \u7684\u53d8\u66f4\u68c0\u6d4b\u7684\u6027\u80fd\u95ee\u9898\uff0c\u57fa\u4e8e RxJS \u7684\u72b6\u6001\u6d3e\u751f\u8f83\u4e3a\u7e41\u7410\uff0c\u65e0\u6cd5\u4fbf\u6377\u5730\u5bf9\u7279\u5b9a Input \u7684\u53d8\u5316\u4f5c\u51fa\u54cd\u5e94\u7b49\u3002

Angular \u56e2\u961f\u6839\u636e\u8fc7\u53bb\u51e0\u5e74\u7684\u793e\u533a\u53cd\u9988\u5236\u5b9a\u4e86\u4ee5\u4e0b\u76ee\u6807\uff1a

\n
• Angular \u5e94\u5f53\u5177\u5907\u4e00\u4e2a\u6e05\u6670\u800c\u7edf\u4e00\u7684\u6570\u636e\u6d41\u6a21\u578b
\n
• Angular \u5e94\u5185\u7f6e\u5bf9\u4e8e\u58f0\u660e\u5f0f\u7684\u72b6\u6001\u6d3e\u751f\u7684\u652f\u6301
\n
• \u53ea\u6709\u9700\u8981\u66f4\u65b0\u7684 UI \u9700\u8981\u540c\u6b65\uff0c\u8be5\u7ec6\u7c92\u5ea6\u5e94\u5f53\u5728\u5355\u4e2a\u7ec4\u4ef6\u6216\u8005\u5355\u4e2a\u7ec4\u4ef6\u4ee5\u4e0b
\n
• \u4e0e RxJS \u7b49 reactive \u5e93\u7684\u6d41\u7545\u7684\u4e92\u64cd\u4f5c\u6027
\n
• Angular \u5e94\u63d0\u4f9b\u66f4\u597d\u7684\u62a4\u680f\uff0c\u4ee5\u907f\u514d\u5f00\u53d1\u8005\u8f7b\u6613\u9677\u5165\u5927\u5e45\u5f71\u54cd\u6027\u80fd\u7684\u53d8\u66f4\u68c0\u6d4b\u9677\u9631\uff0c\u6216\u662f\u89e6\u53d1 ExpressionChangedAfterItHasBeenChecked \u9519\u8bef
\n
• Angular \u5e94\u63d0\u4f9b\u4e00\u79cd\u53ef\u884c\u7684\u8def\u5f84\u4ee5\u5f00\u53d1\u5b8c\u5168\u4e0d\u4f9d\u8d56 Zone.js \u7684\u5e94\u7528
\n
• Angular \u5e94\u7b80\u5316\u8bb8\u591a\u6846\u67b6\u7279\u5b9a\u7684\u6982\u5ff5\uff0c\u5982 View \u67e5\u8be2\u3001Content \u67e5\u8be2\u548c\u751f\u547d\u5468\u671f Hooks
\n

\u800c Signals RFC \u5219\u88ab\u89c6\u4e3a\u662f\u5b9e\u73b0\u4ee5\u4e0a\u76ee\u6807\u7684\u57fa\u77f3\u3002

Signal APIs

Signal \u6307\u7684\u662f\u5177\u6709\u663e\u5f0f\u53d8\u5316\u8bed\u4e49\u7684\u503c\u3002\u5728 Angular \u4e2d\uff0cSignal \u662f\u7531\u8c03\u7528\u540e\u7acb\u5373\u8fd4\u56de\u5f53\u524d\u503c\u7684\u96f6\u53c2\u6570\u7684 Getter \u51fd\u6570\u8868\u793a\u7684\uff1a

interface Signal<T> {\n (): T;\n [SIGNAL]: unknown;\n}\n

\u8be5 Getter \u51fd\u6570\u5177\u6709\u4e00\u4e2a [SIGNAL] \u5c5e\u6027\uff0c\u6846\u67b6\u53ef\u4ee5\u7528\u8be5\u5c5e\u6027\u8fa8\u8bc6 signals \u4ee5\u7528\u4e8e\u5185\u90e8\u4f18\u5316\u3002

Signal \u672c\u8d28\u4e0a\u5e94\u5f53\u662f\u53ea\u8bfb\u7684\uff0c\u53ea\u7528\u4e8e\u83b7\u53d6\u5f53\u524d\u7684\u503c\u4ee5\u53ca\u5bf9\u503c\u7684\u53d8\u66f4\u505a\u51fa\u54cd\u5e94\u3002

Getter \u51fd\u6570\u7528\u4e8e\u8bbf\u95ee\u5f53\u524d\u503c\uff0c\u540c\u65f6\u5c06\u672c\u6b21 Signal \u7684\u8bfb\u53d6\u64cd\u4f5c\u8bb0\u5f55\u5728\u4e00\u4e2a Reactive Context \u4e2d\uff0c\u7528\u4e8e\u6784\u5efa\u54cd\u5e94\u5f0f\u4f9d\u8d56\u5173\u7cfb\u56fe\u3002

\u5728 Reactive Context \u5916\u7684 Signal \u8bfb\u53d6\u4e5f\u662f\u88ab\u5141\u8bb8\u7684\u3002\u8fd9\u610f\u5473\u8005\u975e\u54cd\u5e94\u5f0f\u7684\u4ee3\u7801\uff0c\u5982\u7b2c\u4e09\u65b9\u5e93\u7684\u4ee3\u7801\uff0c\u4e5f\u53ef\u4ee5\u8bfb\u53d6 Signal \u7684\u503c\uff0c\u800c\u65e0\u9700\u6ce8\u610f\u5176\u54cd\u5e94\u5f0f\u7684\u672c\u8d28\u3002

Writable Signals

Angular \u7684 Signal \u5e93\u63d0\u4f9b\u4e00\u4e2a\u9ed8\u8ba4\u7684 Writable Signal \u7684\u5b9e\u73b0\uff0c\u7528\u4e8e\u901a\u8fc7\u5176\u5185\u7f6e\u7684\u65b9\u6cd5\u53d8\u66f4 Signal \u7684\u503c\uff1a

interface WritableSignal<T> extends Signal<T> {\n /**\n * \u5c06 Signal \u76f4\u63a5\u8bbe\u7f6e\u5230\u4e00\u4e2a\u65b0\u7684\u503c\u3002\n */\n set(value: T): void;\n /**\n * \u57fa\u4e8e Signal \u7684\u5f53\u524d\u503c\u4ee5\u5bf9\u503c\u8fdb\u884c\u66f4\u65b0\u3002\n */\n update(updateFn: (value: T) => T): void;\n /**\n * \u901a\u8fc7\u5bf9 Signal \u7684\u5f53\u524d\u503c\u8fdb\u884c\u76f4\u63a5\u7684\u53d8\u5316\u6765\u66f4\u65b0 Signal \u7684\u5f53\u524d\u503c\uff08\u4e0d\u6539\u53d8\u5bf9\u8c61\uff09\u3002\n */\n mutate(mutatorFn: (value: T) => void): void;\n /**\n * \u8fd4\u56de\u4e00\u4e2a\u975e Writable \u7684 Signal \uff0c\u8be5 Signal \u8bbf\u95ee\u5f53\u524d WritableSignal \u4f46\u4e0d\u5141\u8bb8\u5bf9\u503c\u8fdb\u884c\u53d8\u66f4\u3002\n */\n asReadonly(): Signal<T>;\n}\n

\u901a\u8fc7 signal \u51fd\u6570\u53ef\u4ee5\u521b\u5efa WritableSignal \u7684\u5b9e\u4f8b\uff1a

function signal<T>(\n initialValue: T,\n options?: {equal?: (a: T, b: T) => boolean}\n): WritableSignal<T>;\n

\u7528\u6cd5\u793a\u4f8b\uff1a

const counter = signal(0);\ncounter.set(5);\ncounter.update(currentValue => currentValue + 1);\n

Equality

\u53ef\u4ee5\u9009\u62e9\u6027\u7684\u4e3a WritableSignal \u6307\u5b9a\u4e00\u4e2a Equality \u6bd4\u8f83\u51fd\u6570\uff0c\u5982\u679c\u8be5 Equality \u51fd\u6570\u786e\u5b9a\u4e24\u4e2a\u503c\u662f\u76f8\u7b49\u7684\uff0c\u90a3\u4e48\uff1a

\n
• Signal \u7684\u503c\u5c06\u4e0d\u4f1a\u88ab\u66f4\u65b0
\n
• \u8be5\u53d8\u66f4\u5c06\u4e0d\u4f1a\u88ab\u4f20\u64ad
\n

\u9ed8\u8ba4\u7684 Equality \u51fd\u6570\u4f7f\u7528 === \u6765\u6bd4\u8f83\u57fa\u672c\u7c7b\u578b\u503c\uff0c\u4f46\u6bd4\u8f83\u5bf9\u8c61\u548c\u6570\u7ec4\u5c06\u4f1a\u6c38\u8fdc\u8fd4\u56de\u4e0d\u7b49\u3002\u8fd9\u5141\u8bb8 Signal \u6301\u6709\u975e\u57fa\u672c\u7c7b\u578b\u7684\u503c\u7684\u540c\u65f6\uff0c\u4ecd\u7136\u53ef\u4ee5\u4f20\u64ad\u5176\u503c\u7684\u53d8\u66f4\uff0c\u4f8b\u5982\uff1a

const todos = signal<Todo[]>([{todo: 'Open RFC', done: true}]);\n// \u4e0d\u4f7f\u7528\u4e0d\u53ef\u53d8\u6570\u636e\u65f6\uff0c\u6211\u4eec\u4ecd\u7136\u53ef\u4ee5\u66f4\u65b0\u8be5\u5217\u8868\u5e76\u89e6\u53d1\u503c\u7684\u53d8\u66f4\u3002\ntodos.mutate(todosList => {\n todosList.push({todo: 'Respond to RFC comments', done: false});\n});\n

Signal \u6982\u5ff5\u7684\u5176\u4ed6\u5b9e\u73b0\u662f\u53ef\u80fd\u7684\uff1a\u53ea\u8981\u5b9e\u73b0\u76f8\u5e94\u7684\u63a5\u53e3\uff0cAngular \u6216\u4efb\u4f55\u7b2c\u4e09\u65b9\u5e93\u90fd\u53ef\u4ee5\u521b\u5efa\u81ea\u5b9a\u4e49\u7684 Signal \u7248\u672c\u3002

Getter \u51fd\u6570

\u5728 Angular \u9009\u62e9\u7684\u8fd9\u4e00\u5b9e\u73b0\u4e2d\uff0cSignal \u662f\u7531\u4e00\u4e2a Getter \u51fd\u6570\u8868\u793a\u7684\u3002\u4f7f\u7528\u8fd9\u4e00 API \u7684\u4f18\u52bf\u6709\uff1a

\n
• \u8fd9\u662f\u4e00\u4e2a Javascript \u5185\u7f6e\u7684\u7ed3\u6784\uff0c\u4f7f\u5f97 Signal \u7684\u8bfb\u53d6\u5728 TypeScript \u4ee3\u7801\u548c\u6a21\u677f\u8868\u8fbe\u5f0f\u4e2d\u4fdd\u6301\u4e00\u81f4
\n
• \u5176\u975e\u5e38\u660e\u786e\u5730\u8868\u660e\u5176\u4e3b\u8981\u64cd\u4f5c\u662f\u201c\u8bfb\u53d6\u201d
\n
• \u5176\u975e\u5e38\u660e\u786e\u7684\u8868\u660e\u6b63\u5728\u53d1\u751f\u7684\u64cd\u4f5c\u5e76\u975e\u666e\u901a\u7684\u5c5e\u6027\u8bfb\u53d6
\n
• \u5176\u5728\u8bed\u6cd5\u4e0a\u975e\u5e38\u8f7b\u91cf\uff08\u7531\u4e8e Signal \u8bfb\u53d6\u662f\u975e\u5e38\u5e38\u89c1\u7684\u64cd\u4f5c\uff0c\u8fd9\u662f\u76f8\u5f53\u91cd\u8981\u7684\u4e00\u70b9\uff09
\n

\u7136\u800c\uff0cGetter \u51fd\u6570\u4e5f\u6709\u8bf8\u591a\u5f0a\u75c5\uff1a

\u5728\u6a21\u677f\u4e2d\u7684\u51fd\u6570\u8c03\u7528

\u591a\u5e74\u6765\uff0cAngular \u5f00\u53d1\u8005\u5df2\u7ecf\u5b66\u4f1a\u4e86\u5bf9\u5728\u6a21\u677f\u4e2d\u8c03\u7528\u51fd\u6570\u4fdd\u6301\u8b66\u60d5\u3002\u5176\u51fa\u73b0\u7684\u539f\u56e0\u662f\u7ec4\u4ef6\u7684\u53d8\u66f4\u68c0\u6d4b\u8fd0\u884c\u9891\u7e41\uff0c\u800c\u51fd\u6570\u5219\u5f88\u6709\u53ef\u80fd\u9690\u85cf\u5177\u6709\u9ad8\u8ba1\u7b97\u6210\u672c\u7684\u903b\u8f91\u3002

\u8fd9\u4e9b\u62c5\u5fe7\u5e76\u4e0d\u9002\u7528\u4e8e Signal \u7684 Getter \u51fd\u6570\u3002Getter \u51fd\u6570\u662f\u76f8\u5f53\u9ad8\u6548\u7684\u8bbf\u95ee\u5668\uff0c\u8ba1\u7b97\u6210\u672c\u6781\u4f4e\uff0c\u56e0\u6b64\u53cd\u590d\u9891\u7e41\u5730\u8c03\u7528 Signal \u7684 Getter \u51fd\u6570\u5e76\u4e0d\u662f\u4e00\u4e2a\u95ee\u9898\u3002

\u7136\u800c\uff0c\u5728 Signal \u8bfb\u53d6\u4e2d\u4f7f\u7528\u51fd\u6570\u8c03\u7528\u4ecd\u7136\u53ef\u80fd\u5728\u4f1a\u5728\u521a\u5f00\u59cb\u65f6\u8ba9\u90a3\u4e9b\u4e60\u60ef\u4e8e\u5728\u6a21\u677f\u4e2d\u907f\u514d\u51fd\u6570\u8c03\u7528\u7684\u5f00\u53d1\u8005\u611f\u5230\u56f0\u60d1\u3002

\u4e0e\u7c7b\u578b\u7f29\u7a84\u7684\u4ea4\u4e92

TypeScript \u53ef\u4ee5\u5728\u6761\u4ef6\u8bed\u53e5\u4e2d\u7f29\u7a84\u4e00\u4e2a\u8868\u8fbe\u5f0f\u7684\u7c7b\u578b\u3002\u5373\u4f7f user.name \u53ef\u4ee5\u88ab\u8d4b\u503c\u4e3a null\uff0c\u4ee5\u4e0b\u4ee3\u7801\u4f9d\u7136\u53ef\u4ee5\u901a\u8fc7\u7c7b\u578b\u68c0\u6d4b\uff0c\u8fd9\u6b63\u662f\u56e0\u4e3a TypeScript \u77e5\u9053\u5728 if \u7684\u4e3b\u4f53\u4e2d\uff0c user.name \u4e0d\u53ef\u80fd\u662f null\uff1a

if (user.name) {\n console.log(user.name.first);\n}\n

\u7136\u800c\uff0cTypeScript \u5e76\u4e0d\u4f1a\u7f29\u7a84\u51fd\u6570\u8fd4\u56de\u503c\u7684\u7c7b\u578b\uff0c\u56e0\u4e3a\u5176\u4e0d\u80fd\u4fdd\u8bc1\u6bcf\u4e2a\u51fd\u6570\u90fd\u50cf Signal \u51fd\u6570\u8fd9\u6837\u6bcf\u6b21\u90fd\u4f1a\u8fd4\u56de\u76f8\u540c\u7684\u503c\u3002\u56e0\u6b64\uff0c\u4e0a\u9762\u7684\u793a\u4f8b\u5e76\u4e0d\u9002\u7528\u4e8e Signal\uff1a

if (user.name()) {\n console.log(user.name().first); // \u7c7b\u578b\u9519\u8bef\n}\n

\u5bf9\u4e8e\u8fd9\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\uff0c\u6211\u4eec\u53ef\u4ee5\u5f88\u7b80\u5355\u5730\u5c06 user.name() \u63d0\u53d6\u4e3a\u4e00\u4e2a\u5728 if \u8bed\u53e5\u5916\u7684\u5e38\u91cf\uff1a

const name = user.name();\nif (name) {\n console.log(name.first);\n}\n

\u7136\u800c\u5728\u6a21\u677f\u4e2d\uff0c\u7531\u4e8e\u65e0\u6cd5\u58f0\u660e\u4e2d\u95f4\u53d8\u91cf\uff0c\u8fd9\u79cd\u65b9\u5f0f\u5c06\u4e0d\u5728\u594f\u6548\u3002\u76ee\u524d\u53ea\u80fd\u4f9d\u8d56\u4e00\u4e9b Workaround \u6765\u89e3\u51b3\u8be5\u95ee\u9898\u3002

\u66ff\u4ee3\u8bed\u6cd5

Angular \u56e2\u961f\u8003\u8651\u4e86\u591a\u79cd Getter \u51fd\u6570\u7684\u66ff\u4ee3\u8bed\u6cd5\uff0c\u5305\u62ec Vue \u7684 .value \u8bed\u6cd5\uff0cReact \u7684 [value, setValue] \u8bed\u6cd5\uff0cVue \u7684 Proxy \u54cd\u5e94\u6027\uff0c\u548c Marko/Svelte \u7684\u7f16\u8bd1\u65f6\u54cd\u5e94\u6027\u3002\u8be6\u89c1 RFC \u539f\u6587\u3002

Computed Signals

Computed Signal \u662f\u4ece\u4e00\u4e2a\u6216\u591a\u4e2a\u4f9d\u8d56\u503c\u6d3e\u751f\u51fa\u7684\u65b0\u7684\u503c\uff0c\u4f1a\u5728\u5176\u4f9d\u8d56\u7684\u503c\u53d8\u66f4\u65f6\u66f4\u65b0\u3002Computed Signal \u4e5f\u53ef\u4ee5\u4f9d\u8d56\u5176\u4ed6 Computed Signals \u3002

\u793a\u4f8b\uff1a

const counter = signal(0);\nconst isEven = computed(() => counter() % 2 === 0);\nconst color = computed(() => isEven() ? 'red' : 'blue');\n

computed \u51fd\u6570\u7684\u7b7e\u540d\u662f\uff1a

function computed<T>(\n computation: () => T,\n options?: {equal?: (a: T, b: T) => boolean}\n): Signal<T>;\n

computed \u51fd\u6570\u7684\u53c2\u6570\u4e2d\uff0c\u540d\u4e3a compuatation \u7684\u51fd\u6570\u4e0d\u5e94\u8be5\u6709\u4efb\u4f55\u526f\u4f5c\u7528 \u2014\u2014 \u5bf9\u4efb\u4f55 Signal \u7684\u53d8\u66f4\u90fd\u5e94\u5f53\u88ab\u907f\u514d\u3002Angular \u7684 Signal \u5e93\u5c06\u4f1a\u68c0\u6d4b\u5728 computation \u51fd\u6570\u4e2d\u5bf9\u5176\u4ed6 Signal \u7684\u53d8\u66f4\u5e76\u629b\u51fa\u5f02\u5e38\u3002

\u4e0e Writable Signal \u7c7b\u4f3c\uff0cComputed Signal \u540c\u6837\u53ef\u4ee5\u53ef\u9009\u5730\u6307\u5b9a\u4e00\u4e2a Equality \u51fd\u6570\uff0c\u7528\u4e8e\u5728\u4e24\u4e2a\u503c\u88ab\u786e\u5b9a\u4e3a\u76f8\u7b49\u65f6\u963b\u6b62\u66f4\u6df1\u5c42\u7684\u4f9d\u8d56\u94fe\u7684\u91cd\u65b0\u8ba1\u7b97\u3002

\u793a\u4f8b\uff08\u9ed8\u8ba4\u7684 Equality \u51fd\u6570\uff09\uff1a

const counter = signal(0);\n\nconst isEven = computed(() => counter() % 2 === 0);\n\nconst color = computed(() => isEven() ? 'red' : 'blue');\n\n// \u5f53\u5c06 counter \u8bbe\u7f6e\u5230\u4e00\u4e2a\u4e0d\u540c\u7684\u5947\u6570\u503c\u65f6\uff1a\n// - isEven \u5c06\u5fc5\u5b9a\u91cd\u65b0\u8ba1\u7b97\uff08\u5176\u4f9d\u8d56\u7684\u503c\u53d8\u66f4\u4e86\uff09\n// - color \u65e0\u9700\u91cd\u65b0\u8ba1\u7b97\uff08 isEven \u7684\u503c\u6ca1\u6709\u53d8\u5316\uff09\ncounter.set(2);\n

Angular \u9009\u62e9\u7684\u7528\u4e8e\u5b9e\u73b0 Computed Signal \u7684\u7b97\u6cd5\u5bf9\u8ba1\u7b97\u7684\u65f6\u673a\u548c\u6b63\u786e\u6027\u5177\u6709\u5f3a\u6709\u529b\u7684\u4fdd\u8bc1\uff1a

\n
• \u61d2\u8ba1\u7b97: \u5728 Computed Signal \u7684\u503c\u88ab\u8bfb\u53d6\u4e4b\u524d\uff0c\u5176 computation \u51fd\u6570\u4e0d\u4f1a\u88ab\u8c03\u7528
\n
• \u81ea\u52a8\u9500\u6bc1: \u4e00\u65e6 Computed Signal \u7684\u5f15\u7528\u8d85\u51fa\u4f5c\u7528\u57df\uff0c\u5176\u5c31\u81ea\u52a8\u7b26\u5408 GC \u7684\u6761\u4ef6\u3002Angular \u7684 Signal \u5e93\u4e0d\u4f1a\u66b4\u9732\u4efb\u4f55\u663e\u5f0f\u7684\u6e05\u7406\u64cd\u4f5c\u3002
\n
• \u9632\u6296\u8ba1\u7b97: \u5bf9\u4e8e\u4f9d\u8d56\u9879\u7684\u503c\u7684\u53d8\u66f4\uff0cAngular \u4f1a\u4fdd\u8bc1 computation \u51fd\u6570\u88ab\u8c03\u7528\u7684\u6b21\u6570\u662f\u6700\u5c11\u7684\u3002computation \u51fd\u6570\u6c38\u8fdc\u4e0d\u4f1a\u4e3a\u8fc7\u65f6\u7684\u503c\u6216\u662f\u4e2d\u95f4\u503c\u6267\u884c\uff0c\u5e76\u4e14\u5bf9\u77e5\u540d\u7684 \"Diamond Dependency Problem\" \u514d\u75ab\u3002\u9632\u6296\u8ba1\u7b97\u65e0\u9700\u4efb\u4f55\u663e\u5f0f\u7684\u201c\u4e8b\u52a1\u201d\u6216\u201c\u6279\u91cf\u201d\u64cd\u4f5c\u3002
\n

Computed Signal \u4e2d\u7684\u6761\u4ef6\u5206\u652f

Computed Signal \u4f1a\u8ddf\u8e2a\u5728 computation \u51fd\u6570\u4e2d\u8bfb\u53d6\u4e86\u54ea\u4e9b Signal \uff0c\u4ee5\u4fbf\u77e5\u9053\u4f55\u65f6\u9700\u8981\u91cd\u65b0\u8ba1\u7b97\u3002\u8fd9\u4e2a\u4f9d\u8d56\u96c6\u662f\u52a8\u6001\u7684\uff0c\u5e76\u4e14\u4f1a\u968f\u7740\u6bcf\u6b21\u8ba1\u7b97\u81ea\u6211\u8c03\u6574\u3002\u56e0\u6b64\uff0c\u5728\u8be5\u6761\u4ef6\u8ba1\u7b97\u4e2d\uff1a

const greeting = computed(() => showName() ? `Hello, ${name()}!` : 'Hello!');\n

\u5982\u679c showName \u7684\u503c\u6539\u53d8\u4e86\uff0c greeting \u603b\u662f\u4f1a\u91cd\u65b0\u8ba1\u7b97\uff0c\u4f46\u5982\u679c showName \u7684\u503c\u4e3a false\uff0c\u90a3\u4e48 name \u5c31\u4e0d\u4f1a\u662f greeting \u7684\u4f9d\u8d56\uff0c\u5176\u503c\u7684\u53d8\u5316\u4e5f\u5c31\u4e0d\u4f1a\u5bfc\u81f4 greeting \u91cd\u65b0\u8ba1\u7b97\u3002

Effect

Effect \u662f\u5177\u6709\u526f\u4f5c\u7528\u7684\u64cd\u4f5c\u3002\u6bcf\u5f53\u5176\u4e2d\u8bfb\u53d6\u7684\u4efb\u4f55\u4e00\u4e2a Signal \u7684\u503c\u66f4\u6539\u65f6\uff0cEffect \u4f1a\u81ea\u52a8\u5b89\u6392\u91cd\u65b0\u8fd0\u884c\u3002

\u58f0\u660e Effect \u7684\u57fa\u672c API \u7b7e\u540d\u5982\u4e0b\uff1a

function effect(\n effectFn: (onCleanup: (fn: () => void) => void) => void,\n options?: CreateEffectOptions\n): EffectRef;\n

\u7528\u6cd5\u793a\u4f8b\uff1a

const firstName = signal('John');\nconst lastName = signal('Doe');\n\n// \u8fd9\u4e2a Effect \u4f1a\u5411\u63a7\u5236\u53f0\u8f93\u51fa firstName \u548c lastName \uff0c\u5e76\u4e14\u6bcf\u5f53\u4ed6\u4eec\u7684\u503c\u53d8\u66f4\u65f6\u90fd\u4f1a\u91cd\u65b0\u5411\u63a7\u5236\u53f0\u8f93\u51fa\u3002 \neffect(() => console.log(firstName(), lastName()));\n

Effect \u5177\u6709\u591a\u79cd\u7528\u9014\uff0c\u5305\u62ec\uff1a

\n
• \u5728\u591a\u4e2a\u72ec\u7acb\u7684\u6a21\u578b\u4e4b\u95f4\u540c\u6b65\u6570\u636e
\n
• \u89e6\u53d1\u7f51\u7edc\u8bf7\u6c42
\n
• \u6267\u884c\u6e32\u67d3
\n

Effect \u51fd\u6570\u53ef\u4ee5\u9009\u62e9\u6027\u5730\u6ce8\u518c\u4e00\u4e2a\u6e05\u7406\u51fd\u6570\u3002\u6e05\u7406\u51fd\u6570\u4f1a\u5728\u4e0b\u4e00\u6b21\u8fd0\u884c\u6539 Effect \u524d\u88ab\u6267\u884c\uff0c\u53ef\u4ee5\u7528\u4e8e\u201c\u53d6\u6d88\u201d\u4e0a\u4e00\u6b21\u8fd0\u884c Effect \u65f6\u9057\u7559\u7684\u5de5\u4f5c\u3002\u4f8b\u5982\uff1a

effect((onCleanup) => {\n const countValue = this.count();\n\n let secsFromChange = 0;\n const id = setInterval(() => {\n console.log(\n `${countValue} \u5728 ${++secsFromChange} \u79d2\u5185\u6ca1\u6709\u53d8\u5316`\n );\n }, 1000);\n\n onCleanup(() => {\n console.log('\u6e05\u7406\u5e76\u91cd\u65b0\u5b89\u6392 Effect');\n clearInterval(id);\n });\n});\n

Effect \u7684\u8fd0\u884c\u65f6\u673a

\u5728 Angular Signal \u5e93\u4e2d\uff0cEffect \u603b\u4f1a\u5728\u66f4\u6539 Signal \u7684\u64cd\u4f5c\u5b8c\u6210\u540e\u8fd0\u884c\u3002

\u9274\u4e8e Effect \u7528\u9014\u7684\u591a\u6837\u6027\uff0c\u53ef\u80fd\u5b58\u5728\u5404\u79cd\u4e0d\u540c\u7684\u8fd0\u884c\u65f6\u673a\u3002\u8fd9\u5c31\u662f\u5b9e\u9645\u7684 Effect \u8fd0\u884c\u65f6\u673a\u4e0d\u80fd\u88ab\u4fdd\u8bc1\uff0c\u5e76\u4e14 Angular \u53ef\u80fd\u4f1a\u9009\u62e9\u4e0d\u540c\u7b56\u7565\u7684\u539f\u56e0\u3002\u5e94\u7528\u7a0b\u5e8f\u5f00\u53d1\u4eba\u5458\u4e0d\u5e94\u4f9d\u8d56\u4e8e\u4efb\u4f55\u89c2\u5bdf\u5230\u7684\u6267\u884c\u65f6\u95f4\u3002\u552f\u4e00\u53ef\u4ee5\u4fdd\u8bc1\u7684\u662f\uff1a

\n
• Effect \u4f1a\u8fd0\u884c\u81f3\u5c11\u4e00\u6b21
\n
• Effect \u4f1a\u5728\u5176\u4f9d\u8d56\u7684\u503c\u53d8\u66f4\u540e\u7684\u67d0\u4e00\u65f6\u95f4\u70b9\u8fd0\u884c
\n
• Effect \u8fd0\u884c\u7684\u6b21\u6570\u4f1a\u88ab\u5c3d\u53ef\u80fd\u51cf\u5c0f\uff1a\u5982\u679c\u4e00\u4e2a Effect \u4f9d\u8d56\u591a\u4e2a Signal \uff0c\u5e76\u4e14\u5176\u4e2d\u7684\u51e0\u4e2a Signal \u7684\u503c\u540c\u65f6\u6539\u53d8\u4e86\uff0cEffect \u53ea\u4f1a\u88ab\u5b89\u6392\u8fd0\u884c\u4e00\u6b21
\n

\u7ec8\u6b62 Effect

\u6bcf\u5f53\u4e00\u4e2a Effect \u7684\u4f9d\u8d56\u9879\u7684\u503c\u53d8\u66f4\uff0c\u8be5 Effect \u90fd\u4f1a\u88ab\u5b89\u6392\u8fd0\u884c\u3002\u4ece\u8fd9\u4e2a\u89d2\u5ea6\u4e0a\u770b\uff0cEffect \u4f3c\u4e4e\u662f\u201c\u6c38\u751f\u201d\u7684\uff0c\u5176\u6c38\u8fdc\u51c6\u5907\u7740\u5bf9 Reactive Graph \u4e2d\u53d1\u751f\u7684\u53d8\u5316\u505a\u51fa\u54cd\u5e94\u3002\u8fd9\u6837\u7684\u65e0\u9650\u5bff\u547d\u663e\u7136\u4e0d\u662f\u6211\u4eec\u60f3\u8981\u7684\uff0c\u56e0\u4e3a Effect \u5e94\u5f53\u5728\u5e94\u7528\u7ed3\u675f\u6216\u662f\u5176\u4ed6 Lifespan Scope \u7ed3\u675f\u65f6\u88ab\u7ec8\u6b62\u3002

Angular Effect \u7684\u9ed8\u8ba4\u5bff\u547d\u662f\u4e0e\u6846\u67b6\u4e2d\u7684 DestroyRef \u76f8\u5173\u8054\u7684\u3002\u4e5f\u5c31\u662f\u8bf4\uff0cEffect \u4f1a\u5c1d\u8bd5\u6ce8\u5165\u5f53\u524d\u7684 DestroyRef \u5b9e\u4f8b\uff0c\u7136\u540e\u5728\u5176\u4e2d\u6ce8\u518c\u5176\u7ec8\u6b62\u51fd\u6570\u3002

\u5bf9\u4e8e\u9700\u8981\u66f4\u8be6\u7ec6\u7684\u5bff\u547d\u63a7\u5236\u7684\u60c5\u666f\uff0c\u53ef\u4ee5\u5728\u521b\u5efa Effect \u65f6\u542f\u7528 manualCleanup \u9009\u9879\uff1a

effect(() => {...}, {manualCleanup?: boolean});\n

\u5f53\u8be5\u9009\u9879\u542f\u7528\u65f6\uff0c\u5373\u4f7f\u521b\u5efa\u8be5 Effect \u7684\u7ec4\u4ef6\u6216\u662f\u6307\u4ee4\u5df2\u88ab\u9500\u6bc1\uff0c\u8be5 Effect \u4e5f\u4e0d\u4f1a\u88ab\u7ec8\u6b62\u3002

\u53ef\u4ee5\u4f7f\u7528\u521b\u5efa Effect \u65f6\u8fd4\u56de\u7684 EffectRef \u5b9e\u4f8b\u624b\u52a8\u7ec8\u6b62\u8be5 Effect\uff1a

const effectRef = effect(() => {...});\neffectRef.destroy();\n

\u5728 Effect \u4e2d\u66f4\u6539 Signal \u7684\u503c

Angular \u56e2\u961f\u666e\u904d\u8ba4\u4e3a\u5728 Effect \u4e2d\u66f4\u6539 Signal \u7684\u503c\u53ef\u80fd\u4f1a\u5bfc\u81f4\u9884\u6599\u5916\u7684\u8868\u73b0\uff08\u5982\u65e0\u9650\u5faa\u73af\uff09\u548c\u96be\u4ee5\u8ddf\u8e2a\u7684\u6570\u636e\u6d41\u3002\u56e0\u6b64\uff0c\u4efb\u4f55\u5c1d\u8bd5\u4ece Effect \u4e2d\u66f4\u6539 Signal \u7684\u503c\u7684\u64cd\u4f5c\u90fd\u4f1a\u5411\u63a7\u5236\u53f0\u8f93\u51fa\u4e00\u4e2a\u9519\u8bef\u5e76\u88ab\u963b\u6b62\u3002

\u53ef\u4ee5\u901a\u8fc7\u5728\u521b\u5efa Effect \u65f6\u542f\u7528 allowSignalWrites \u9009\u9879\u6765\u8986\u5199\u8be5\u9ed8\u8ba4\u884c\u4e3a\uff0c\u5982\uff1a

const counter = signal(0);\nconst isBig = signal(false);\n\neffect(() => {\n if (counter() > 5) {\n isBig.set(true);\n } else {\n isBig.set(false);\n } \n}, {allowSignalWrites: true});\n

\u6ce8\u610f\uff0c\u4e00\u822c\u6765\u8bf4\u4f7f\u7528 Computed Signal \u662f\u4e00\u79cd\u66f4\u58f0\u660e\u5f0f\uff0c\u66f4\u76f4\u89c2\uff0c\u4e14\u66f4\u53ef\u9884\u6d4b\u7684\u540c\u6b65\u6570\u636e\u7684\u65b9\u5f0f\uff1a

const counter = signal(0);\nconst isBig = computed(() => counter() > 5);\n

\u57fa\u4e8e Signal \u7684\u7ec4\u4ef6

\u5269\u4e0b\u4e00\u5927\u534a\u56e0\u957f\u5ea6\u9650\u5236\u642c\u4e0d\u8fc7\u6765\uff0c\u89c1\u77e5\u4e4e\u539f\u6587\uff1a https://www.zhihu.com/question/595093745/answer/2981152934

\u95f2\u6765\u65e0\u4e8b\uff0c\u5c1d\u8bd5\u5b9e\u73b0\u4e86\u4e00\u4e0b Material Studies \u91cc\u7684\u8fd9\u4e2a\u53eb Reply \u7684\u8de8\u5e73\u53f0\u90ae\u4ef6\u5e94\u7528\uff0c\u76ee\u6807\u662f\u5c3d\u53ef\u80fd\u4fdd\u8bc1\u7528\u6237\u5728\u4efb\u4f55\u8bbe\u5907\u5c4f\u5e55\u4e0a\u90fd\u80fd\u5f97\u5230\u5ab2\u7f8e\u539f\u751f\u5e94\u7528\u7684\u7528\u6237\u4f53\u9a8c\uff0c\u82b1\u4e86\u5f88\u591a\u7cbe\u529b\u5728 Material Motion \u7684\u52a8\u753b\u6548\u679c\u4e0a\uff0c\u597d\u5728\u6700\u7ec8\u7684\u6548\u679c\u8fd8\u662f\u5f88\u4e0d\u9519\u7684\u3002

\n

\u4e0d\u5f97\u4e0d\u8bf4 Angular \u7684\u52a8\u753b\u5f15\u64ce\u662f\u771f\u7684\u5f88\u5f3a\u5927\uff0c\u4f46\u5373\u4fbf\u5982\u6b64\u6709\u4e9b\u52a8\u753b\u6548\u679c\u6bd4\u5982 Shared Element Transition \u548c Container Transform \u8fd8\u662f\u6ca1\u6cd5\u76f4\u63a5\u7528\u5185\u7f6e\u7684\u52a8\u753b\u5f15\u64ce\u5b9e\u73b0\u3002\u8fd9\u65b9\u9762\u7684\u52a8\u753b\u6548\u679c\u7684\u5b9e\u73b0\u65b9\u5f0f\u6211\u662f\u501f\u9274\u7684 React \u7684 Framer Motion \u91cc\u7684 Layout Projection \u6280\u672f\u3002Layout Projection \u7684\u53d1\u660e\u8005 Matt Perry \u5728\u51e0\u5e74\u524d\u6709\u8fc7\u4e00\u4e2a\u5173\u4e8e\u8fd9\u4e2a\u6280\u672f\u7684\u6f14\u8bb2\uff0c\u8fd8\u53d1\u5e03\u4e86\u4e00\u7bc7\u6280\u672f\u7ec6\u8282\u535a\u5ba2\uff0c\u4f46\u65e0\u5948\u73b0\u5728\u5df2\u7ecf\u6253\u4e0d\u5f00\u4e86\uff0c\u6b64\u5904\u591a\u4e8f taowen \u5728 GitHub Gists \u4e0a\u4f20\u7684\u535a\u5ba2\u526f\u672c \u6211\u624d\u5f97\u4ee5\u5728 Angular \u5b9e\u73b0 Layout Projection \u3002

Links

\n
• GitHub Repository: https://github.com/TheNightmareX/reply
\n
• GitHub Pages: https://thenightmarex.github.io/reply/
\n

\u5982\u679c\u4f60\u5bf9\u8fd9\u4e2a\u9879\u76ee\u6709\u5174\u8da3\uff0c\u5e0c\u671b\u4f60\u53ef\u4ee5 star \u4e00\u4e0b\u9879\u76ee\u7684 GitHub \u4ed3\u5e93\uff0c\u5982\u679c\u53ef\u4ee5\u5206\u4eab\u7ed9\u4f60\u7684\u670b\u53cb\u5c31\u66f4\u597d\u4e86\uff01\u5982\u679c\u53ef\u4ee5 follow \u4e00\u4e0b\u6211\u90a3\u5c31\u66f4\u597d\u4e0a\u52a0\u597d\u4e86\uff01:D
\n\u9a6c\u4e0a\u8981\u51fa\u56fd\u8bfb\u5927\u5b66\u4e86\uff0c\u6211\u5e0c\u671b\u80fd\u7ed9\u6559\u6388\u7559\u4e0b\u4e00\u4e2a\u6df1\u523b\u7684\u7b2c\u4e00\u5370\u8c61\uff0c\u975e\u5e38\u611f\u8c22\uff01

Design

\n

Reply \u662f\u4e00\u4e2a\u90ae\u4ef6\u5ba2\u6237\u7aef\uff0c\u4f7f\u7528 Material Design \u7ec4\u4ef6\u548c Material \u4e3b\u9898\u5b9a\u5236\u6765\u521b\u5efa\u54c1\u724c\u4ea4\u6d41\u4f53\u9a8c\u3002

\n

\n

\n

\u5728 segmentfault \u95ee\u4e86\u6ca1\u4eba\u56de\u7b54\nhttps://segmentfault.com/q/1010000042779634\n\u4ee3\u7801\u4f8b\u5b50\nhttps://stackblitz.com/edit/angular-gwyili?file=src%2Fapp%2Fapp.component.html

 codeRun(code: string): void {\n if (!this.viewState.source || !this.viewState.source.id) return;\n this.toolbarState.loading.run = true;\n this.toolbarState.enable.stop = true;\n this.viewTableState.loading = true;\n const param: ViewTestExecute = {\n sourceId: this.viewState.source.id,\n scriptType: 'SQL',\n size: this.toolbarState.limit.value,\n script: code,\n variables: [],\n columns: [],\n countTotal: true\n };\n this.dataProviderService\n .execute(param)\n .pipe(\n catchError(exception => {\n this.toolbarState.loading.run = false;\n this.toolbarState.enable.stop = false;\n this.viewTableState.loading = false;\n throw exception;\n })\n )\n .pipe(takeUntil(this.destroy$))\n .subscribe((result: QueryResult) => {\n this.viewState.execute = param\n this.toolbarState.loading.run = false;\n this.toolbarState.enable = {run: true, stop: false, save: true, setting: false, copy: false};\n this.viewTableState = {...result, loading: false};\n });\n }\n

\u5982\u4e0a\u9762\u8fd9\u6bb5\u4ee3\u7801\uff0c\u56e0\u4e3a\u9875\u9762\u7684\u6807\u7b7e\u4f8b\u5982 <spin [spining]='xxxloading'></spin>\u8fd9\u6837\uff0c\u6709\u4e00\u4e2a\u52a0\u8f7d\u72b6\u6001\uff0c\u4f46\u662f\u7528

this.loading = true\nthis.http.get().subscribe(xx=>this.loading=false)\n

\u8fd9\u79cd\u6539\u53d8 loading \u72b6\u6001\u7684\u4ee3\u7801\uff0c\u611f\u89c9\u5f04\u5f97\u6211\u4ee3\u7801\u5f88\u4e0d\u5e72\u51c0\uff0c\u6709\u6ca1\u6709\u4ec0\u4e48\u65b9\u6cd5\u80fd\u5c3d\u91cf\u8ba9\u6539\u53d8\u9875\u9762\u72b6\u6001\u4ee3\u7801\u7cbe\u7b80\u4e9b\uff0c\u8ba9\u6211\u7684\u4ee3\u7801\u5e72\u51c0\u4e9b

Angular \u7684\u4e00\u4e9b\u7ec4\u4ef6\uff08\u6bd4\u5982Router\uff09\uff0c\u5176\u8fd4\u56de\u503c\u662f Promise \uff0c\u800c\u4e0d\u662f Angular \u91cc\u6700\u5e38\u7528\u7684 Observable \uff0c\u6709\u4eba\u77e5\u9053\u8fd9\u662f\u4e3a\u4ec0\u4e48\u5417\uff1f

angular7 + ng-zorro,\u6839\u636e json/schema \u52a8\u6001\u521b\u5efa form \u8868\u5355

\u6709\u4e00\u4e2a AngularJS(\u6ce8\u610f\u662f JS \uff0c\u4e5f\u5c31\u662f 1.x \u7248\u672c)\u5199\u7684\u8001\u9879\u76ee\uff0c\u73b0\u5728\u6709\u4e00\u4e2a\u65b0\u7684\u9700\u6c42\u3002\u51fa\u4e8e\u5b89\u5168\u8003\u8651\uff0c\u8981\u6c42\u767b\u5f55\u4e4b\u524d\u6d4f\u89c8\u5668\u4e0d\u80fd\u83b7\u53d6\u5230\u4efb\u4f55\u767b\u5f55\u9875\u9762\u4ee5\u5916\u7684\u5185\u5bb9\u3002\u76ee\u524d\u9879\u76ee\u662f\u7528 Gulp \u6253\u5305\uff0c\u6240\u6709\u7684 template \u90fd\u88ab\u6253\u5305\u5728 Angular \u7684\u5165\u53e3\u6587\u4ef6\u91cc\uff0c\u7b49\u4e8e\u83b7\u53d6\u4e86\u8fd9\u4e2a JS \u6587\u4ef6\u5c31\u80fd\u5f97\u5230\u7edd\u5927\u90e8\u5206\u9875\u9762\u5185\u5bb9\u4e86\u3002

\u8003\u8651\u4e86\u4e4b\u540e\u60f3\u8bf4 SSR \u80fd\u4e0d\u80fd\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u4e0d\u8fc7\u770b\u4e86 Express \u548c\u5176\u5b83\u4e00\u4e9b\u89e3\u51b3\u65b9\u6848\uff0c\u53ef\u80fd\u4e3b\u8981\u90fd\u662f\u9488\u5bf9 SEO \u8bbe\u8ba1\u7684\uff0c\u597d\u50cf\u5e76\u4e0d\u80fd\u628a Angular \u7684\u903b\u8f91\u5168\u653e\u5728\u670d\u52a1\u7aef\uff0c\u8ba9\u6d4f\u89c8\u5668\u53ea\u62ff\u5230 HTML \u3002

\u6211\u524d\u7aef\u5b8c\u5168\u5c0f\u767d\uff0c\u60f3\u8bf7\u95ee\u5927\u5bb6\u6709\u6ca1\u6709\u4ec0\u4e48\u5efa\u8bae\uff1f SSR \u8fd9\u4e2a\u601d\u8def\u80fd\u884c\u5417\uff1f\u6709\u6ca1\u6709\u5176\u4ed6\u63a8\u8350\u7684\u65b9\u6cd5\uff1f\u5728\u8fd9\u63d0\u524d\u8c22\u8fc7

\u521a\u5f00\u59cb\u5b66\u4e60 Angular \uff0c\u60f3\u901a\u8fc7\u540e\u53f0\u7ba1\u7406\u9875\u9762\u5b66\u4e60\u4e0a\u624b\u3002

Angular \u6587\u6863\u4e0a\u5199\u7684\u61d2\u8def\u7531\u58f0\u660e\u65b9\u5f0f\uff1a

const routes: Routes = [\n {\n path: 'customers',\n loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)\n }\n];\n

\u6309\u7167\u4e00\u822c\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf\u7684\u65b9\u5f0f\uff0c\u83dc\u5355\u5217\u8868\u90fd\u662f\u4ece\u63a5\u53e3\u83b7\u53d6\uff0c\u7136\u540e\u524d\u7aef\u518d\u6839\u636e\u63a5\u53e3\u7684\u5217\u8868\u6ce8\u518c\u8def\u7531\u3002\u5728 Angular \u91cc\u4f7f\u7528 Router \u7684 resetConfig \u65b9\u6cd5\u53ef\u4ee5\u66f4\u65b0\u6ce8\u518c\u8def\u7531\uff0c\u90a3\u4e48\u95ee\u9898\u5c31\u662f\uff1a\u63a5\u53e3\u8fd4\u56de\u56de\u6765\u7684\u6bcf\u4e2a\u83dc\u5355\u5bf9\u5e94\u7684\u6a21\u5757 /\u7ec4\u4ef6\u7684\u4fe1\u606f\u80af\u5b9a\u662f\u5b57\u7b26\u4e32\u683c\u5f0f\uff0c\u8981\u600e\u6837\u7684\u65b9\u5f0f\u624d\u80fd\u53d8\u6210\u6587\u6863\u4e2d\u58f0\u660e\u6240\u9700\u7684\u683c\u5f0f\uff1f

import('./customers/customers.module').then(m => m.CustomersModule)\n

\u8fd9\u6216\u8bb8\u770b\u8d77\u6765\u66f4\u50cf\u662f TypeScript \u7684\u4f7f\u7528\u95ee\u9898\uff1f\u7f51\u4e0a\u67e5\u4e86\u4e00\u5708\u8d44\u6599\u90fd\u6ca1\u627e\u5230\u6709\u5173\u7684\u4fe1\u606f\uff08\u4e5f\u53ef\u80fd\u662f\u6211\u65b9\u6cd5\u4e0d\u5bf9\uff09\uff0c\u56e0\u6b64\u524d\u7aef\u5c0f\u767d\u7279\u6765 V2 \u8bf7\u6559\u4e0b\u5404\u4f4d\u5927\u4f6c Angular \u4e0b\u52a8\u6001\u6ce8\u518c\u8def\u7531\u7684\u6b63\u786e\u65b9\u5f0f\uff0c\u611f\u8c22\uff01

\u5c31\u662f\u600e\u4e48\u624d\u80fd\u5728 html \u91cc\u5199 class \u7684\u65f6\u5019\uff0c\u80fd\u81ea\u52a8\u63d0\u793a css \u91cc\u9762\u6709\u7684\u5c5e\u6027\uff0c

\u627e\u4e86\u597d\u51e0\u4e2a\u6269\u5c55\u90fd\u4e0d\u597d\u7528\uff0c\u5b9e\u5728\u4e0d\u77e5\u9053\u4e86\u3002

\u9700\u6c42\uff1a

\n
1. \u56fa\u5b9a\u8868\u5934
\n
2. \u53ef\u52a8\u6001\u6dfb\u52a0\u5217
\n
3. \u81ea\u9002\u5e94\u5217\u5bbd\uff0c\u53ef\u62d6\u52a8\u8c03\u6574\u5217\u5bbd
\n
4. \u8d85\u51fa\u90e8\u5206\u663e\u793a\u6a2a / \u7eb5\u5411\u6eda\u52a8\u6761
\n
5. \u5355\u51fb\u9009\u62e9\u6574\u884c\uff0cCtrl / Shift \u591a\u9009\uff0c\u53f3\u952e\u5f39\u51fa\u83dc\u5355
\n

\u5b9e\u9645\u573a\u666f\u662f\u8ba2\u5355\u7ba1\u7406\uff0c\u56e0\u6b64\u53ea\u9700\u8981\u5217\u8868\u89c6\u56fe\u3002

\u6709\u70b9\u50cf Winform \u7684 ListView \uff0c\u8bd5\u4e86\u4e0b\u8868\u683c\u5f88\u96be\u5b9e\u73b0\uff0c\u770b\u4e86\u4e0b OneDrive \u7528\u7684\u662f\u51e0\u4e2a div \uff0c\u6765\u95ee\u95ee V \u53cb\u6709\u6ca1\u6709\u73b0\u6210\u7684\u8f6e\u5b50\u3002

\u5982\u679c\u6ca1\u6709\u7684\u8bdd\u80fd\u8bf4\u8bf4\u600e\u4e48\u5b9e\u73b0\u6700\u5feb\u4e48\uff1f

Angular\u5f00\u53d1\u5c0f\u7a0b\u5e8f

\n
• \u901a\u8fc7\u4fee\u6539Angular\u5b9e\u73b0\u4f7f\u7528Angular\u5f00\u53d1\u5c0f\u7a0b\u5e8f
\n
• \u672c\u9879\u76ee\u5b9e\u73b0\u7684\u76ee\u7684\u5f88\u7b80\u5355\u4e5f\u5f88\u7eaf\u7cb9,\u5c31\u662f\u544a\u8bc9\u5927\u5bb6.\u6846\u67b6\u65e0\u9ad8\u4f4e,\u4f7f\u7528\u7684\u4eba,\u6709\u9ad8\u4f4e
\n

\u89c6\u9891\u7b80\u4ecb

\n
• https://www.bilibili.com/video/BV1wh411p7bB/
\n

\u5f00\u53d1\u6a21\u677f

\n
• https://github.com/wszgrcy/angular-miniprogram-template
\n

\u4fee\u6539\u5185\u5bb9

\n
• \nbuilder

  \n

  \u4fee\u6539\u7528\u4e8e\u652f\u6301\u81ea\u5b9a\u4e49\u6784\u5efa

  \n

  \n
\n
• \ncomponent \u7f16\u8bd1\u65f6

  \n

  \u901a\u8fc7\u63d0\u524d\u89e3\u6790\u83b7\u5f97\u6a21\u677f\u4e0e\u6837\u5f0f,\u8f6c\u6362\u4e3a\u5c0f\u7a0b\u5e8f\u6240\u9700\u7684

  \n

  \n
\n
• \n\u5168\u5c40\u53d8\u91cf

  \n

  \u7528\u6765\u652f\u6301ngZone\u4e0eAngular\u9ed8\u8ba4\u5168\u5c40\u5f15\u7528

  \n

  \n
\n
• \nplatform

  \n

  \u901a\u8fc7\u5b9e\u73b0\u81ea\u5b9a\u4e49\u7684 platform,\u7ed9\u4e88\u5c0f\u7a0b\u5e8f\u7684\u542f\u52a8\u4e0a\u4e0b\u6587\u652f\u6301

  \n

  \n
\n
• \nrenderFactory

  \n

  \u539f\u6e32\u67d3\u5de5\u5382\u652f\u6301\u7684\u662f dom \u6e32\u67d3,\u4f46\u662f\u5c0f\u7a0b\u5e8f\u4e0d\u9700\u8981

  \n

  \n
\n
• \n\u4e3b\u51fa\u53e3\u91cd\u5efa

  \n

  \u4e3b\u51fa\u53e3\u9884\u5148\u52a0\u8f7d\u76f8\u5173\u4f9d\u8d56,\u4e3a\u540e\u9762\u7684 page \u505a\u51c6\u5907

  \n

  \n
\n
• \n\u6587\u4ef6\u7cfb\u7edf\u76d1\u542c\u4fee\u6539

  \n

  \u9700\u8981\u5728\u9884\u5904\u7406\u7ed3\u675f\u65f6,\u6e05\u9664\u6587\u4ef6\u7f13\u5b58

  \n

  \n
\n

\u589e\u52a0\u5185\u5bb9

\n
• \n\u7ec4\u4ef6\u4e0e\u9875\u9762\u7684\u6ce8\u518c\u51fd\u6570

  \n

  \u53ea\u6709\u88ab\u6ce8\u518c,\u8fd8\u4f1a\u81ea\u52a8\u7684\u67e5\u8be2\u4f9d\u8d56\u5173\u7cfb\u4e0e\u751f\u6210

  \n

  \n
\n
• \n\u76f8\u5173\u751f\u547d\u5468\u671f\u7684\u4f20\u9012

  \n

  \u5c0f\u7a0b\u5e8f\u81ea\u5e26\u7684\u4e00\u4e9b\u751f\u547d\u5468\u671f

  \n

  \n
\n
• \n\u5c0f\u7a0b\u5e8f\u76f8\u5173 token.

  \n

  APP_TOKEN\u53ef\u4ee5\u83b7\u5f97 App \u5b9e\u4f8b\nCOMPONENT_TOKEN,PAGE_TOKEN\u53ef\u4ee5\u83b7\u5f97\u7ec4\u4ef6\u5bf9\u5e94\u7684\u5c0f\u7a0b\u5e8f\u7ec4\u4ef6\u5b9e\u4f8b

  \n

  \n
\n

\u5df2\u5b9e\u73b0\u5185\u5bb9

\n
• \u53d8\u66f4\u68c0\u6d4b
\n
• Input,Output
\n
• \u4f9d\u8d56\u6ce8\u5165
\n
• ng-content
\n
• \nngIf,ngSwitch,ngFor

  \n

  \u5bf9\u4e8e\u5176\u4ed6\u6307\u4ee4\u53ca\u81ea\u5b9a\u4e49\u6307\u4ee4,\u6682\u672a\u5b9e\u73b0

  \n

  \n
\n
• \u5c0f\u7a0b\u5e8f\u5927\u90e8\u5206\u529f\u80fd
\n

\u672a\u5b9e\u73b0

\u53ef\u5b9e\u73b0\u7684\u529f\u80fd

\n
• http
\n
• \u7ba1\u9053
\n
• \u975e\u7ed3\u6784\u578b\u6307\u4ee4
\n
• \u7ed3\u6784\u578b\u6307\u4ee4\u7684\u975e\u5f15\u7528\u4f20\u9012\u6216\u6709\u9650\u4f20\u9012
\n
• \n\u8def\u7531\u7684\u90e8\u5206\u5b9e\u73b0

  \n

  \u8def\u7531\u662f\u5426\u5b9e\u73b0\u4e3b\u8981\u770b\u5c0f\u7a0b\u5e8f\u7684\u4f7f\u7528\u573a\u666f\u9700\u4e0d\u9700\u8981\u8def\u7531\u8fd9\u4e2a\u4e1c\u897f

  \n

  \n
\n
• \u8868\u5355
\n
• \u81ea\u5b9a\u4e49\u7ec4\u4ef6
\n

\u4e0d\u53ef\u80fd\u5b9e\u73b0\u7684\u529f\u80fd

\n
• \n\u65e0\u9650\u5236\u7684\u7ed3\u6784\u578b\u6307\u4ee4

  \n

  \u9664\u975e\u6a21\u677f\u8fd0\u884c\u52a8\u6001\u6309\u9700\u52a0\u8f7d

  \n

  \n
\n

\u5176\u4ed6\u5e73\u53f0\u7684\u652f\u6301

\n
• \u76ee\u524d\u529f\u80fd\u5c1a\u672a\u5b8c\u5584,\u4e0d\u5bf9\u591a\u4f59\u7684\u5e73\u53f0\u505a\u652f\u6301
\n
• \u76ee\u524d\u4ec5\u652f\u6301\u5fae\u4fe1\u5c0f\u7a0b\u5e8f,\u4f46\u662f\u672a\u6765\u91cd\u6784\u5b8c\u5584\u540e,\u4f1a\u6dfb\u52a0\u5176\u4ed6\u5e73\u53f0\u7684\u5c0f\u7a0b\u5e8f\u652f\u6301
\n

\u51c6\u5907\u505a\u7684

component \u7684 template \u91cd\u5199

\n
• \u4e4b\u524d\u662f\u901a\u8fc7\u5b8c\u5168\u91cd\u5199\u5b9e\u73b0\u7684\u503c\u7ed1\u5b9a\u4e0e\u66f4\u65b0,\u4f46\u662f\u662f\u56e0\u4e3a\u6709\u4e00\u4e2a\u6280\u672f\u6ca1\u6cd5\u5b9e\u73b0\u6240\u4ee5\u624d\u91c7\u53d6\u70b9\u65b9\u6848.
\n
• \u76ee\u524d\u5df2\u7ecf\u53ef\u4ee5\u901a\u8fc7\u66ff\u6362\u8c03\u7528\u51fd\u6570\u5b9e\u73b0\u8fd9\u4e2a,\u6240\u4ee5\u91cd\u65b0 template
\n
• \u91cd\u5199\u540e\u5c06\u4f1a\u4f7f\u7ba1\u9053,\u8868\u5355,\u975e\u7ed3\u6784\u578b\u6307\u4ee4\u7684\u652f\u6301
\n

\u8bf7\u6559\u4e00\u4e0b\u5927\u4f6c\u4eec\uff0c \u6211\u73b0\u5728\u6709\u4e00\u4e2a\u60c5\u51b5\u662f\u8fd9\u6837\u7684\uff0c\u540e\u7aef\u6211\u7edf\u4e00 \u8fd4\u56de\u683c\u5f0f\u662f:

{\n \"status\": 200,\n \"msg: \"xxx success\",\n \"data\": any\n}\n

\u6211\u60f3\u901a\u8fc7 \u62e6\u622a\u5668 \u6216\u8005\u5728 service \u91cc\u9762\u5c06 status \u5224\u65ad\u597d\u4e86, \u7ed9 component \u7684\u6570\u636e\u5c31 \u4ec5\u662f\u4e0a\u9762\u7684 data, \u51fa\u9519\u5c31\u7ed9\u4e2a \u9ed8\u8ba4\u503c \u8fd9\u6837\u7684\u6548\u679c\uff0c\u4f46\u6211\u5b9e\u5728\u4e0d\u77e5\u9053\u600e\u4e48\u5b9e\u73b0\u4e86\uff0c \u8fd8\u8bf7\u5927\u5bb6\u6307\u70b9\u4e00\u4e8c\u3002

\u521a\u5f00\u59cb\u770b\u524d\u7aef\u6846\u67b6\uff0c\u5bf9\u670d\u52a1\u7aef\u6e32\u67d3(SSR)\u5f88\u611f\u5174\u8da3\u3002\n\u60f3\u95ee\u4e00\u4e0b\u54ea\u4f4d\u4ec1\u5144\u80fd\u5426\u89e3\u7b54\u4e00\u4e0b\u8fd9\u4e2a\u95ee\u9898\uff0c\u5728\u542f\u52a8 SSR \u540e

npm run dev:ssr\n

Angular \u662f\u600e\u4e48\u533a\u5206\u54ea\u4e00\u90e8\u5206\u7684 JS \u5728\u6d4f\u89c8\u5668\u7aef\u6267\u884c\uff0c\u54ea\u4e00\u90e8\u5206\u5728 Server \u7aef\u6267\u884c\u7684\uff1f

\u5f88\u53ef\u80fd\u662f\u6211\u4f5c\u4e3a\u540e\u7aef\u7a0b\u5e8f\u5458\u5bf9 SSR \u7684\u8ba4\u8bc6\u5b58\u5728\u504f\u9887\u3002\u591a\u591a\u6307\u6559\uff01

https://github.com/wszgrcy/ngx-center

\n
• \u672c\u6765\u7528 ng \u7684\u4eba\u5c31\u5c11...\u4f30\u8ba1\u4e86\u89e3\u6211\u8fd9\u4e2a\u7684\u5c31\u66f4\u5c11\u4e86.
\n
• \u4e3b\u8981\u662f\u7528\u6765\u89e3\u51b3\u5f53\u9879\u76ee\u8db3\u591f\u5927\u65f6,\u6253\u5305\u65f6\u95f4\u81a8\u80c0,\u7533\u8bf7\u5185\u5b58\u81a8\u80c0\u7684\u95ee\u9898
\n
• \u539f\u7406\u5c31\u662f\u5148\u6253\u5305\u4f9d\u8d56(dll),\u518d\u6253\u5305\u4e3b\u9879\u76ee,\u540c\u65f6\u4e3b\u9879\u76ee\u5b9e\u73b0\u4e86\u5185\u7f6e\u7684 dll,\u7136\u540e\u6253\u5305\u5b50\u9879\u76ee,\u5b50\u9879\u76ee\u53ef\u4ee5\u4f7f\u7528\u5230\u5185\u7f6e\u7684 dll \u6765\u4fdd\u6301\u4f4f\u5404\u79cd\u4f9d\u8d56\u6ce8\u5165...
\n
• \u89c9\u5f97\u6709\u5565\u7f3a\u70b9,\u4e0d\u8db3\u5c3d\u7ba1\u6765\u63d0\u5427
\n

https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49

\u867d\u7136\u516c\u53f8\u7528 vue\uff0c\u4f46\u662f ng \u81ea\u5df1\u8fd8\u662f\u575a\u6301\u5b66\uff0c\u90fd\u8bf4 ng \u96be\uff0cvue \u641e\u5de5\u7a0b\u5316\u4e5f\u662f\u641e\u6b7b\u6211\u4e86\ud83d\ude02\uff0c\u4e0d\u8fc7 vite \u5f00\u53d1\u662f\u771f\u723d

\u624d\u5b66\u4e09\u5929\uff0c\u4e5f\u4e0d\u77e5\u9053\u8bf4\u7684\u5bf9\u4e0d\u5bf9

\n
• \u6a21\u677f\u8bed\u6cd5\u597d\u5b66\uff0c\u6bd5\u7adf vue \u662f\u501f\u9274 angular \u7684\uff1b
\n
• \u5206 module \u601d\u8def\u4e5f\u80fd\u7406\u89e3\uff0c\u4f46\u662f\u4e00\u5206\u6a21\u5757\uff0c\u7ec4\u4ef6\u7684\u6587\u4ef6\u3001\u8def\u7531\u7684\u6587\u4ef6\u7b49\u90fd\u5f97\u5f80\u91cc\u9762\u52a0\uff0c\u8fd9\u4e2a\u4e0d\u662f\u52a0\u5927\u5de5\u4f5c\u91cf\u561b\uff1f Vue \u3001React \u4e5f\u4e0d\u9700\u8981\u4e00\u4e2a\u4e13\u95e8\u7684\u6587\u4ef6\u6765\u7ef4\u62a4\u554a\u3002
\n
• \u7f51\u7edc\u8bf7\u6c42\u6a21\u5757\u80fd\u4e0d\u80fd\u7528 axios \u7b49\u7b2c\u4e09\u65b9\u7f51\u7edc\u8bf7\u6c42\u5e93\uff0c\u8fd9\u4e2a rxjs \u5b9e\u5728\u5b66\u4e0d\u4e0b\u53bb\uff0c\u7528 axios\uff0caysnc \u3001await \u4e0d\u66f4\u7b80\u5355\uff1f
\n
• \u6ce8\u5165\u8fd9\u5757\uff0c\u6211\u90fd import \u8fdb\u6765\u4e86\uff0c\u8fd8\u5f97\u5728 provide \u91cc\u9762\u6ce8\u5165\uff0c\u9ebb\u70e6\u6b7b\u4e86\uff1b
\n
• \u8fd8\u6709\u4ee4\u724c\u8fd9\u5757\uff0c\u6211\u76f4\u63a5\u5199\u4e2a\u5e38\u91cf\uff0cimport \u8fdb\u6765\uff0c\u4e0d\u66f4\u7b80\u5355\uff1f
\n
• 4 \u548c 5 \u5176\u5b9e\u662f\u540c\u4e00\u4e2a\u95ee\u9898\uff0cimport \u8fdb\u6765\u4e86\uff0c\u8fd8\u5f97\u5199\u4e00\u4e9b\u5176\u4ed6\u4ee3\u7801\u624d\u53ef\u4ee5\u4f7f\u7528\uff0c\u76f4\u63a5\u7528\u4e0d\u884c\u554a\uff1f
\n
• \u7f16\u8bd1\u592a\u6162\uff0c\u4e5f\u4e0d\u77e5\u9053\u4ec0\u4e48\u4ee3\u7801\u7f16\u8f91\u5668\u9002\u5408 angular \u5f00\u53d1\uff0c\u53cd\u6b63 vscode \u7ecf\u5e38\u5361\u6b7b\uff0c\u4e0d\u8fc7\u6211\u7535\u8111\u4e5f\u633a\u8001\u7684\u4e86
\n

\u5c06\u6765\u6211\u6211\u6765\u7528 angular \u5f00\u53d1\u7684\u8bdd\uff0c\u4f30\u8ba1\u601d\u8def\u7684\u8bdd\uff0c\u4e0d\u4f1a\u50cf angular \u4f20\u7edf\u9879\u76ee\u90a3\u6837\u5404\u79cd\u6ce8\u5165\uff0c\u5e94\u8be5\u8fd8\u662f\u548c vue \u3001react \u5dee\u4e0d\u591a\u5427\uff0cangular \u81ea\u5e26\u7684\u5e93\u4e0d\u7528\uff0c\u5404\u79cd\u7b2c\u4e09\u65b9\u8bf7\u6c42\u5e93\uff0cimport \u3001export\uff0c\u80fd\u4e0d\u6ce8\u5165\u5c31\u4e0d\u6ce8\u5165\u4e86\uff0c\u7ef4\u62a4\u4e0b module \u5c31\u597d\u3002

\u56fd\u5916\u7248\u672c\u4e5f\u5c11\u5f97\u53ef\u601c\uff0c\u56fd\u5185\u7684\u4e66\u7c4d\u53ea\u5230\u7248\u672c 7 \u3002 \u73b0\u5728\u90fd 11 \u4e86\u2026

\u4eca\u5929\u624d\u770b\u5230\u591a\u4e86\u4e00\u4e2a 10 \u7684\u4e66\u2026\uff0c\u4ed4\u7ec6\u770b\u76ee\u5f55\uff0c\u51d1\u5b57\u6570\u7684\u5acc\u7591\u4e5f\u5f88\u5927

ps:\u8fd8\u662f\u5f88\u559c\u6b22 ng \u8fd9\u79cd\u5927\u4e00\u7edf\u7684\u67b6\u5b50\uff0c\u7701\u5fc3\u597d\u591a\u2026

\u4e4b\u524d\u51e0\u6b21\u5347\u7ea7 Angular \u7248\u672c\u7684\u7ecf\u5386\u603b\u4f53\u8fd8\u7b97\u987a\u5229\uff0c\u56e0\u6b64\u539f\u672c\u5bf9 Angular 8 \u5347\u7ea7\u5230 9 \u7684\u8fc7\u7a0b\u4e5f\u6bd4\u8f83\u4e50\u89c2\u3002\u867d\u7136 Angular 9 \u5f00\u59cb\u5c06\u9ed8\u8ba4\u542f\u52a8\u65b0\u7684 Angular Ivy\uff0c\u4f46\u8003\u8651\u5230\u5df2\u7ecf\u6b63\u5f0f\u53d1\u5e03\u6570\u6708\uff0c\u751a\u81f3 Android 10 \u90fd\u5df2\u95ee\u4e16\uff0c\u81ea\u5df1\u7684\u9879\u76ee\u53c8\u6ca1\u6709\u7528\u7279\u522b\u51b7\u95e8\u7684\u4f9d\u8d56\uff0c\u4f9d\u7136\u6ca1\u6709\u62c5\u5fc3\u4f1a\u9047\u5230\u95ee\u9898\u3002\u53ef\u60dc\u58a8\u83f2\u5b9a\u5f8b\u65e0\u5904\u4e0d\u5728\uff0c\u6700\u540e\u8fd8\u662f\u82b1\u4e86\u6bd4\u60f3\u8c61\u4e2d\u66f4\u591a\u7684\u65f6\u95f4\u5b8c\u6210\u5347\u7ea7\u3002

\u4e3a\u6b64\uff0c\u672c\u6587\u7b80\u5355\u4ecb\u7ecd\u81ea\u5df1\u5728\u4ece Angular 8 \u5347\u7ea7\u5230 9 \u6700\u7ec8\u5230 10 \u65f6\u9047\u5230\u7684\u95ee\u9898\u53ca\u76f8\u5e94\u7684\u89e3\u51b3\u65b9\u6cd5\uff0c\u4ec5\u4f9b\u53c2\u8003\u3002

\u9996\u5148\uff0cAngular \u5b98\u65b9\u6587\u6863\u63d0\u4f9b\u4e86\u8be6\u7ec6\u7684\u5347\u7ea7\u8bf4\u660e\uff0c\u5efa\u8bae\u5728\u5347\u7ea7\u9879\u76ee\u524d\u9996\u5148\u901a\u89c8\u76f8\u5173\u6587\u6863\uff0c\u4e86\u89e3\u53ef\u80fd\u5b58\u5728\u7684\u95ee\u9898\u3002\u53ef\u4ee5\u4ece\u4e0b\u9762\u7684\u94fe\u63a5\u627e\u5230\u5347\u7ea7\u5230 Angular 10 \u7684\u6700\u65b0\u4fe1\u606f\u3002

https://angular.io/guide/updating-to-version-10

\u4e0b\u9762\u662f\u81ea\u5df1\u5728\u5347\u7ea7\u65f6\u5b9e\u9645\u64cd\u4f5c\u7684\u51e0\u4e2a\u4e3b\u8981\u6b65\u9aa4\uff1a

\u66f4\u65b0 Angular 8 \u76f8\u5173\u4f9d\u8d56\u81f3\u6700\u65b0\u7248

\n
• ng update @angular/core@8 @angular/cli@8
\n
• ng build \u2013prod \u2013aot
\n
• \u786e\u8ba4\u53d8\u66f4
\n

\u66f4\u65b0 @azure/msal-angular \u81f3\u6700\u65b0\u7248 1.0.0

\n
• \u5b89\u88c5 1.0.0 \u7248\u5e76\u4e3a\u65b0\u7248\u7684\u63a5\u53e3\u53d8\u5316\u4fee\u6539\u4ee3\u7801\uff08 1 \uff09
\n
• ng build \u2013prod \u2013aot
\n
• \u786e\u8ba4\u53d8\u66f4
\n

\u5347\u7ea7\u81f3 Angular 9\uff0c\u68c0\u67e5\u5e76\u4e4e\u7565\u4e00\u4e9b\u4f9d\u8d56\u7248\u672c\u95ee\u9898

\n
• ng update @angular/core@9 @angular/cli@9 \u2013force \uff08 2 \uff09
\n
• ng build \u2013prod \u2013aot
\n
• \u786e\u8ba4\u53d8\u66f4
\n
• \u5347\u7ea7 Angular Material
\n
• ng update @angular/material@9
\n
• \u68c0\u67e5 Angular Material \u5f15\u7528\u95ee\u9898\uff08 3 \uff09
\n
• \u589e\u52a0 ngcc \u4f5c\u4e3a postinstall \u811a\u672c\uff08 4 \uff09
\n
• ng build \u2013prod \u2013aot
\n
• \u786e\u8ba4\u53d8\u66f4
\n
• ng add @angular/localize \uff08 5 \uff09
\n
• ng serve \u2013ssl \u542f\u52a8\u5e76\u68c0\u67e5\u5e94\u7528\u57fa\u672c\u529f\u80fd
\n

\u5347\u7ea7\u81f3 Angular 10\uff0c\u68c0\u67e5\u5e76\u4e4e\u7565\u4e00\u4e9b\u4f9d\u8d56\u7248\u672c\u95ee\u9898

\n
• ng update @angular/core @angular/cli \u2013force
\n
• \u4e34\u65f6\u624b\u6bb5\u89e3\u51b3 ngx-restangular \u7f16\u8bd1\u95ee\u9898\uff08 6 \uff09
\n
• ng build \u2013prod \u2013aot
\n
• \u786e\u8ba4\u53d8\u66f4
\n
• ng update @angular/material
\n
• ng build \u2013prod \u2013aot
\n
• \u786e\u8ba4\u53d8\u66f4
\n
• ng serve \u2013ssl \u542f\u52a8\u5e76\u68c0\u67e5\u5e94\u7528\u57fa\u672c\u529f\u80fd
\n

\u5927\u529f\u544a\u6210

\u5bf9\u4e0a\u8ff0\u6b65\u9aa4\u7684\u4e00\u4e9b\u8be6\u89e3\uff0c\u8bf7\u79fb\u6b65\u6211\u7684\u535a\u5ba2\u6587\u7ae0\u3002

\u5e0c\u671b\u80fd\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\u3002

\u60f3\u5c1d\u8bd5angular, \u4f46\u662f\u611f\u89c9angular\u7684\u6a21\u677f\"\u4e0d\u591f typescript\", \u4f8b\u5982\u5b98\u7f51\u4e0a\u7684\u4e00\u6bb5template:

<h2>Products</h2>\n\n<div *ngFor=\"let product of products\">\n\n <h3>\n {{ product.name }}\n </h3>\n\n</div>\n

\u5355\u7eaf\u770b\u8fd9\u4e2a\u6a21\u677f, \u5b8c\u5168\u770b\u4e0d\u51fa\u6765product\u7684\u7c7b\u578b, \u540c\u65f6typescript\u548ceslint\u4e5f\u6ca1\u80fd\u529b\u7ba1\u63a7\u8fd9\u4e2a\u6a21\u677f\u4e2d\u7684\u53d8\u91cf\u3002\u76f8\u5bf9\u7684\u6765\u8bf4, \u5728react\u7684tsx\u4e2d, typescript\u548ceslint\u662f\u80fd\u591f\u5bf9\u53d8\u91cf\u8fdb\u884c\u5145\u5206\u7684\u9759\u6001\u5206\u6790\u7684\u3002

\u65e0\u610f\u5f15\u6218, \u786e\u5b9e\u5e0c\u671b\u8bd5\u8bd5angular, \u53ef\u662f, \u662f\u6211\u4f7f\u7528\u7684\u59ff\u52bf\u4e0d\u5bf9\u5417?

\u76f8\u5173\u77e5\u4e4e\u95ee\u9898

\u4e11\u8bdd\u8bf4\u5728\u524d\u5934\uff0c\u5982\u679c\u6709\u9519\u8bef\uff0c\u6b22\u8fce\u65a7\u6b63\uff0c\u4e0d\u8981\u73bb\u7483\u5fc3\u3002

\u8bf4\u5b9e\u8bdd\u867d\u7136\u5728\u7075\u96c0\u4e91\u7528 Angular \u505a\u7740\u4f01\u4e1a\u7ea7\u7684\u5e94\u7528\uff0c\u4f46\u6211\u4e2a\u4eba\u662f\u5f88\u4e0d\u8ba4\u53ef\u5b83\u5927\u800c\u5168\u7684\u54f2\u5b66\u7684\uff0c\u867d\u7136\u6211\u4e5f\u5728 Angular \u76f8\u5173\u4e13\u680f\u53d1\u8fc7\u51e0\u7bc7\u6c34\u6587\uff0c\u4f46\u662f\u4e60\u60ef\u4e86 React \u548c Vue \u300e\u7eaf\u7cb9\u300f\u6846\u67b6\u7684\u54f2\u5b66\u540e\u4f9d\u65e7\u5f88\u4e0d\u559c\u6b22\uff08\u4e0d\u559c\u52ff\u55b7\uff09\uff0c\u4f46\u6211\u5f88\u611f\u8c22 Angular \u5e26\u6211\u5165\u4e86 rxjs \u7684\u5751\uff0c\u4ec5\u6b64\u800c\u5df2\u3002

Angular \u7684\u6a21\u5757\u7cfb\u7edf\u548c bundler \u90fd\u662f\u81ea\u5df1\u641e\u5f97\u4e00\u5957\u6807\u51c6\u300e\u9ed1\u76d2\u300f\uff0c\u4e5f\u5c31\u662f\u8bf4\u6ca1\u529e\u6cd5\u5728\u5404\u4e2a\u6846\u67b6\u76f4\u63a5\u5e73\u6ed1\u5730\u5207\u6362\uff0c\u6bd4\u5982 http \u8bf7\u6c42\u5e93\uff0c\u5176\u4ed6\u6846\u67b6\u90fd\u53ef\u4ee5\u968f\u4fbf\u9009\uff0c\u4e00\u822c\u6bd4\u8f83\u901a\u7528\u7684\u662f axios\uff0c\u8fd8\u6709 axios-observable \u652f\u6301 Observable API\uff0c\u4f46 Angular \u4e3a\u4e86\u66f4\u597d\u5730\u652f\u6301\u81ea\u5df1\u7684 DI \u53c8\u641e\u4e86\u4e00\u4e2a @angular/common/http \uff0c\u5176\u5b9e\u5927\u53ef\u4ee5\u628a DI \u90e8\u5206\u62bd\u6210\u4e00\u4e2a\u5e93\u561b\uff08\u4ee5\u524d\u662f\u5355\u72ec\u62bd\u4e86\u4e00\u4e2a DI \u5305\u7684\uff0c\u540e\u9762\u53c8\u88ab\u5408\u5230 core \u91cc\u4e86\uff09\uff0c\u8fd9\u6837\u6240\u6709\u6846\u67b6\u90fd\u80fd\u4f7f\u7528\u4f60\u8fd9\u4e2a DI \u7cfb\u7edf\uff0c\u5c82\u4e0d\u7f8e\u54c9\uff1fts \u6253\u5305\u975e\u8981\u6574\u51fa\u4e00\u4e2a ngfactory \u7684\u6982\u5ff5\uff0c\u8fde\u57fa\u672c\u7684\u5e93\u6253\u5305\u90fd\u8981\u6709\u4e2a\u4e13\u95e8\u7684 ng-packagr\uff0c\u771f\u5fc3\u53d7\u4e0d\u4e86\uff0c\u5b66\u4f1a rollup/webpack \u5df2\u7ecf\u5f88\u4e0d\u5bb9\u6613\u4e86\uff0c\u6362\u4e2a\u524d\u7aef\u6846\u67b6\u8fd8\u8981\u5b66\u8fd9\u4e2a\uff1f\uff1f\uff1f\u8fd8\u6709\u5404\u79cd NgModule \u7684\u62a5\u9519\u4fe1\u606f\u5b9e\u5728\u4e0d\u5fcd\u76f4\u89c6\uff0c\u7528\u4e86 @angular/router \u540e\u5b83\u8fd8\u76f4\u63a5\u7ed9\u6211\u9000\u51fa\u5230\u4e0a\u4e00\u4e2a\u65e0\u62a5\u9519\u7684\u9875\u9762\u4e86\uff0c\u4e5f\u5c31\u662f\u8c03\u8bd5\u7684\u65f6\u5019\u6211\u8fd8\u5f97\u518d\u70b9\u4e00\u6b21\u4fdd\u5b58\u9875\u9762\u7684\u5165\u53e3\uff0c\u5982\u679c\u8fd8\u6709\u9519\uff0c\u8fd8\u5f97\u7ee7\u7eed\u6765\uff1f\uff01

\u8bf4\u5230\u8fd9\u91cc\u5b9e\u5728\u4e0d\u5f97\u4e0d\u518d\u5410\u69fd Angular \u5bf9 hmr(hot module reload) \u7684\u652f\u6301\u7b80\u76f4\u5f31\u7206\u4e86\uff0c\u751a\u81f3\u53ef\u4ee5\u8bf4\u662f\u300e\u5783\u573e\u300f\uff0c\uff08\u6211\u7684\u4e2a\u4eba\u4f53\u9a8c\u6765\u8bf4 Vue \u7684 hmr \u652f\u6301\u662f\u6700\u597d\u7684\uff09\uff0c\u5f00\u53d1\u4e2a\u65b0\u529f\u80fd\u9875\u9762\u4e0d\u505c\u5730 reload, reload, reload... \u6211\u5df2\u7ecf\u653e\u5f03\u6323\u624e\u4e86\u3002

\u6709\u4eba\u4f1a\u8bf4\u8fd9\u4e9b @angular/cli \u90fd\u5e2e\u4f60\u89e3\u51b3\u4e86\u554a\uff0c\u8fd9\u8fd8\u662f\u521a\u521a\u300e\u9ed1\u76d2\u300f\u7684\u95ee\u9898\uff0c\u8fd9\u4e5f\u662f\u6211\u81ea\u5df1\u5199\u9879\u76ee\u90fd\u662f\u4e0d\u7528\u4ec0\u4e48\u6240\u8c13\u7684 cli \u7684\uff0c\u800c @angular/cli \u91cc\u6211\u53ea\u7528\u4f1a\u7528\u4e24\u4e2a\u547d\u4ee4\uff1ang serve \u548c ng build\uff0c\u800c\u4e14\u662f\u5728\u7528 @alauda/custom-webpack \u7684\u524d\u63d0\u4e0b\uff0c\u56e0\u4e3a\uff1a\u6211\u538b\u6839\u513f\u4e0d\u9700\u8981\u9ed8\u8ba4\u7684\u90a3\u5957\u6253\u5305\u914d\u7f6e\uff0c\u5bf9\u6211\u4eec\u7684\u751f\u4ea7\u529b\u53cd\u800c\u662f\u963b\u788d\u3002\u4e3a\u4ec0\u4e48 Angular \u4e0d\u80fd\u5f80\u548c\u5176\u4ed6\u6846\u67b6\u4e00\u6837\u7eaf\u6846\u67b6\u7684\u65b9\u5411\u8d70\u5462\uff1f\u90a3\u4e9b\u4ec0\u4e48 ng lint/test \u4e4b\u7c7b\u7684\u547d\u4ee4\u771f\u662f\u9189\u4e86\uff0c\u8fd9\u4e0d\u662f\u8131\u88e4\u5b50\u653e\u5c41\u5417\uff1f\u81ea\u5df1\u52a0\u4e2a lint/test \u811a\u672c\u7684\u4e8b\u513f\u6211\u4e3a\u4ec0\u4e48\u8981\u53bb\u5355\u72ec\u5b66\u554a\uff1f\u975e\u5f97\u5728angular.json \u91cc\u914d\u7f6e\uff1f\u8bf4\u5230 angular.json \u5c31\u66f4\u53ef\u7b11\u4e86\uff0c\u8fde js \u683c\u5f0f\u90fd\u4e0d\u652f\u6301\uff1f\u6bcf\u4e2a\u516c\u53f8\u4e0d\u540c\u9879\u76ee\u90fd\u8981 copy/paste \u5417\uff1f\u8fd9\u4e5f\u662f\u4e3a\u4ec0\u4e48\u6211\u5728\u7075\u96c0\u4e91\u641e\u4e86 @alauda/custom-webpack \u7684\u539f\u56e0\uff0c\u56e0\u4e3a\u81ea\u5b9a\u4e49 webpack \u914d\u7f6e\u5728\u516c\u53f8\u5185\u90e8\u9879\u76ee\u91cc\u4e5f\u662f\u901a\u7528\u7684\u554a\u3002

\u6211\u4eec\u518d\u6765\u770b\u4e00\u4e2a css \u6253\u5305\u7684\u95ee\u9898\uff0cAngular \u7684\u65b9\u6848\u662f\u628a css \u6587\u4ef6\u5185\u5bb9\u5904\u7406\u5b8c\u8f6c\u5316\u6210\u5b57\u7b26\u4e32\uff0c\u7136\u540e\u8fd0\u884c\u65f6\u7531 @angular/core \u8fdb\u884c\u63d2\u5165\uff0c\u8fd9\u6709\u4ec0\u4e48\u95ee\u9898\uff1f\u95ee\u9898\u5927\u4e86\uff0c\u6bd4\u5982 A/B \u7ec4\u4ef6\u90fd\u5728 styleUrls \u91cc\u5f15\u7528\u4e86 common.css \u90a3\u4e48\u6700\u7ec8\u5b83\u4f1a\u628a common inline \u5230 A \u548c B \u4e0a\uff0c\u4e5f\u5c31\u662f css \u5185\u5bb9\u662f\u91cd\u590d\u7684\uff0c\u4ec0\u4e48 vue-style-loader \u5b83\u4e0d\u9999\u5417\uff1f\u660e\u660e\u662f bundler \u8be5\u505a\u7684\u4e8b\u60c5\u4e3a\u4ec0\u4e48\u8981\u8dd1\u5230\u6846\u67b6\u5c42\u53bb\u505a\uff1f\uff1f\uff1f

\u8fd8\u6709\u4e4b\u524d\u5439 JIT \u5230 AOT \u4f18\u5316\u7684\u4e8b\u513f\uff0c\u4f60\u770b vue \u5439\u8fc7\u5417\uff1fvue/vue-loader \u4e00\u76f4\u90fd\u662f\u539f\u751f\u652f\u6301\u6240\u8c13\u7684\u300eAOT\u300f\u7684\uff0c\u5230\u4e86 Angular \u8fd9\u513f\u5c31\u53d8\u6210\u4e86\u5927\u4f18\u5316\u4e86\uff0c\u800c\u4e14\u6240\u6709\u76f8\u5173\u5e93\u548c App \u90fd\u8981\u505a\u4e00\u4e9b\u5fc5\u8981\u7684\u4fee\u6539\u624d\u80fd\u652f\u6301 AOT\uff0c\u800c\u4e14\u8fd9\u4e2a AOT \u5462\u8fd8\u6709\u5404\u79cd\u4e71\u4e03\u516b\u7cdf\u7684\u9650\u5236\uff0c\u4e00\u4e0d\u5c0f\u5fc3\u5c31\u662f build error \u8bf4\u4ec0\u4e48\u54ea\u91cc\u54ea\u91cc\u4e0d\u652f\u6301\u7bad\u5934\u51fd\u6570\u3001\u54ea\u91cc\u54ea\u91cc\u5f97\u628a\u53d8\u91cf\u5bfc\u51fa\u53bb\uff0c\u53ef\u8fd9\u4e9b JIT \u7684\u65f6\u5019\u660e\u660e\u90fd\u662f\u597d\u597d\u7684\u3002\u5bf9\u4e86\uff0cJIT \u548c AOT \u7684\u53d8\u66f4\u68c0\u6d4b\u6b21\u6570\u8fd8\u662f\u7b56\u7565\u597d\u50cf\u8fd8\u4e0d\u592a\u4e00\u6837\uff0c\u4e0a\u6b21 ngChina \u7684\u65f6\u5019\u6709\u5609\u5bbe\u6f14\u793a\u4e86\u4e00\u4e0b\uff0c\u8fd9\u771f\u4e0d\u662f\u529d\u9000\u5417\uff1f

\u518d\u6765\uff0cAngular \u7684\u7ef4\u62a4\u8005\u4eec\u4f3c\u4e4e\u90fd\u559c\u6b22\u81ea\u5df1\u73a9\u513f\u81ea\u5df1\u7684\uff0c\u8fde i18n \u65b9\u6848\u5b83\u90fd\u5e2e\u4f60\u5185\u7f6e\u4e86\uff0c\u5f53\u7136\u6211\u80af\u5b9a\u662f\u4e0d\u7528\u7684\uff0c\u56e0\u4e3a\u548c\u5176\u4ed6\u6846\u67b6\u7684\u4f7f\u7528\u65b9\u5f0f\u5dee\u5f02\u592a\u5927\uff0c\u5b9e\u5728\u8be1\u5f02\u3002\u6211\u4eec\u4e4b\u524d\u662f\u7528\u7684 @ngrx/translste \uff0c\u4eca\u5e74\u6211\u300e\u4e8c\u8fdb\u5bab\u300f\u56de\u6765\u5c31\u628a\u8fd9\u90e8\u5206\u7cbe\u7b80\u91cd\u5199\u4e86\uff0c\u53ea\u4fdd\u7559\u5e76\u5b9a\u5236\u6211\u4eec\u81ea\u5df1\u9700\u8981\u7684\u4e1c\u897f\u3002\u4e5f\u5c31\u662f\u8bf4\u5b98\u65b9\u5185\u7f6e\u7684\u65b9\u6848\u5b83\u4e0d\u4e00\u5b9a\u662f\u6700\u597d\u7684\u6216\u8005\u8bf4\u662f\u5bf9\u6240\u6709\u4eba\u90fd\u9002\u7528\u7684\u3002

\u6700\u540e\u5462\uff0c\u518d\u8bf4\u8bf4\u51e0\u4e2a\u6846\u67b6\u5bf9 SSR \u7684\u652f\u6301\uff0cVue \u662f\u6709\u5b98\u65b9\u6307\u5bfc\u7684\uff0cReact \u63d0\u4f9b\u4e86\u57fa\u7840\u80fd\u529b\uff0c\u4f46\u662f\u5177\u4f53\u600e\u4e48\u73a9\u513f\u5168\u51ed\u793e\u533a\uff0cAngular\u6211\u611f\u89c9\u662f\u5bf9\u8fd9\u4e00\u5757\u513f\u4e0d\u4e0a\u5fc3\u7684\uff0c\u597d\u50cf\u5230\u73b0\u5728\u90fd\u53ea\u6709 express \u76f8\u5173\u7684\u6307\u5bfc\uff0c\u4e0d\u8fc7\u6bd5\u7adf\u76ee\u6807\u662f\u300e\u4f01\u4e1a\u7ea7\u5e94\u7528\u300f\u561b\uff0c\u57fa\u672c\u662f\u4e0d\u9700\u8981\u8003\u8651 SEO \u95ee\u9898\u3002\u90a3\u65e2\u7136 Angular \u662f\u66f4\u9762\u5411\u4f01\u4e1a\u7ea7\u5e94\u7528\u7684\uff0c\u90a3\u4e48\u4e2a\u4eba\u5e94\u7528\u5c31\u6ca1\u5fc5\u8981\u9009\u5b83\u4e86\u561b\u3002\u90a3\u65e2\u7136\u6211\u4e2a\u4eba\u5e94\u7528\u90fd\u6ca1\u6709\u7528\u8fc7 Angular \u6211\u600e\u4e48\u6562\u5728\u516c\u53f8\u9879\u76ee\u91cc\u53bb\u7528\u5462\uff1f\uff08\u6b64\u5904\u624b\u52a8\u72d7\u5934\uff09

\u6240\u4ee5\u50cf React \u548c Vue \u8fd9\u79cd\u7684\u8f7b\u91cf\u7ea7\u6846\u67b6\u624d\u4f1a\u66f4\u6d41\u884c\uff0c\u56e0\u4e3a\u5b83\u4eec\u624d\u4ee3\u8868\u4e86\u81ea\u7531\uff0c\u800c\u6211\u548c\u5f88\u591a\u4eba\u4e00\u6837\u4e0d\u559c\u6b22\u88ab\u675f\u7f1a\uff0c\u66f4\u4f55\u51b5\u53ea\u662f\u4e00\u4e2a\u524d\u7aef\u6846\u67b6\uff0c\u6240\u4ee5\u6211\u7684\u4e2a\u4eba\u9879\u76ee\u662f\u7edd\u4e0d\u4f1a\u8003\u8651\u7528 Angular \u7684\u3002\u800c\u516c\u53f8\u7684\u9879\u76ee\uff0c\u5f53\u521d\u9009\u62e9 Angular \u7684\u5927\u54e5\u5df2\u7ecf\u540e\u6094\u5e76\u79bb\u804c\u53bb\u5199 React \u4e86\uff0c\u800c\u73b0\u5728\u7684\u6211\u4eec\u8fd9\u4e9b\u63a5\u76d8\u4fa0\u8fd8\u5c06\u7ee7\u7eed\u4f7f\u7528\uff0c\u6bd5\u7adf\u5386\u53f2\u5305\u88b1\u5c3e\u5927\u4e0d\u6389\u3002\u4f46\u6211\u4ecd\u7136\u8981\u611f\u8c22 Angular \u5e26\u6211\u8d70\u5165 Observable \u7684\u4e16\u754c\uff0c\u6b63\u5982 @\u5f90\u98de \u6240\u8bf4\uff0c\u6211\u76f8\u4fe1 React/Vue \u793e\u533a\u7ecf\u8fc7 hooks \u7684\u6d17\u793c\u4e5f\u53ef\u80fd\u4f1a\u62e5\u62b1\u5929\u7136\u7ec4\u5408\u7684 Observable\u3002

\u5199\u7740\u5199\u7740\u597d\u50cf\u53d8\u6210\u4e86\u62a8\u51fb Angular \u7684\u6587\u7ae0\uff0c\u4f46\u5176\u5b9e\u4e0d\u662f\uff0c\u841d\u535c\u9752\u83dc\u5404\u6709\u6240\u7231\uff0c\u6709\u4eba\u559c\u6b22\u6846\u67b6\u7684\u7ea6\u675f\uff0c\u8ba9\u4e0d\u592a\u4f1a\u5199\u4ee3\u7801\u7684\u4eba\u4e5f\u80fd\u5199\u51fa\u4e0d\u90a3\u4e48\u5dee\u7684\u4ee3\u7801\uff0c\u800c\u6211\u4e2a\u4eba\u559c\u6b22\u81ea\u7531\u7684\u4ee3\u7801\uff0c\u8fd9\u6837\u624d\u80fd\u663e\u793a\u51fa\u6211\u7684\u67b6\u6784\u80fd\u529b\u4e0d\u662f\uff1f\uff08\u7ee7\u7eed\u72d7\u5934\uff09

\u672c\u6587\u9996\u53d1\u4e8e \u77e5\u4e4e\u4e13\u680f - 1stG \u5168\u6808\u4e4b\u8def

\u5728\u63a5\u89e6 Angular \u540e\uff0c\u8fd9\u4e9b\u5e74\u5de5\u4f5c\u4e1a\u4f59\u4e5f\u7528 Angular \u505a\u4e86\u82e5\u5e72\u5b9e\u9645\u9879\u76ee\u3002\u4e0d\u8fc7\uff0c\u7531\u4e8e Angular \u5728\u56fd\u5185\u7684\u6d41\u884c\u5ea6\u4e0d\u9ad8\uff0c\u5404\u79cd\u539f\u521b\u5185\u5bb9\u548c\u53c2\u8003\u8d44\u6599\u4e5f\u76f8\u5bf9\u8f83\u5c11\u3002\u867d\u7136\u7f51\u7edc\u4e0a\u4e5f\u80fd\u627e\u5230\u5404\u79cd\u5404\u6837\u7684\u6280\u672f\u6587\u7ae0\uff0c\u5b98\u65b9\u7684\u6587\u6863\u4e5f\u5f88\u5168\u9762\uff0c\u4f46\u603b\u7684\u6765\u8bb2\uff0c\u4fe1\u606f\u8fd8\u662f\u6709\u4e9b\u5206\u6563\u3002

\u5f88\u60ed\u6127\uff0c\u51e0\u5e74\u91cc\u6ca1\u6709\u505a\u4ec0\u4e48\u7279\u522b\u6709\u6280\u672f\u542b\u91cf\u7684\u5de5\u4f5c\u3002 \u53ea\u662f\u63d0\u70bc\u51fa\u4e00\u4e2a\u5f88\u57fa\u7840\u7684\u6a21\u677f\uff0c\u5e2e\u52a9\u5f00\u53d1\u8005\u5feb\u901f\u521b\u5efa\u4e00\u4e2a SPA \uff08 Single Page Application \uff09\u7ad9\u70b9\uff0c\u6216\u662f\u4f9b\u5bf9 Android \u611f\u5174\u8da3\u7684\u8bfb\u8005\u4e86\u89e3 Android \u7684\u8bed\u6cd5\u548c\u57fa\u672c\u7684\u6846\u67b6\u673a\u5236\u3002\u8be5\u6a21\u677f\u5148\u5206\u4eab\u4e8e\u6b64 \u2014\u2014 AngularGo on GitHub\u3002

\u8be5\u6a21\u677f\u57fa\u4e8e\u76ee\u524d\u6700\u65b0\u7684 Angular 8\uff0c\u4e14\u4f1a\u6301\u7eed\u8ddf\u8fdb\u66f4\u65b0\u3002\u5728 Angular CLI \u81ea\u52a8\u521b\u5efa\u7684\u8303\u4f8b\u9879\u76ee\u7684\u57fa\u7840\u4e0a\uff0c\u76ee\u524d\u7248\u672c\u7684 AngularGo \u8fd8\u5305\u542b\u4ee5\u4e0b\u5185\u5bb9\uff1a

\n
• Angular 8 \u4ee5\u53ca\u76f8\u5173\u4f9d\u8d56\u7684\u6700\u65b0\u7248\u672c\u914d\u7f6e
\n
• \u4e00\u79cd\u53ef\u80fd\u7684\u6e90\u6587\u4ef6\u7ed3\u6784\u793a\u4f8b
\n
• \u4e00\u79cd\u4e0e Cordova \u5171\u4eab\u4ee3\u7801\u5e93\u7684\u53ef\u80fd\u65b9\u5f0f
\n
• \u57fa\u7840 Angular \u7ec4\u4ef6\u53ca\u4f9d\u8d56\u6ce8\u5165\u7684\u4f7f\u7528\u8303\u4f8b
\n
• \u57fa\u7840 Angular Material \u63a7\u4ef6\u7684\u4f7f\u7528\u8303\u4f8b
\n
• \u652f\u6301\u684c\u9762\u548c\u79fb\u52a8\u8bbe\u5907\u7684\u62bd\u5c49\u5f0f\u4fa7\u6ed1\u83dc\u5355
\n
• \u652f\u6301 lazy loading \u7684 app-routing \u5168\u5c40\u8def\u7531
\n
• \u652f\u6301 authentication guard \u7684\u6a21\u5757\u8def\u7531
\n
• \u652f\u6301 bearer token \u9a8c\u8bc1\u7684 Restangular \u521d\u59cb\u5316\u53ca service \u7528\u4f8b
\n
• \u57fa\u4e8e HttpClient \u7684\u7528\u6237\u6ce8\u518c\u4e0e\u767b\u5f55 API \u8c03\u7528
\n
• \u57fa\u4e8e scss \u7684 Angular Material \u6837\u5f0f\uff08\u5c1a\u672a\u91c7\u7528 BEM \u547d\u540d\u89c4\u5219\uff09
\n
• Azure Application Insights \u96c6\u6210
\n
• \u9002\u7528\u4e8e Windows server/ Azure App Service \u7684 web.config \u914d\u7f6e
\n

AngularGo \u8fd8\u5f88\u521d\u6b65\uff0c\u5f88\u591a\u7ec6\u8282\u56e0\u6c34\u5e73\u6709\u9650\u548c\u65f6\u95f4\u9650\u5236\u5199\u5f97\u4e5f\u6bd4\u8f83\u7c97\u7cd9\uff0c\u60f3\u5fc5\u4f1a\u6709\u5176\u4ed6\u4f18\u79c0\u7684\u5f00\u6e90\u6a21\u677f\u63d0\u4f9b\u4e86\u66f4\u597d\u7684\u5b9e\u73b0\u3002\u4ece\u67d0\u79cd\u610f\u4e49\u4e0a\u6765\u8bb2\uff0c\u8be5\u6a21\u677f\u4e00\u65b9\u9762\u662f\u5bf9\u81ea\u5df1\u7ecf\u9a8c\u5f97\u4e00\u4e2a\u6574\u7406\uff0c\u540c\u65f6\u671f\u671b\u80fd\u8d77\u5230\u4e00\u4e2a\u629b\u7816\u5f15\u7389\u7684\u4f5c\u7528\u3002\u5e0c\u671b\u5bf9\u8bfb\u8005\u6709\u5e2e\u52a9\uff0c\u4e5f\u6b22\u8fce\u6279\u8bc4\u6307\u6559\u3002

via

https://material.angular.io/guide/theming

Material \u4e3b\u9898\u53ef\u4ee5\u81ea\u5b9a\u4e49\uff0c\u4e3b\u8981\u662f\u9ed8\u8ba4\u4e3b\u9898\u989c\u8272\u592a\u6fc0\u8fdb\u4e86\uff0c\u6709\u6ca1\u6709\u597d\u770b\u7684\u4e3b\u9898\u5305\u63a8\u8350\uff1f

\u4e3a\u4ec0\u4e48\u90fd\u89c9 MaterialUI \u4e11\uff1f\u4f46\u4e3a\u5565\u9879\u76ee\u90a3\u4e48\u706b\u5462\uff1f

github \u5730\u5740\uff1a https://github.com/qianxiaoning/demo-angularJs1.7.5 \u6b22\u8fce\u5927\u5bb6 star \u6216\u8005 fork \u5440~

\n
• \u76ee\u5f55\u7ed3\u6784
\n

src/\n components/ \u7ec4\u4ef6\n config/\n dict.js \u4e00\u4e2a\u5168\u5c40\u53d8\u91cf\u7684 run \u65b9\u6cd5\n router.js \u8def\u7531\u8868\n validation.js 'angular-validation'\u7684 config \u914d\u7f6e\n controllers/ \u63a7\u5236\u5668\n data/ \u6570\u636e mock \u6587\u4ef6\n directives/ \u6307\u4ee4\n filters/ \u8fc7\u6ee4\u5668\n image/ \u56fe\u7247\n pages/ \u9875\u9762\n services/ \u670d\u52a1\uff08\u516c\u5171\u65b9\u6cd5\uff09\n app.js \u5165\u53e3\u51fd\u6570\n common.less \u516c\u5171\u6837\u5f0f\u6587\u4ef6\n index.html html \u6a21\u677f\u6587\u4ef6\n