Гибридное приложение Angular 1.x + Angular 6 с файлами Vanilla JS и TS в Angular 1.x - PullRequest
Новая
       38

Гибридное приложение Angular 1.x + Angular 6 с файлами Vanilla JS и TS в Angular 1.x

0 голосов
/ 26 августа 2018

Я пытаюсь создать гибридное приложение, когда файлы 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"];
});

1 Ответ

0 голосов
/ 28 августа 2018

Хорошо, думаю, мне удалось заставить его работать.Возможно, это не лучшее решение, но оно здесь.

Сначала я создал файл js, в котором содержится объявление модуля: 

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

Все контроллеры и службы Angular 1.xиспользуйте глобальную переменную app примерно так: 

(function(app) {
  'use strict';

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

      }]);
})(app);

Наконец, файл TS модуля Angular 1.x использует глобальную 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);

...

Теперь порядок импорта js в файл index.html действительно важен.Сначала должен быть файл замедления app, затем все контроллеры и службы Angular 1.x, а затем файлы * .ts, которые были перенесены в файл js.

Это решение сработало для меня, но я 'Я более чем счастлив читать лучше.

Ура!

...