{"id":38768,"date":"2023-11-10T04:51:41","date_gmt":"2023-01-07T23:31:41","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/"},"modified":"2024-05-04T08:17:57","modified_gmt":"2024-05-04T00:17:57","slug":"%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/","title":{"rendered":"\u57fa\u4e8eAngularJS\u548cAngular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08AngularJS+ui-router+Angular+Angular Router+ngUpgrade+Lazy Load\uff09"},"content":{"rendered":"<p>\u6211\u60f3\u4ecb\u7ecd\u4e00\u4e0b\u5982\u4f55\u5feb\u901f\u4f7f\u7528ngUpgrade\uff0c\u56e0\u4e3a\u6211\u8ba4\u4e3a\u57282018\u5e7410\u6708\u53d1\u5e03\u4e86Angular7\u4e4b\u540e\uff0c\u6709\u4e9b\u4eba\u53ef\u80fd\u8fd8\u4e0d\u592a\u4e86\u89e3ngUpgrade\u7684\u7528\u6cd5\uff0c\u5e76\u4e14\u53ef\u80fd\u4ecd\u7136\u6709\u4e00\u4e9bAngularJS\u7684\u9879\u76ee\u3002\u4e3a\u4e86\u83b7\u5f97\u53ef\u8fd0\u884c\u7684\u4ee3\u7801\uff0c\u6211\u60f3\u63d0\u4f9b\u4e00\u4e9b\u4f7f\u7528ngUpgrade\u7684\u6307\u5357\u3002<\/p>\n<h1>\u53ea\u9700\u8981\u4e00\u4e2a\u9009\u9879\uff1a\u9002\u7528\u4e8e\u76ee\u6807\u8bfb\u8005<\/h1>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">AngularJS\u3082Angular\u3082\u77e5\u3063\u3066\u308b\u3051\u3069\u3001ngUpgrade\u306e\u4f7f\u3044\u65b9\u304c\u3088\u304f\u308f\u304b\u3089\u306a\u3044\u4eba<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">AngularJS\uff0bAngular\u306e\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9\u30a2\u30d7\u30ea\u306b\u306a\u304b\u306a\u304b\u8e0f\u307f\u8fbc\u3081\u306a\u3044\u4eba<\/ul>\n<h1>\u51c6\u5907<\/h1>\n<p>\u00a71 \u51c6\u5907<\/p>\n<p>\u53ef\u4ee5\u5047\u8bbeAngularJS\u3001Angular\u548cAngular CLI\u7b49\u5fc5\u8981\u7684\u6846\u67b6\/\u5e93\u5df2\u7ecf\u9884\u5148\u901a\u8fc7npm\u5b89\u88c5\u597d\u3002<br \/>\nAngular\u548cAngular CLI\u90fd\u662f\u6700\u65b0\u7248\u672c\uff0c\u6ca1\u6709\u95ee\u9898\u3002<br \/>\n\u203b\u4f5c\u8005\u5728Angular v7.0.2\u4e0a\u8fdb\u884c\u4e86\u786e\u8ba4\u3002<\/p>\n<h2>\u00a71.1 \u5c06URL\u5207\u6362\u5230HTML5\u6a21\u5f0f<\/h2>\n<p>\u6211\u4eec\u8bbe\u5b9a$locationProvider.html5Mode(true)\uff0c\u5c06URL\u8bbe\u7f6e\u4e3aHTML5\u6a21\u5f0f\u3002<\/p>\n<h2>\u5c07HTML\u6e90\u78bc\u4e2d\u7684ng-app\u522a\u9664\u3002<\/h2>\n<p>\u5220\u9664HTML\u6e90\u4ee3\u7801\u4e2d\u7684ng-app\u3002<br \/>\n\u5982\u679c\u6b63\u5728\u4f7f\u7528ng-strict-di\uff0c\u4e5f\u5c06\u5176\u5220\u9664\u3002<\/p>\n<h2>\u8bbe\u5b9aAngularJS\u7684\u6839\u7ec4\u4ef6<\/h2>\n<p>\u5982\u679c\u5728AngularJS\u4e2d\u6ca1\u6709\u6839\u7ec4\u4ef6\uff0c\u8bf7\u521b\u5efa\u4e00\u4e2a\u3002<\/p>\n<pre class=\"post-pre\"><code>angular.module('app')\r\n  .component('appRoot', {\r\n    templateUrl: 'path\/to\/html' \/\/ or template:  ``\r\n    controller: function () {}\r\n  });\r\n<\/code><\/pre>\n<h2>\u521b\u5efa\u4e00\u4e2a\u7528\u4e8eAngular\u7684\u76ee\u5f55\u3002<\/h2>\n<p>\u6211\u8ba4\u4e3a\u53ef\u4ee5\u4f7f\u7528src\/ng2\u7b49\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u4ece\u60a8\u5e73\u65f6\u4f7f\u7528\u7684\u9879\u76ee\u4e2d\u501f\u7528angular.json\u3001tsconfig.json\u3001polyfills.ts\u548cmain.ts\u7b49\u6587\u4ef6\u3002<\/p>\n<p>\u5c06angular.json\u4e2d\u7684\u5165\u53e3\u70b9\u8bbe\u7f6e\u4e3a\u521b\u5efa\u7684main.ts\u6587\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code>{\r\n...\u7701\u7565\r\n      \"sourceRoot\": \"src\",\r\n      \"projectType\": \"application\",\r\n      \"architect\": {\r\n        \"build\": {\r\n          \"builder\": \"@angular-devkit\/build-angular:browser\",\r\n          \"options\": {\r\n            \"outputPath\": \"public\/ng2\",\r\n            \"index\": \"src\/index.html\",\r\n            \"main\": \"src\/ng2\/main.ts\",\r\n            \"tsConfig\": \"src\/tsconfig.app.json\",\r\n            \"polyfills\": \"src\/polyfills.ts\",\r\n            \"assets\": [\r\n              \"src\/assets\",\r\n            ],\r\n            \"styles\": [\r\n              \"src\/styles.scss\"\r\n            ],\r\n            \"scripts\": [\r\n              \"node_modules\/jquery\/dist\/jquery.min.js\",\r\n              \"node_modules\/bootstrap\/js\/tooltip.js\",\r\n              \"node_modules\/bootstrap\/js\/popover.js\",\r\n              \"node_modules\/bootstrap\/js\/dropdown.js\",\r\n              \"node_modules\/bootstrap\/js\/tab.js\",\r\n              \"node_modules\/bootstrap\/js\/modal.js\"\r\n            ]\r\n          },\r\n...\u7701\u7565\r\n<\/code><\/pre>\n<h2>\u00a71.4 \u4efb\u52a1\u7ba1\u7406\u5668<\/h2>\n<h3>\u00a71.4.1 \u4f7f\u7528\u9664\u4e86webpack\u4e4b\u5916\u7684\u6784\u5efa\u5de5\u5177(gulp\/ grunt)\u4f5c\u4e3a\u4efb\u52a1\u6267\u884c\u5668\u7684\u60c5\u51b5<\/h3>\n<p>\u6211\u8ba4\u4e3a\u5e94\u5c06\u5e94\u7528\u7a0b\u5e8f\u6587\u4ef6\u751f\u6210\u4e3a\u4e00\u4e2a\u6700\u7ec8\u6587\u4ef6\u3002<br \/>\n\u5c06\u751f\u6210\u6587\u4ef6\u4f4d\u7f6e\u66f4\u6539\u4e3asrc\u5185\u3002<\/p>\n<p>\u6211\u628a src\/ng2\/ng1\/application.min.js \u653e\u5728\u4e86\u8fd9\u91cc\u3002<\/p>\n<p>\u4ecemain.ts\u4e2d\u5bfc\u5165\u4e0a\u8ff0\u6587\u4ef6\uff08\u5728\u793a\u4f8b\u4e2d\u4e3asrc\/ng2\/ng1\/application.min.js\uff09\u3002<\/p>\n<h3>\u00a71.4.2 \u4f7f\u7528webpack\u4f5c\u4e3a\u4efb\u52a1\u8fd0\u884c\u5668\u7684\u6a21\u5f0f<\/h3>\n<p>\u4ecemain.ts\u5bfc\u5165ng1\u7684\u5165\u53e3\u6587\u4ef6\u3002<\/p>\n<h1>\u7b2c\u4e8c\u90e8\u5206\u7684Angular\u8bbe\u7f6e<\/h1>\n<p>\u8bf7\u628a\u4ee5\u540e\u7684\u6587\u4ef6\u89c6\u4e3a\u7b26\u5408Angular CLI\u7684\u89c4\u8303\u3002<\/p>\n<h2>\u4fee\u6b63 main.ts \u6587\u4ef6\u7684 \u00a72.1 \u90e8\u5206\u3002<\/h2>\n<p>\u4fee\u6539main.ts\u6587\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ng2\/ng1\/application.min<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ webpack\u306e\u5834\u5408\u306fng1\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30d5\u30a1\u30a4\u30eb\u3092\u6307\u5b9a<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ng2\/ng1\/downgrade<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Angular\u306e\u30eb\u30fc\u30c8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u306a\u308bMainComponent\u3092AngularJS\u306b\u767b\u9332\u3057\u3066\u304a\u304f<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">reflect-metadata<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">platformBrowserDynamic<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/platform-browser-dynamic<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">setAngularLib<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/upgrade\/static<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">angular<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">angular<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">enableProdMode<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">environment<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">environments\/environment<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ng2\/app.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">environment<\/span><span class=\"p\">.<\/span><span class=\"nx\">production<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">enableProdMode<\/span><span class=\"p\">();<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"nx\">setAngularLib<\/span><span class=\"p\">(<\/span><span class=\"nx\">angular<\/span><span class=\"p\">);<\/span>\r\n<span class=\"nx\">platformBrowserDynamic<\/span><span class=\"p\">().<\/span><span class=\"nx\">bootstrapModule<\/span><span class=\"p\">(<\/span><span class=\"nx\">AppModule<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<h2>\u4fee\u6539AppModule\u6a21\u5757\u7684\u7b2c2.2\u8282\u3002<\/h2>\n<p>\u6211\u5c06\u4fee\u6539AppModule\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/platform-browser<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">RouterModule<\/span><span class=\"p\">,<\/span> <span class=\"nx\">UrlHandlingStrategy<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Router<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/router<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">setUpLocationSync<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/router\/upgrade<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">UpgradeModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/upgrade\/static<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppRoutes<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app.routing<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Ng1Ng2UrlHandlingStrategy<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/routing-strategy<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">MainComponent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/main\/main.component<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">BrowserModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">UpgradeModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">RouterModule<\/span><span class=\"p\">.<\/span><span class=\"nx\">forRoot<\/span><span class=\"p\">(<\/span><span class=\"nx\">AppRoutes<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">declarations<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">MainComponent<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">providers<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"p\">{<\/span> <span class=\"na\">provide<\/span><span class=\"p\">:<\/span> <span class=\"nx\">UrlHandlingStrategy<\/span><span class=\"p\">,<\/span> <span class=\"na\">useClass<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Ng1Ng2UrlHandlingStrategy<\/span> <span class=\"p\">},<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">entryComponents<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span> <span class=\"nx\">MainComponent<\/span> <span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">AppModule<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">constructor<\/span><span class=\"p\">(<\/span>\r\n    <span class=\"k\">private<\/span> <span class=\"nx\">upgrade<\/span><span class=\"p\">:<\/span> <span class=\"nx\">UpgradeModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"k\">private<\/span> <span class=\"nx\">router<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Router<\/span>\r\n  <span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\r\n\r\n  <span class=\"nx\">ngDoBootstrap<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"c1\">\/\/ 'app'\u306fng1\u3067bootstrap\u306b\u5229\u7528\u3057\u3066\u3044\u305f\u30c8\u30c3\u30d7\u30e2\u30b8\u30e5\u30fc\u30eb\u540d\u306b\u9069\u5b9c\u5909\u66f4\u3057\u307e\u3057\u3087\u3046<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">upgrade<\/span><span class=\"p\">.<\/span><span class=\"nx\">bootstrap<\/span><span class=\"p\">(<\/span><span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">,<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span> <span class=\"p\">{<\/span> <span class=\"na\">strictDi<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">});<\/span>\r\n    <span class=\"nx\">setUpLocationSync<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">upgrade<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nx\">initialNavigation<\/span><span class=\"p\">();<\/span> <span class=\"c1\">\/\/ \u3053\u308c\u304c\u306a\u3044\u3068\u521d\u671f\u8868\u793a\u304c\u3055\u308c\u306a\u3044\u306e\u3067\u6ce8\u610f<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h2>\u00a72.3 Angular \u8def\u7531\u5668\u7684\u8def\u7531\u914d\u7f6e<\/h2>\n<p>\u6211\u5011\u6703\u8a2d\u5b9a Angular Router \u7684\u8def\u7531\u914d\u7f6e\u3002<br \/>\n\u56e0\u70ba\u6bcf\u500b Module1Module \u7684\u5b9a\u7fa9\u90fd\u662f\u5728 Angular \u7684\u7bc4\u7587\u5167\uff0c\u6240\u4ee5\u5728\u9019\u7bc7\u6587\u7ae0\u4e2d\u5c07\u4e0d\u9032\u884c\u4ecb\u7d39\u3002<br \/>\n\u4f60\u53ef\u4ee5\u6309\u7167\u4e00\u822c Angular \u7684\u611f\u89ba\u4f86\u5275\u5efa\uff0c\u9019\u662f\u5b8c\u5168\u6c92\u554f\u984c\u7684\u3002<br \/>\n\u8acb\u6ce8\u610f\uff0c\u8acb\u66ab\u6642\u4e0d\u8981\u5be6\u73fe redirectTo \u529f\u80fd\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Routes<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/router<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">AppRoutes<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Routes<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n<span class=\"p\">{<\/span>\r\n  <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">children<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"p\">{<\/span>\r\n      <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">loadChildren<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ng2\/modules\/dashboard\/dashboard.module#DashboardModule<\/span><span class=\"dl\">'<\/span>\r\n    <span class=\"p\">},<\/span>\r\n    <span class=\"p\">{<\/span>\r\n      <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">module1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">loadChildren<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ng2\/modules\/module1\/module1.module#Module1Module<\/span><span class=\"dl\">'<\/span>\r\n    <span class=\"p\">},<\/span>\r\n    <span class=\"p\">{<\/span>\r\n      <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">module2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">loadChildren<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ng2\/modules\/module2\/module2.module#Module2Module<\/span><span class=\"dl\">'<\/span>\r\n    <span class=\"p\">}<\/span>\r\n  <span class=\"p\">]<\/span>\r\n<span class=\"p\">}<\/span>\r\n<span class=\"p\">];<\/span>\r\n<\/code><\/pre>\n<h2>\u00a72.4 Aunglar\u8def\u7531\u5668\u7684\u8def\u7531\u7b56\u7565<\/h2>\n<p>\u8bbe\u7f6eAngular Router\u7684\u8def\u7531\u7b56\u7565\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">UrlHandlingStrategy<\/span><span class=\"p\">,<\/span> <span class=\"nx\">UrlTree<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@angular\/router<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Ng1Ng2UrlHandlingStrategy<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">UrlHandlingStrategy<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">shouldProcessUrl<\/span><span class=\"p\">(<\/span><span class=\"nx\">url<\/span><span class=\"p\">:<\/span> <span class=\"nx\">UrlTree<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">str<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">url<\/span><span class=\"p\">.<\/span><span class=\"nx\">toString<\/span><span class=\"p\">();<\/span>\r\n<span class=\"err\">\u3000\u3000<\/span><span class=\"c1\">\/\/ \u4ee5\u4e0b\u306bAngular\u5316\u304c\u7d42\u308f\u3063\u305f\u30e2\u30b8\u30e5\u30fc\u30eb\u306eURL\u3092\u8ffd\u8a18\u3057\u3066\u3044\u304d\u307e\u3059<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"nx\">str<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span> <span class=\"o\">||<\/span> <span class=\"c1\">\/\/ \u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u306eURL \u203bstartsWith\u3067\u3084\u308b\u3068\u5168\u3066\u304c\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u3055\u308c\u3066\u3057\u307e\u3046\u306e\u3067\u6ce8\u610f<\/span>\r\n      <span class=\"nx\">str<\/span><span class=\"p\">.<\/span><span class=\"nx\">startsWith<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/module1<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">||<\/span> <span class=\"c1\">\/\/ URL\u304c\/module1\u3067\u59cb\u307e\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u306fAngular\u5316\u5b8c\u4e86<\/span>\r\n      <span class=\"nx\">str<\/span><span class=\"p\">.<\/span><span class=\"nx\">startsWith<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/module2<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ \/\/ URL\u304c\/module2\u3067\u59cb\u307e\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u306fAngular\u5316\u5b8c\u4e86<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"nx\">extract<\/span><span class=\"p\">(<\/span><span class=\"nx\">url<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span> <span class=\"k\">return<\/span> <span class=\"nx\">url<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\r\n  <span class=\"nx\">merge<\/span><span class=\"p\">(<\/span><span class=\"nx\">url<\/span><span class=\"p\">,<\/span> <span class=\"nx\">whole<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span> <span class=\"k\">return<\/span> <span class=\"nx\">url<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h2>\u00a72.5 Angular\u7684\u6839\u7ec4\u4ef6\u8bbe\u7f6e<\/h2>\n<p>\u5b9a\u4e49Angular\u7684\u6839\u7ec4\u4ef6\u3002<br \/>\n\u203b\u6ca1\u6709\u7279\u522b\u9700\u8981\u7684\u5185\u5bb9\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@angular\/core<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-main<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">template<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`&lt;router-outlet&gt;&lt;\/router-outlet&gt;`<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">MainComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">constructor<\/span><span class=\"p\">(<\/span>\r\n  <span class=\"p\">)<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"nx\">ngOnInit<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h2>\u00a72.6 \u5c06Angular\u6839\u7ec4\u4ef6\u6ce8\u518c\u5230AngularJS\u4e2d<\/h2>\n<p>\u5c06 MainComponent \u6ce8\u518c\u5230 AngularJS \u4e2d\u3002<br \/>\n\u5728\u4e0b\u9762\u7684\u4ee3\u7801\u4e2d\uff0c\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a\u65b0\u6587\u4ef6 ng2\/ng1\/downgrade.ts\uff0c\u4f46\u5982\u679c\u5df2\u7ecf\u5c06 AngularJS \u8f6c\u6362\u4e3a TypeScript\uff0c\u4e5f\u53ef\u4ee5\u5728 AngularJS \u4e2d\u8fdb\u884c\u914d\u7f6e\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">angular<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">angular<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">downgradeComponent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/upgrade\/static<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">MainComponent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ng2\/main\/main.component<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"c1\">\/\/ AngularJS\u304b\u3089\u3082MainComponent\u3092\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b<\/span>\r\n<span class=\"nx\">angular<\/span><span class=\"p\">.<\/span><span class=\"kr\">module<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">.<\/span><span class=\"nx\">directive<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">appMain<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">downgradeComponent<\/span><span class=\"p\">({<\/span> <span class=\"na\">component<\/span><span class=\"p\">:<\/span> <span class=\"nx\">MainComponent<\/span> <span class=\"p\">}));<\/span>\r\n<\/code><\/pre>\n<p>Angular\u7684\u8bbe\u7f6e\u5df2\u7ecf\u5b8c\u6210\u3002<\/p>\n<h1>\u7b2c3\u8282AngularJS\u7684\u4fee\u590d<\/h1>\n<h2>\u00a73.1 \u8bbe\u5b9a\u8f6c\u6362\u4e3aAngular\u7684\u8def\u7531\u8bbe\u7f6e\u3002<\/h2>\n<p>\u6211\u4eec\u5c06\u8bbe\u7f6eAngularJS\uff0c\u4ee5\u4fbf\u5b83\u53ef\u4ee5\u8bc6\u522b\u7ecf\u8fc7Angular\u5316\u7684\u8def\u7531\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nx\">angular<\/span><span class=\"p\">.<\/span><span class=\"nx\">module<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">upgraded.route<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">ui-router<\/span><span class=\"dl\">'<\/span><span class=\"p\">])<\/span>\r\n  <span class=\"p\">.<\/span><span class=\"nx\">config<\/span><span class=\"p\">([<\/span>\r\n    <span class=\"dl\">'<\/span><span class=\"s1\">$stateProvider<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"kd\">function<\/span> <span class=\"p\">(<\/span><span class=\"nx\">$stateProvider<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"nx\">$stateProvider<\/span>\r\n        <span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">({<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">dashboard<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">template<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ Angular\u5316\u3057\u305f\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306fAngularJS\u3067\u306f\u4f55\u3082\u8868\u793a\u3057\u306a\u3044\u3088\u3046\u306b\u3059\u308b<\/span>\r\n        <span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">({<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">module1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">abstract<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">})<\/span>\r\n        <span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">({<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">module1.list<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/module1\/list<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">template<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span> <span class=\"p\">})<\/span> \r\n        <span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">({<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">module1.edit<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/module1\/edit\/:id<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">template<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span> <span class=\"p\">})<\/span>\r\n<span class=\"p\">...<\/span> <span class=\"nx\">\u4ee5\u5f8c<\/span><span class=\"err\">\u3001<\/span><span class=\"nx\">Angular\u5316\u5b8c\u4e86\u3057\u305f\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u5206\u3060\u3051\u8ffd\u8a18\u3057\u3066\u3044\u304d\u307e\u3059<\/span><span class=\"err\">\u3002<\/span>\r\n    <span class=\"p\">}<\/span>\r\n  <span class=\"p\">]);<\/span>\r\n<\/code><\/pre>\n<h2>\u8bbe\u7f6eAngular\u7684\u6839\u7ec4\u4ef6\u00a73.2<\/h2>\n<p>\u5728HTML\u4e2d\uff0c\u5c06\uff08\u5982\u679c\u4f7f\u7528ngRoute\uff0c\u5219\u4e3a\uff09\u4e4b\u540e\u6dfb\u52a0\u3002<br \/>\n\u6ce8\u610f\uff1aapp-root\u662fAngularJS\u7684\u6839\u7ec4\u4ef6\uff0c\u8bf7\u6839\u636e\u9700\u8981\u8fdb\u884c\u8c03\u6574\u3002<\/p>\n<pre class=\"post-pre\"><code>...\u7701\u7565\r\n  <span class=\"nt\">&lt;app-root&gt;<\/span>\r\n    <span class=\"nt\">&lt;ui-view&gt;&lt;\/ui-view&gt;<\/span>\r\n    <span class=\"nt\">&lt;app-main&gt;&lt;\/app-main&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/app-root&gt;<\/span>\r\n...\u7701\u7565\r\n<\/code><\/pre>\n<p>\u4ee5\u4e0a\u662fAngularJS\u914d\u7f6e\u7684\u5b8c\u6210\u3002<\/p>\n<p>\u5982\u679c\u4f7f\u7528ng build &#8211;watch\u6216\u7c7b\u4f3c\u7684\u547d\u4ee4\uff0c\u5e94\u8be5\u53ef\u4ee5\u6210\u529f\u6784\u5efa\u3002<br \/>\n\u5982\u679c\u65e0\u6cd5\u6210\u529f\uff0c\u8bf7\u8054\u7cfb\u6211\u3002<\/p>\n<h1>\u00a74 \u8fc1\u79fb\u5230Angular<\/h1>\n<p>\u4e00\u540c\u52aa\u529b\u524d\u8fdb\u5427\u3002<br \/>\n\u5b8c\u6210Angular\u5316\u7684\u4ee3\u7801\u8bf7\u52a1\u5fc5\u4eceAngularJS\u4e2d\u5220\u9664\uff0c\u5e76\u4e0d\u8981\u5fd8\u8bb0\u8fdb\u884c\u8def\u7531\u8bbe\u7f6e\u3002<br \/>\n\u968f\u7740Angular\u5316\u7684\u8fdb\u5c55\uff0c\u901a\u8fc7\u5ef6\u8fdf\u52a0\u8f7d\u5e26\u6765\u7684\u521d\u59cb\u52a0\u8f7d\u6587\u4ef6\u5927\u5c0f\u9010\u6e10\u51cf\u5c0f\uff0c\u611f\u89c9\u5f88\u4e0d\u9519\u3002<br \/>\n\u4ece\u770b\u8d77\u6765\u7b80\u5355\u7684\u90e8\u5206\u5f00\u59cb\u8fc1\u79fb\uff0c\u4ee5\u638c\u63e1\u611f\u89c9\u7684\u65b9\u5f0f\u53ef\u4ee5\u987a\u5229\u8fdb\u884c\u3002<\/p>\n<h1>\u7b2c\u4e94\u8282 \u603b\u7ed3<\/h1>\n<p>app-root\u662fAngularJS\u7684\u9886\u57df\uff0capp-main\u662fAngular\u7684\u9886\u57df\u3002<br \/>\n\u5728ui-view\u4e2d\u5904\u7406AngularJS\u7684URL\uff0c\u5982\u679c\u662f\u7ecf\u8fc7Angular\u5316\u7684URL\uff0c\u5219\u4e0d\u663e\u793a\u4efb\u4f55\u5185\u5bb9\u3002<br \/>\n\u5728router-outlet\u4e2d\u5904\u7406\u7ecf\u8fc7Angular\u5316\u7684URL\uff0c\u5176\u4ed6\u60c5\u51b5\u4e0b\u4e0d\u663e\u793a\u4efb\u4f55\u5185\u5bb9\u3002<br \/>\n\u901a\u8fc7\u8fd9\u6837\u7684\u5904\u7406\uff0c\u53ef\u4ee5\u5b8c\u5168\u5c06AngularJS\u7684\u4e16\u754c\u548cAngular\u7684\u4e16\u754c\u5206\u9694\u5f00\u6765\u3002<\/p>\n<p>\u5982\u679c\u4f60\u60f3\u5728Angular\u4e2d\u4f7f\u7528AngularJS\u7684\u4f9d\u8d56\u6ce8\u5165\uff0c\u53ef\u4ee5\u53c2\u8003&#8221;Inject angularjs service into Angular&#8221;\u7684\u7b54\u6848\u3002<br \/>\n\u5982\u679c\u4f60\u60f3\u5728AngularJS\u4e2d\u4f7f\u7528Angular\u7684\u670d\u52a1\uff0c\u53ef\u4ee5\u8003\u8651\u4f7f\u7528downgradeInjectable\u3002<br \/>\n\uff08\u6211\u90fd\u6ca1\u6709\u4f7f\u7528\u8fc7\u5176\u4e2d\u4efb\u4f55\u4e00\u4e2a\uff09<\/p>\n<p>\u7136\u800c\uff0c\u5347\u7ea7\u6216\u964d\u7ea7\u4ec5\u9650\u4e8e\u81ea\u8eab\u5236\u4f5c\u7684\u670d\u52a1\u6216\u63d0\u4f9b\u8005\uff0c\u5bf9\u4e8e\u5e93\u4e2d\u5df2\u51c6\u5907\u597d\u7684\u529f\u80fd\uff0c\u6211\u4eec\u5e94\u8be5\u76f4\u63a5\u8fc1\u79fb\u3002<\/p>\n<h1>\u7b2c\u516d\u8282 \u9644\u5f55<\/h1>\n<p>\u4ee5\u4e0b\u8fd9\u5f20\u5e7b\u706f\u7247\u5728\u4f7f\u7528ngUpgrade\u65f6\u975e\u5e38\u6709\u53c2\u8003\u4ef7\u503c\u3002<\/p>\n<ul class=\"post-ul\">ngUpgrade\u3068\u79fb\u690d\u6226\u7565<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u6211\u60f3\u4ecb\u7ecd\u4e00\u4e0b\u5982\u4f55\u5feb\u901f\u4f7f\u7528ngUpgrade\uff0c\u56e0\u4e3a\u6211\u8ba4\u4e3a\u57282018\u5e7410\u6708\u53d1\u5e03\u4e86Angular7\u4e4b\u540e\uff0c\u6709\u4e9b\u4eba\u53ef\u80fd [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38768","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u57fa\u4e8eAngularJS\u548cAngular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08AngularJS+ui-router+Angular+Angular Router+ngUpgrade+Lazy Load\uff09 - 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\/\u57fa\u4e8eangularjs\u548cangular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08angularjsui-routerangularangular-routerngupgradelazy-load\uff09\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u57fa\u4e8eAngularJS\u548cAngular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08AngularJS+ui-router+Angular+Angular Router+ngUpgrade+Lazy Load\uff09\" \/>\n<meta property=\"og:description\" content=\"\u6211\u60f3\u4ecb\u7ecd\u4e00\u4e0b\u5982\u4f55\u5feb\u901f\u4f7f\u7528ngUpgrade\uff0c\u56e0\u4e3a\u6211\u8ba4\u4e3a\u57282018\u5e7410\u6708\u53d1\u5e03\u4e86Angular7\u4e4b\u540e\uff0c\u6709\u4e9b\u4eba\u53ef\u80fd [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u57fa\u4e8eangularjs\u548cangular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08angularjsui-routerangularangular-routerngupgradelazy-load\uff09\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-07T23:31:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-04T00:17:57+00:00\" \/>\n<meta name=\"author\" content=\"\u5b87, \u534e\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u5b87, \u534e\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \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\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/\",\"name\":\"\u57fa\u4e8eAngularJS\u548cAngular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08AngularJS+ui-router+Angular+Angular Router+ngUpgrade+Lazy Load\uff09 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-01-07T23:31:41+00:00\",\"dateModified\":\"2024-05-04T00:17:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/513018e4e121d3add1b7c5de8be21458\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u57fa\u4e8eAngularJS\u548cAngular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08AngularJS+ui-router+Angular+Angular Router+ngUpgrade+Lazy Load\uff09\"}]},{\"@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\/513018e4e121d3add1b7c5de8be21458\",\"name\":\"\u5b87, \u534e\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/63cd45cbc05a35fc4ff7637a163c83c4962ef58d27472726c3a3e0c9c5194f0f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/63cd45cbc05a35fc4ff7637a163c83c4962ef58d27472726c3a3e0c9c5194f0f?s=96&d=mm&r=g\",\"caption\":\"\u5b87, \u534e\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yuhua\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u57fa\u4e8eAngularJS\u548cAngular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08AngularJS+ui-router+Angular+Angular Router+ngUpgrade+Lazy Load\uff09 - 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\/\u57fa\u4e8eangularjs\u548cangular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08angularjsui-routerangularangular-routerngupgradelazy-load\uff09\/","og_locale":"zh_CN","og_type":"article","og_title":"\u57fa\u4e8eAngularJS\u548cAngular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08AngularJS+ui-router+Angular+Angular Router+ngUpgrade+Lazy Load\uff09","og_description":"\u6211\u60f3\u4ecb\u7ecd\u4e00\u4e0b\u5982\u4f55\u5feb\u901f\u4f7f\u7528ngUpgrade\uff0c\u56e0\u4e3a\u6211\u8ba4\u4e3a\u57282018\u5e7410\u6708\u53d1\u5e03\u4e86Angular7\u4e4b\u540e\uff0c\u6709\u4e9b\u4eba\u53ef\u80fd [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u57fa\u4e8eangularjs\u548cangular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08angularjsui-routerangularangular-routerngupgradelazy-load\uff09\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-01-07T23:31:41+00:00","article_modified_time":"2024-05-04T00:17:57+00:00","author":"\u5b87, \u534e","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u5b87, \u534e","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/","name":"\u57fa\u4e8eAngularJS\u548cAngular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08AngularJS+ui-router+Angular+Angular Router+ngUpgrade+Lazy Load\uff09 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-01-07T23:31:41+00:00","dateModified":"2024-05-04T00:17:57+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/513018e4e121d3add1b7c5de8be21458"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u57fa\u4e8eAngularJS\u548cAngular\u7684\u6df7\u5408\u5e94\u7528\u57fa\u7840\uff08AngularJS+ui-router+Angular+Angular Router+ngUpgrade+Lazy Load\uff09"}]},{"@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\/513018e4e121d3add1b7c5de8be21458","name":"\u5b87, \u534e","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/63cd45cbc05a35fc4ff7637a163c83c4962ef58d27472726c3a3e0c9c5194f0f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/63cd45cbc05a35fc4ff7637a163c83c4962ef58d27472726c3a3e0c9c5194f0f?s=96&d=mm&r=g","caption":"\u5b87, \u534e"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yuhua\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9f%ba%e4%ba%8eangularjs%e5%92%8cangular%e7%9a%84%e6%b7%b7%e5%90%88%e5%ba%94%e7%94%a8%e5%9f%ba%e7%a1%80%ef%bc%88angularjsui-routerangularangular-routerngupgradelazy-load%ef%bc%89\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38768","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\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38768"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38768\/revisions"}],"predecessor-version":[{"id":97188,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38768\/revisions\/97188"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}