[AngularJS] NG1 + NG2 Hybrid app with modularized controller, services, etc?

[Kyle Thomas]

Currently in my NG1 app I have everything:

<https://lh3.googleusercontent.com/-qkyBOt07Yos/Vx9qxGp5ELI/AAAAAAAAAA8/_Pxq4QLYKJ0efKFA4ba8Ejz_PLVmOMYGACLcB/s1600/Screenshot%2Bat%2BApr%2B26%2B08-18-03.png>


In my NG2 hybrid app I'm loading the module using the system.config()

  

  <!-- Configure System.js, our module loader -->
  <script>
    System.config({
      packages: {        
        "client/app/ts": {
          format: 'register',
          defaultExtension: 'js'
        }
      },
      paths: {
        underscore: './node_modules/underscore/underscore.js',
        interestAppNg1: './client/app/js/app.js'
      }
    });
    System.import('client/app/ts/app.js')
          .then(null, console.error.bind(console));
  </script>

In my app.js I have to include everything (services, controller, config, 
etc) in order to get my app running.


module.exports = angular.module('interestApp', ['ui.router','ui.select',
'ngResource','ngSanitize'])

.service('OrdersService', function($http, $q) {
  this._orders = null;

  this.orders = function() {
    var self = this;
    if(self._orders == null) { 
      // initialize with sample data
      return $http.get("/client/app/js/data/orders-data.json").then(
        function(response) {
          self._orders = response.data;
          return self._orders;
        });
    } else {
      return $q.when(self._orders);
    }
  }
})
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('main', {
      title: 'Home Page',
      templateUrl: '/client/app/main/templates/main.html',
      controller: 'MainController as ctrl',
      url: '/'
    })
   .state('orders', {
      title: 'Current List of Orders',
      templateUrl: '/client/app/orders/templates/orders.html',
      controller: 'OrdersController as ctrl',
      url: '/orders',
      resolve: {
        'orders': function(OrdersService) {
        return OrdersService.orders();
        }
      }
    })

Is it possible to separate these into their own files and load them into 
the index.html?


I really don't want to have to have a huge app.js while I migrate each of 
these pages into NG2 typescript code.


I'm new to NG1 and NG2, so I apologize if this is pretty straight forward 
to accomplish.


Thanks,

Kyle T.

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.