\u8ba9\u6211\u4eec\u6765\u770b\u4e00\u4e0b\u5982\u4f55\u901a\u8fc7Angular\u4e0e\u540e\u7aef\u8fdb\u884c\u901a\u4fe1\u3002
\n\u6211\u4eec\u5c06\u4f7f\u7528Http HttpClient\u670d\u52a1\uff0c\u5e76\u786e\u8ba4\u901a\u8fc7REST API\u5b9e\u73b0\u7684\u65b9\u6cd5\u3002<\/p>\n
\u88dc\u8db3-3 \u3068\u3057\u3066\uff64\u30ec\u30b9\u30dd\u30f3\u30b9\u306b\u30d8\u30c3\u30c0\u60c5\u5831\u3092\u542b\u3081\u308b\u8a2d\u5b9a\u306b\u3064\u3044\u3066\u8ffd\u8a18\u3057\u307e\u3057\u305f<\/p>\n
<\/p>\n
Node.js\u548cnpm\u7684\u7248\u672c\u8981\u4e0e\u524d\u7aef\u4e00\u81f4\u3002<\/p>\n
$ ng --version<\/code>Angular<\/a>v6.1.2<\/del> v11.0.5\u540c\u4e0aTypeScript<\/a>v4.0.2\u540c\u4e0aNode.js<\/a>v9.4.0<\/del> v12.18.3$ node --version<\/code>npm<\/a>v6.1.0<\/del> v6.14.6$ npm --version<\/code><\/div>\n<\/div>\nng\u7248\u672c\u7684\u7ed3\u679c
\n$ ng\u7248\u672c_ _ ____ _ ___
\n\/ \\ _ __ __ _ _ _| | __ _ _ __ \/ ___| | |_ _|
\n\/ \u25b3 \\ | ‘_ \\ \/ _` | | | | |\/ _` | ‘__| | | | | | |
\n\/ ___ \\| | | | (_| | |_| | | (_| | | | |___| |___ | |
\n\/_\/ \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_| \\____|_____|___|
\n|___\/<\/p>\nAngular CLI: 11.0.5
\nNode: 12.18.3
\n\u64cd\u4f5c\u7cfb\u7edf: darwin x64<\/p>\n
Angular\u7248\u672c: 11.0.5
\n… \u52a8\u753b, CLI, \u516c\u5171\u6a21\u5757, \u7f16\u8bd1\u5668, \u7f16\u8bd1\u5668CLI, \u6838\u5fc3, \u8868\u5355
\n… \u5e73\u53f0\u6d4f\u89c8\u5668, \u52a8\u6001\u5e73\u53f0\u6d4f\u89c8\u5668, \u8def\u7531\u5668
\n\u4f7f\u7528\u7684Workspace: \u662f<\/p>\n
\u5305 \u7248\u672c
\n———————————————————
\n@angular-devkit\/architect 0.1100.5
\n@angular-devkit\/build-angular 0.1100.5
\n@angular-devkit\/core 11.0.5
\n@angular-devkit\/schematics 11.0.5
\n@schematics\/angular 11.0.5
\n@schematics\/update 0.1100.5
\nrxjs 6.6.0
\ntypescript 4.0.2<\/p>\n<\/details>\n
\u5f62\u6210<\/h1>\n\n- \n
\u30d0\u30c3\u30af\u30a8\u30f3\u30c9<\/ul>\n<\/li>\n<\/ul>\n <\/p>\n
\n- \n
Express( http:\/\/localhost:3000 )<\/ul>\n<\/li>\n<\/ul>\n <\/p>\n
\n- \n
\u30d5\u30ed\u30f3\u30c9\u30a8\u30f3\u30c9<\/ul>\n<\/li>\n<\/ul>\n <\/p>\n
Angular( http:\/\/localhost:4200 )<\/ul>\n\u540e\u7aef<\/h1>\n
\u672c\u7bc0\u5c06\u5b9e\u73b0\u4e00\u4e2a\u7b80\u5355\u7684\u670d\u52a1\u5668\uff0c\u7528\u4e8e\u63a5\u6536\u4f7f\u7528Express\u53d1\u51fa\u7684\u8bf7\u6c42\u3002\u867d\u7136\u672c\u6587\u7684\u76ee\u7684\u662f\u901a\u8fc7Angular\u5b9e\u73b0Http\u5ba2\u6237\u7aef\uff0c\u4f46\u4e3a\u4e86\u5b9e\u73b0\u8fd9\u4e00\u76ee\u7684\uff0c\u4e5f\u9700\u8981\u4e00\u4e2a\u4e0e\u4e4b\u914d\u5408\u7684\u540e\u7aef\u3002\u5173\u4e8eExpress\u7684\u5f00\u53d1\u73af\u5883\u642d\u5efa\uff0c\u53ef\u4ee5\u53c2\u8003\u8fd9\u7bc7\u6587\u7ae0\uff08\u94fe\u63a5\uff09\u3002<\/p>\n
var<\/span> express<\/span> =<\/span> require<\/span>(<\/span>'<\/span>express<\/span>'<\/span>);<\/span>\r\nvar<\/span> router<\/span> =<\/span> express<\/span>.<\/span>Router<\/span>();<\/span>\r\n\r\nvar<\/span> strage<\/span> =<\/span> {<\/span>\r\n id<\/span>:<\/span> 0<\/span>,<\/span>\r\n message<\/span>:<\/span> '<\/span>\u30c7\u30d5\u30a9\u30eb\u30c8\u30e1\u30c3\u30bb\u30fc\u30b8<\/span>'<\/span>\r\n};<\/span>\r\n\r\nconst<\/span> strages<\/span> =<\/span> [<\/span>strage<\/span>];<\/span>\r\n\r\n\/**\r\n * HTTP \u306e GET \u30e1\u30bd\u30c3\u30c9\u3092\u5f85\u3061\u53d7\u3051\u3066\u30b9\u30c6\u30fc\u30bf\u30b9\u30b3\u30fc\u30c9\u3068\u6587\u5b57\u5217, \u30e1\u30c3\u30bb\u30fc\u30b8\u30ea\u30b9\u30c8\u3092\u8fd4\u3059\r\n * \u30ec\u30b9\u30dd\u30f3\u30b9\u306f\u4e0b\u8a18\u306eJSON\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3067\u8fd4\u5374\u3059\u308b\r\n * {\r\n * status: 200,\r\n * response: '\u30e1\u30c3\u30bb\u30fc\u30b8\u30ea\u30b9\u30c8\u3092\u8fd4\u5374',\r\n * messages: {{\u30e1\u30c3\u30bb\u30fc\u30b8\u30ea\u30b9\u30c8}}\r\n * }\r\n * \u3068\u3044\u3063\u305f JSON \u304c\u8fd4\u5374\u3055\u308c\u308b\r\n *\/<\/span>\r\nrouter<\/span>.<\/span>get<\/span>(<\/span>'<\/span>\/message\/get<\/span>'<\/span>,<\/span> function<\/span>(<\/span>req<\/span>,<\/span> res<\/span>,<\/span> next<\/span>)<\/span> {<\/span>\r\n res<\/span>.<\/span>status<\/span>(<\/span>200<\/span>);<\/span>\r\n res<\/span>.<\/span>json<\/span>({<\/span>\r\n status<\/span>:<\/span> 200<\/span>,<\/span>\r\n response<\/span>:<\/span> '<\/span>\u30e1\u30c3\u30bb\u30fc\u30b8\u30ea\u30b9\u30c8\u3092\u8fd4\u5374<\/span>'<\/span>,<\/span>\r\n messages<\/span>:<\/span> strages<\/span>\r\n });<\/span>\r\n});<\/span>\r\n\r\nmodule<\/span>.<\/span>exports<\/span> =<\/span> router<\/span>;<\/span>\r\n<\/code><\/pre>\n\u5173\u4e8e\u5b9e\u73b0\u6ca1\u6709\u7279\u522b\u7684\u8981\u70b9\uff0c\u5c31\u6309\u7167\u4ee3\u7801\u4e2d\u7684\u6ce8\u91ca\u6765\u505a\u3002
\n\u867d\u7136\u91cd\u590d\u4e86\u6e90\u4ee3\u7801\u7684\u6ce8\u91ca\uff0c\u4f46\u53ea\u662f\u7b80\u5355\u5730\u5728\u8def\u7531\u5668\u4e0a\u6ce8\u518c\u4e86\u4e00\u4e2a\u7b49\u5f85\u63a5\u6536 HTTP \u7684 GET \u65b9\u6cd5\u7684\u5904\u7406\u7a0b\u5e8f\u3002<\/p>\n
{<\/span>\r\n status<\/span>:<\/span> 200<\/span>,<\/span>\r\n response<\/span>:<\/span> '<\/span>\u30e1\u30c3\u30bb\u30fc\u30b8\u30ea\u30b9\u30c8\u3092\u8fd4\u5374<\/span>'<\/span>,<\/span>\r\n messages<\/span>:<\/span> {{<\/span>\u30e1\u30c3\u30bb\u30fc\u30b8\u30ea\u30b9\u30c8<\/span>}}<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n\u56de\u590d\u5982\u4e0b\u3002<\/p>\n
\u524d\u7aef<\/h1>\n
\u6309\u7167\u5f00\u5934\u6240\u8ff0\uff0c\u8fd9\u91cc\u6211\u4eec\u4f7f\u7528Angular\u6807\u51c6\u63d0\u4f9b\u7684Http HttpClient\u670d\u52a1\u6765\u5b9e\u73b0HTTP\u5ba2\u6237\u7aef\u3002
\n\u5728\u4ee5\u4e0b\u7684\u90e8\u5206\uff0c\u6211\u4eec\u5c06\u63a2\u8ba8\u5982\u4f55\u5b9e\u73b0\u5411\u540e\u7aef\u53d1\u51faGET\u8bf7\u6c42\u5e76\u663e\u793a\u4ece\u540e\u7aef\u83b7\u53d6\u7684\u5b57\u7b26\u4e32\u3002<\/p>\n
\u4e3a\u4e86\u4f7f\u7528 HttpClient \u670d\u52a1\uff0c\u5bfc\u5165 HttpClientModule\u3002<\/h2>\n
\u4e3a\u4e86\u4f7f\u7528 Http HttpClient \u670d\u52a1\uff0c\u9700\u8981\u5728 app.module.ts \u4e2d\u5bfc\u5165 HttpModule HttpClientModule\u3002<\/p>\n
import<\/span> {<\/span> BrowserModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> FormsModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/forms<\/span>'<\/span>;<\/span>\r\n\r\n\/\/ HTTP \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u305f\u3081\u306e import ( \u4e0b\u8a18\u306f Angular 5.0.0 \u3067\u975e\u63a8\u5968\u3068\u306a\u3063\u305f )<\/span>\r\n\/\/import { HttpModule } from '@angular\/http';<\/span>\r\n\r\n\/\/ HTTP \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u305f\u3081\u306e import ( Angular 5.0.0 \u4ee5\u964d\u306f\u3053\u3061\u3089\u3092\u4f7f\u3046 )<\/span>\r\nimport<\/span> {<\/span> HttpClientModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/common\/http<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> AppComponent<\/span> }<\/span> from<\/span> '<\/span>.\/app.component<\/span>'<\/span>;<\/span>\r\n\r\n\/\/ HTTP \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u3057\u3066\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/span>\r\nimport<\/span> {<\/span> HttpClientComponent<\/span> }<\/span> from<\/span> '<\/span>.\/http-client\/http-client.component<\/span>'<\/span>;<\/span>\r\n\r\n\/\/ \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u306e\u901a\u4fe1\u3092\u5b9f\u969b\u306b\u62c5\u5f53\u3059\u308b\u30b5\u30fc\u30d3\u30b9<\/span>\r\nimport<\/span> {<\/span> HttpClientService<\/span> }<\/span> from<\/span> '<\/span>.\/service\/http-client.service<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n declarations<\/span>:<\/span> [<\/span>\r\n AppComponent<\/span>,<\/span>\r\n HttpClientComponent<\/span>\r\n ],<\/span>\r\n imports<\/span>:<\/span> [<\/span>\r\n BrowserModule<\/span>,<\/span>\r\n FormsModule<\/span>,<\/span>\r\n \/\/ \u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u5229\u7528\u3092\u5ba3\u8a00\u3059\u308b<\/span>\r\n \/\/ \u4e0b\u8a18\u306f Angular 5.0.0 \u3067\u975e\u63a8\u5968\u3068\u306a\u3063\u305f<\/span>\r\n \/\/HttpModule<\/span>\r\n \/\/ Angular 5.0.0 \u4ee5\u964d\u306f\u3053\u3061\u3089\u3092\u4f7f\u3046<\/span>\r\n HttpClientModule<\/span>\r\n ],<\/span>\r\n providers<\/span>:<\/span> [<\/span>\r\n \/\/ \u81ea\u4f5c\u30b5\u30fc\u30d3\u30b9\u3092\u30a2\u30d7\u30ea\u5168\u4f53\u3067 DI \u3059\u308b\u305f\u3081\u306b\u767b\u9332\u3059\u308b<\/span>\r\n HttpClientService<\/span>\r\n ],<\/span>\r\n bootstrap<\/span>:<\/span> [<\/span>AppComponent<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n\u5728app.module.ts\u4e2d\uff0c\u60a8\u9700\u8981\u67e5\u770b\u4ee5\u4e0b\u4e24\u4e2a\u65b9\u9762\u3002<\/p>\n
\u5728\u4e2d\u56fd\u4eba\u7684\u65e5\u5e38\u751f\u6d3b\u4e2d\uff0c\u53ea\u9700\u8981\u4e00\u79cd\u9009\u62e9\uff1a\u201cHttpModule HttpClientModule\u201d\u7684\u5bfc\u5165\u58f0\u660e\u3002<\/ol>\n\u901a\u8fc7\u8fd9\u4e24\u70b9\u6765\u51c6\u5907\u5728\u6574\u4e2a\u5e94\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528 Http \u670d\u52a1\u3002<\/p>\n
\u8d1f\u8d23\u4e0e\u540e\u7aef\u901a\u4fe1\u7684\u670d\u52a1\uff08\u4f8b\u5982GET\u8bf7\u6c42\uff09<\/h2>\n
\u5b9e\u73b0\u4e00\u4e2a\u8d1f\u8d23\u4e0e\u540e\u7aef\u8fdb\u884c\u5b9e\u9645\u901a\u4fe1\u7684\u670d\u52a1\u7684\u89d2\u8272\u3002\u5b9e\u73b0\u5185\u5bb9\u5927\u81f4\u5982\u4e0b\uff1a<\/p>\n
Http HttpClient \u30b5\u30fc\u30d3\u30b9\u306e import<\/p>\n
\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u304b\u3089\u63d0\u4f9b\u3055\u308c\u3066\u3044\u308b REST-API \u306e\u5b9f\u884c<\/p>\n
\u4ee5\u4e0b\u662fGET\u8bf7\u6c42\u7684\u793a\u4f8b\u4ee3\u7801\u3002<\/p>\n