Issues regarding angularjs + requirejs

Question

Trying to implement modular loading using requirejs into angularjs. Having a hard time to understand requirejs and its config options. Here's what i have so far. My questions are below

index.html

<!DOCTYPE HTML>
<html>
<head>
    <link href="app/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="app/css/style.css" rel="stylesheet"> 
    <script data-main="app/main.js" src="app/vendor/require/require-2.1.11.min.js"></script>
</head>
<body>
    <div id="wrapper">
        <div ng-include="flexyLayout('header')"></div>
        <div ng-view id="content"></div>
        <div ng-include="flexyLayout('footer')"></div>
    </div>
</body>
</html>

main.js

require.config({
    paths: {
        'angular': 'vendor/angular/angular.min',
        'angular-route': 'vendor/angular/angular-route.min',
        'angular-cookies': 'vendor/angular/angular-cookies.min'
    },
    shim: {
        angular: {
            exports: 'angular'
        },
        'angular-route' : {
            exports : 'angular',
            deps : ['angular']
        },
        'angular-cookies' : {
           deps : ['angular']
        }
    }
});

require(
    [
        'angular',
        'app',
        'module/login/login',
        'services/services'
    ],
    function(angular, app) {
        'use strict';
        angular.bootstrap(document, ['myApp']);
    });

app.js

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

    app.config(function ($routeProvider,$httpProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'app/module/public/index.html',
                header: 'app/partials/header.html',
                footer: 'app/partials/footer.html'
            })
            .when('/login', {
                templateUrl: 'app/module/login/login.html',
                header: 'app/partials/header.html',
                footer: 'app/partials/footer.html'
            })
            .when('/home', {
                templateUrl: 'app/module/home/home.html',
                header: 'app/partials/header.html',
                footer: 'app/partials/footer.html'
            })
            .when('/register', {
                templateUrl: 'app/module/register/register.html',
                header: 'app/partials/header.html',
                footer: 'app/partials/footer.html'
            })
            .when('/admin', {
                templateUrl: 'app/module/admin/admin.html',
                header: 'app/partials/header.html',
                footer: 'app/partials/footer.html',
                permission: 'admin'
            })
            .when('/unauthorized', {
                templateUrl: 'app/partials/unauthorized.html',
                header: 'app/partials/header.html',
                footer: 'app/partials/footer.html'
            })
            .otherwise({redirectTo: '/'});
    });

    return app;
});

login.js

define(['app','services/services'], function (app) {
    app.controller('LoginCtrl', function($scope,AuthenticatorService,CookieService,$window,$location) {
        $scope.user = {};

        $scope.login = function() {
            AuthenticatorService.authenticate($scope.user).then(function(response){
                if(response.authentication) {
                    CookieService.saveLoginData(response.user);
                    $window.location.href = $location.absUrl()+'home';
                }else {
                    $scope.error = response.message;
                    $scope.user = {};
                }
            });
        }
    });
});

Questions:

The angularjs cookies file isn't loading up due to which i am getting unknown provider error. When i inspect the element, i can see angularjs and angular-route js files loaded but not angularjs cookies file. Is the setting in shim option incorrect for angular-cookies?
How to load services and directives? My services.js file is inside the services folder. Am i loading it the correct way by calling it in require? Can i load services.js file in the paths option of the require.config?
I read through some of the posts here but did not clearly understand how to use requirejs to load modular file. Example, i have different modules like login , admin, register etc. How do i load the individual module js files using requirejs. Below is my root folder structure

My App root directory structure

I would appreciate if anyone could explain me with code. If you need any other detail plz let me know and sorry for such a long post. Couldn't explain it in brief

Nikos Paraskevopoulos · Accepted Answer · 2014-03-04 10:32:54Z

angularjs cookies file isn't loading: You have to require it from someplace (or use the deps configuration option from require.config()). Providing a shim for it does not automatically require it.
Loading services.js as define([...,'services/services'],...) seems OK. Does it not load? Are you having any other problems?

On the other hand, the paths configuration is a means to provide aliases (so to speak). Like shim, it does not auto-load stuff.
To load the individual modules, you will have to require them from someplace. With Angular, this may lead to awkward situations like:
```
define(["module1","module2","module3",...,"module1024"], function() {
    // do nothing but load all the modules
});
```

I am trying myself to combine AngularJS + RequireJS + the optimizer (see angular-require-lazy and require-lazy). The angular-require-lazy project is far from beign complete, but it may give you some ideas. (I am about to make some major changes to it, fighting some bugs now, but the general idea will remain.)

Also as a sidenote: Maybe you should pause a bit and familiarize yourself with Require, with a small test project or something...

Collectives™ on Stack Overflow

Issues regarding angularjs + requirejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related