angularjs – 混合Angular 1.x Angular 6应用程序,包含Angular 1

发布时间：2020-12-17 07:09:53 所属栏目：安全来源：网络整理

导读：当AngularJS文件是JS和TS时,我正在尝试构建混合应用程序. 我似乎无法添加到JS控制器的路由. 我依赖于以下example并执行以下操作： const statesConfigBlock = ['$stateProvider',$stateProvider = { $stateProvider.state('main',{ url: '/main',templateUrl

当AngularJS文件是JS和TS时,我正在尝试构建混合应用程序.
我似乎无法添加到JS控制器的路由.

我依赖于以下example并执行以下操作：

const statesConfigBlock = ['$stateProvider',$stateProvider => {
  $stateProvider.state('main',{
    url: '/main',templateUrl: 'app/components/layout/mainView.html',controller: 'mainController as main'
  })
}];
appModuleAngularJS.config(statesConfigBlock);

虽然我有一个mainCtrl.js文件定义为：

var app = angular.module('myApp',[]);

(function(app) {
  'use strict';

  app.controller('mainController',[
      function () {
        console.log("blah");

      }]);
})(app);

当我运行应用程序时,我得到：

The controller with the name ‘mainController’ is not registered

但是当我在控制台中运行时,我确实看到了它：

angular.module('myApp')._invokeQueue.filter(function(el){
  return el[0] === "$controllerProvider";
}).map(function(el){
  return el[2]["0"];
});

解决方法

好吧,我想我成功了.它可能不是最好的解决方案但是这里.

首先,我创建了一个包含模块声明的js文件：

appDependencies = [];
app = angular.module('myApp',appDependencies);

所有Angular 1.x控制器和服务都使用全局变量app,如下所示：

(function(app) {
  'use strict';

  app.controller('mainController',[
      function () {
        console.log("blah");

      }]);
})(app);

最后,Angular 1.x模块ts文件使用全局应用程序并向其添加依赖项：

...

declare const app: any;
declare var appDependencies: any;

export const appModuleAngularJS = app;

angular.forEach([
  uiRouter,upgradeModule.name
],module => {
  appDependencies.push(module);
});

...

const statesConfigBlock = ['$stateProvider',controller: 'mainController as main'
  })
}];
appModuleAngularJS.config(statesConfigBlock);

...

现在,index.html文件中js导入的顺序非常重要.应该首先应用减速文件,然后是所有Angular 1.x控制器和服务,然后是转换为js文件的* .ts文件.

这个解决方案对我有用,但我非常乐意阅读更好的解决方案.

干杯!

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!