Hybrid Angular 1.x + Angular 6 应用程序,在 Angular 1.x 中包含 vanilla JS 和 TS 文件
Hybrid Angular 1.x + Angular 6 App with both vanilla JS and TS files in Angular 1.x
当 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);
最后,Angular1.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 文件。
这个解决方案对我有用,但我很乐意阅读更好的解决方案。
干杯!
当 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);
最后,Angular1.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 文件。
这个解决方案对我有用,但我很乐意阅读更好的解决方案。
干杯!