CODEWITHSUNDEEP
angularjsrequirejs
Deepak
Deepak

Reputation: 1042

Loading controller js files using require.js

I am learning to implement require.js to load the necessary javascript files. I am able to load java script files using require.js which in replace of <script> tags. Even though I am able to load the js files, the content inside the files are not accessible and getting the error saying 'CarApp module not found'. How would this makes the difference?

My index.html where I load require.js

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
<link rel="stylesheet" href="/vendor/bootstrap-2.3.1/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="/css/style.css" media="screen">
<script src="/vendor/angularjs-1.0.5/angular.min.js"></script>
<script src="/vendor/angularjs-1.0.5/angular-resource.min.js"></script>

<script data-main="/js/main" src="/js/require.js"></script>

<div ng-app="CarApp" class="containr">
  <div ng-view>
    <!-- partial will go here -->
  </div>
</div>

/js/main.js

requirejs.config({
    paths: {
        controllers: './controllers',
        app: './app'
    }
});
requirejs(['controllers', 'app'],
function   (controller, app) { });

/js/app.js

var CarApp = angular.module('CarApp', ['ngResource'])

CarApp.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {controller: ListCtrl, templateUrl: '/partials/list.html'}) 
    .otherwise({redirectTo: '/'})
    $locationProvider.html5Mode(true)
})

After loading the app.js file using require.js, it is not able to access 'CarApp' module inside app.js. why is this happening? How can I access 'CarApp module' through main.js.

Upvotes: 1

Views: 1684

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40318

Your files loaded with RequireJS are not loaded on the page ready event, the time that Angular tries to bootstrap. That is why the CarApp module is not found.

You should bootstrap Angular manually (ref):

  1. Remove the ng-app directive, replace it with an id:

    <div id="mainContainer" class="containr">

  2. Bootstrap manually in main.js:

    requirejs(['controllers', 'app'], function(controller, app) {
    angular.element(document).ready(function() {
        angular.bootstrap(document.getElementById('mainContainer'), ['myApp']);
    });
});

Also check out angular-require-lazy for some, potentially useful, ideas.

Upvotes: 1

Related Questions