[英]Hybrid Angular 1.x + Angular 6 App with both vanilla JS and TS files in Angular 1.x
当AngularJS文件是JS和TS时,我正在尝试构建混合应用程序。 我似乎无法添加到JS控制器的路由。
我依赖以下示例并执行以下操作:
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);
当我运行应用程序时,我得到:
名称为“mainController”的控制器未注册
但是当我在控制台中运行时,我确实看到了它:
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文件使用全局app
并向其添加依赖项:
...
declare const app: any;
declare var appDependencies: any;
export const appModuleAngularJS = app;
angular.forEach([
uiRouter, upgradeModule.name
], module => {
appDependencies.push(module);
});
...
const statesConfigBlock = ['$stateProvider', $stateProvider => {
$stateProvider.state('main', {
url: '/main',
templateUrl: 'app/components/layout/mainView.html',
controller: 'mainController as main'
})
}];
appModuleAngularJS.config(statesConfigBlock);
...
现在, index.html
文件中js导入的顺序非常重要。 应该首先app
减速文件,然后是所有Angular 1.x控制器和服务,然后是转换为js文件的* .ts文件。
这个解决方案对我有用,但我非常乐意阅读更好的解决方案。
干杯!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.