Integrating AngularJS with RequireJS

Question

Due This Article I try to create an application with AngularJS and RequireJS! I can load angular library... create module and export it to external files! It's ok! But the problem is I can't create configuration and controllers for my module both in main application file and external files! Another issue is I can't load views and controllers in app.js via $routeProvider!!

(Sorry for grammer problems!)

app.js:

require.config({
    baseUrl: "/angularjs/js",
    paths: {
        "angular": "libs/angular.min"
    },
    shim: {
        "angular": {
            exports: "angular"
        }
    }
});

define('app', ['angular'], function(angular){
    var app = angular.module('myApp', []);

    app.config(function($routeProvider, $locationProvider){
        $routeProvider
            .when('/', {
                controller: 'HomeCtrl'
                templateUrl: 'views/home.html'
            });
    });

    return app;
});

require(["app", "controllers/homeController"]);

controllers/homeController.js:

require(["app"], function(app) {
app.controller("HomeCtrl",
    function($scope) {
            $scope.message = "Hello World!";
        }
    );
});

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
    <head>
    <meta charset="UTF-8" />
    <title>Angular.js</title>
    <script type="text/javascript" data-main="js/" src="js/libs/require.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body>
    <div ng-view></div>
    </body>
</html>

views/home.html:

<div ng-controller="HomeCtrl">
<h1>{{messge}}</h1>
</div>

I would go out on a limb and say that "you're doing it wrong." Your controller should be short, simple, and easy to unit test. You can define in different file for organization and use tool like GruntJs, Bower, and Yeoman to merge and minify these files if you really need it to transmit fast. — Noogen
– Noogen, Commented Aug 29, 2013 at 20:55
tnx. I'm new on angular, It is not strange if I'm wrong ;) in fact I want to create a module and export it and use it in controllers and ... (like Node.js) do you know how can I create something like this ? — Aref
– Aref, Commented Aug 30, 2013 at 11:07
Well, Angular is not like nodejs. You can't use module like in node unless you use angular on the server side (express/jade). You want to look into how to create an angular directive. Then look into angular service and factory. — Noogen
– Noogen, Commented Aug 30, 2013 at 17:13
@Aref take a look at my example this may help you plnkr.co/edit/PwazojVEOJEY8dJKQUvT it has jQuery along for the ride just for the heck of it since i created this a while back — David Chase
– David Chase, Commented Sep 12, 2013 at 14:20

user2445933 · Accepted Answer · 2013-12-21 21:40:43Z

1

Here is my version of your example. With a few changes it works fine.

It is better to bootstrap AngularJs application manually, when RequireJs.

I separated app.js file in two: main.js - with configuration of RequireJs and app.js - with AngularJs module declaration. Later, this module is used by homeController for declaration of controller. Then, the controller is required in main.js and the application is bootstrapping.

answered Dec 21, 2013 at 21:40

user2445933

Sign up to request clarification or add additional context in comments.

Comments

guilhebl · Accepted Answer · 2015-02-21 00:14:14Z

I do the angular and requireJS integration placing NG_DEFER_BOOTSTRAP! flag and have separate files for my app config and routing like in:

require.config({    
    baseUrl: 'js/',

    paths: {        
        angular: '../lib/bower_components/angular/angular.min',
        angularRoute: '../lib/bower_components/angular-route/angular-route.min'
    },  

    shim: {     
        'angular': {
            'exports': 'angular'
        },
        'angularRoute':{
            'deps': ['angular']
        }
    },  
    priority: [
        'angular'
    ]
});

//https://docs.angularjs.org/guide/bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';

require([
    'angular',
    'app',
    'routes'
], function(angular, app, routes) {
    'use strict';
    var $html = angular.element(document.getElementsByTagName('html')[0]);  
    angular.element().ready(function() {                
        angular.resumeBootstrap([app['name']]);
    });
});

app.js:

define([
    'angular',
    'filters',
    'services',
    'directives',
    'controllers',
    'animations',
    'angularRoute'
    ], function (angular) {
        'use strict';
        return angular.module('myapp', [
            'ngRoute',
            'ngCookies',
            'ngAnimate',
            'myapp.services',
            'myapp.directives',
            'myapp.filters',
            'myapp.controllers',
            'myapp.animations'
        ]);
});

and routes.js:

define(['angular', 'app'], function(angular, app) {
    'use strict';

    return app.config(['$routeProvider', function($routeProvider) {     
        $routeProvider.    
          when('/home', {
            templateUrl: 'partials/home.html',
            controller: 'HomeCtrl'
          }).
          when('/login', {
            templateUrl: 'partials/login.html',
            controller: 'LoginCtrl'
          }).
          otherwise({
            redirectTo: '/home'
          });       
    }])
});

hope this helps in your scenario.

Collectives™ on Stack Overflow

Integrating AngularJS with RequireJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related