UIRouter and LazyLoad controllers?

H

HAbRAhabp2016-03-11 15:39:01

Angular

HAbRAhabp, 2016-03-11 15:39:01

I'm trying to load the controller needed for it every time the page is loaded via LazyLoad. My code:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="Arenda" ng-controller="RootController">

    <div ui-view="navBar" class="animate-hide" ng-hide="navBarHide"></div>

    <div ui-view="bgPageHeader" class="animate-if" ng-hide="bgPageHeaderHide"></div>

    <div ui-view></div>

    <script src=bower_components/jquery/dist/jquery.min.js></script>

    <!-- angularjs -->
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/angular-aria/angular-aria.min.js"></script>
    <script src="bower_components/angular-messages/angular-messages.min.js"></script>
    <!-- ui-router -->
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <!-- ocLazyLoad -->
    <script src="bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
    <!-- angular material -->
    <script src="bower_components/angular-material/angular-material.min.js"></script>

    <!-- app -->
    <script src="js/angular/init.js"></script>
    <script src="js/angular/states.js"></script>
    <script src="js/angular/ocLazyLoad.js"></script>
</body>
</html>

js/init.coffee

app = angular.module "Arenda", [
  'ngMaterial'
  'ui.router'
  'oc.lazyLoad'
  'ngSanitize'
  'ngAnimate'
] # module init
app.run [
  '$rootScope'
  ($rootScope) ->
       # some code here

js/states.coffee

app.
config [ # config

  '$stateProvider'
  '$urlRouterProvider'
  ($stateProvider, $urlRouterProvider) ->
    $urlRouterProvider
      .otherwise '/' # редирект, если роут не найден

    $stateProvider # правида
# restricted
    .state "restricted",
      abstract: true
      url: ""
      views:
        navBar:
          templateUrl: 'shared/navbar.html'
        "bgPageHeader":
          templateUrl: 'shared/bg-pageheader.html'
        "":
          template: "<div ui-view></div>"
      resolve:
        deps: ['$ocLazyLoad', ($ocLazyLoad) ->
          $ocLazyLoad.load [
            "bootstrap"
          ],{ serie: true }
        ]

    .state "restricted.landing",
      url: "/"
      controller: 'RoomController'
      templateUrl: "shared/rooms.html"
      resolve:
        deps: ['$ocLazyLoad', ($ocLazyLoad) ->
          $ocLazyLoad.load [
            "js/angular/controllers/RoomController.js"
          ],{ serie: true }
        ]
    return
]

js/ocLazyLoad.coffee

app.
  config [
    '$ocLazyLoadProvider'
    ($ocLazyLoadProvider) ->
      $ocLazyLoadProvider.config
        debug: true
        events: false
        modules: [
          {
            name: 'bootstrap'
            files: [
              'bower_components/tether/dist/js/tether.min.js'
              'js/bootstrap.min.js'
              'css/bootstrap.min.css'
              'css/style.css'
              'bower_components/angular-material/angular-material.min.css' # angular material
              'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' # font awesome
            ]
            serie: true
          }
        ]
]

I will not give RoomController's code, because there is a lot of it, but the point is that if I move it to init.coffee, then everything works as it should.
But I always get an Exception in the browser

Error: [ng:areq] http://errors.angularjs.org/1.5.0/ng/areq?p0=RoomController&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at http://localhost:63342/arenda/bower_components/angular/angular.min.js:6:416
    at sb (http://localhost:63342/arenda/bower_components/angular/angular.min.js:23:63)
    at Sa (http://localhost:63342/arenda/bower_components/angular/angular.min.js:23:150)
    at http://localhost:63342/arenda/bower_components/angular/angular.min.js:86:318
    at http://localhost:63342/arenda/bower_components/angular-ui-router/release/angular-ui-router.min.js:1:32868
    at ka (http://localhost:63342/arenda/bower_components/angular/angular.min.js:79:16)
    at u (http://localhost:63342/arenda/bower_components/angular/angular.min.js:66:326)
    at g (http://localhost:63342/arenda/bower_components/angular/angular.min.js:58:136)
    at http://localhost:63342/arenda/bower_components/angular/angular.min.js:57:279

Such a picture in the F12 tab -> Network

For some reason here -> http://altair_app.tzdthemes.com/ an application with the same architecture works, I apparently missed something.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

H

HAbRAhabp, 2016-03-11
@HAbRAhabp

Hmm, everything turned out to be very simple. In RoomController.jsI assigned the controller through a variable app, but it was necessary to specify the module explicitly, that isangular.module("Arenda")