在angular1 app上es5到es6 + webpack

Question

I am converting Angular1 to es6 and starting to use webpack. Because of that I need to use 'import/export modules' in all my files.

Do I need to import modules on every file js I have? Even the $window of angular for example? Even on the resolve of a router?

I am struggling with the conversion.

Is there an easy way to do it on a big app?

Thanks!

Answer 1

Things like $window, $timeout, $http are imported when you import angular For any other third-party modules you will need to import the file but also inject it into the app module

Example :

app.js

 import angular from 'angular';
 import 'angular-ui-router';  // A third-party npm module
 import './controllers/users';  // Custom controller
 import config from './config';  // Custom function
 import run from './app.run'; // Custom function
 const app = angular.module('MyApp', [
   'ui.router',
   'MyApp.controllers.users'
 ]);
 app.config(config);
 app.run(run);

controllers/user.js

import angular from 'angular';
import '../services/user';
import './modals/users';

const module = angular.module('MyApp.controllers.users', [
  'MyApp.services.user',
  'MyApp.services.globals',
  'MyApp.modals.user',
]);

const UsersController = ($scope, UserService) => {
  'ngInject';
  $scope.title = 'Users';

  $scope.users = UserService.GetAll();
}
module.exports = module.controller('UsersController', UsersController);