angularjs with requirejs not working

Question

Trying to implement angularjs with requirejs.

I am following this.

Not getting success!

Partials are not going to load. No errors in console. Angularjs is not working: i.e when I simply writes in HTML as : {{1+2}}, it is not printing 3, but as it is {{1+2}}.

main.js

var base_url="http://localhost/ums/angular/js";
require.config({ 
    paths: {
        'angular': base_url+'/angular.min',
        'ngRoute': base_url+'/angular-route.min',
        'angularControllers': base_url+'/admin/demo_angular',
        'flash': base_url+'/angular-flash',
        'angular-loading-bar': base_url+'/loading-bar.min',
        'ngAnimate': base_url+'/angular-animate.min',
        'ui.bootstrap': base_url+'/ui-bootstrap-tpls-0.12.0',
        'input_match': base_url+'/angular-directives',
        'uniqueField': base_url+'/angular-directives',
        'uniqueEdit': base_url+'/angular-directives',
        'angularAMD': base_url+'/angularAMD.min',
        'app': base_url+'/admin/app',

    },
    waitSeconds: 0,
    shim: { 
    'angularAMD': ['angular'], 
    'ngRoute': ['angular'] ,
    'angular-loading-bar': ['angular'] ,
    'ngAnimate': ['angular'] ,
    'ui.bootstrap': ['angular'] ,
    'input_match': ['angular'] ,
    'uniqueField': ['angular'] ,
    'uniqueEdit': ['angular'] ,
    'angularControllers': ['angular','flash'] ,
    'flash': ['angular'] ,
    'app':['angular'],
    },
    deps: ['app']
});

app.js

var base_url="http://localhost/ums/";
define(['angularAMD', 'ngRoute','angularControllers','flash','angular-loading-bar','ngAnimate','ui.bootstrap','input_match','uniqueField','uniqueEdit'], function (angularAMD) {
var app = angular.module('angularapp', ['ngRoute','angularControllers','flash','angular-loading-bar','ngAnimate','ui.bootstrap','input_match','uniqueField','uniqueEdit']);  
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/add_user', angularAMD.route( {
            title : 'Add User',
            controller : 'AddUserCtrl',
            templateUrl : base_url+'angular/partials/admin/add_user.php',
        }))
         .when('/edit_user/:user_id', angularAMD.route( {
            title : 'Edit User',
            controller : 'EditUserCtrl',
            templateUrl : base_url+'angular/partials/admin/edit_user.php'
        }))
        .when('/all_users', angularAMD.route({
        title : 'All Users',
            controller : 'allUsersCtrl',
            templateUrl : base_url+'angular/partials/admin/all_users.php'
        }))
        .when('/dashboard', angularAMD.route({
            title : 'Dashboard',
            controller : 'dashboardCtrl',
            templateUrl : base_url+'angular/partials/admin/dashboard.php'
        }))
          .when('/charts', angularAMD.route({
             title : 'Charts',
            controller : 'dashboardCtrl',
             templateUrl : base_url+'angular/partials/admin/charts.php'
         })) 
        .when('/dropdown_demo', angularAMD.route({
            title : '   Dropdown Demo',
            controller : 'dropdownDemo',
            templateUrl : base_url+'angular/partials/admin/test_dropdown.php'
        }))
        .otherwise({
            redirectTo : '/dashboard'
        });
}]);
app.run(['$rootScope', '$route', function($rootScope, $route) {
    $rootScope.$on('$routeChangeSuccess', function() {
        document.title = $route.current.title;
    });
}]);
//service demo
app.factory('notify', ['$window', function(win) {
   var msgs = [];
   return function(msg) {
     msgs.push(msg);
     if (msgs.length == 3) {
       win.alert(msgs.join("\n"));
       msgs = [];
     }
   };
 }]);

  // Bootstrap Angular when DOM is ready
    return angularAMD.bootstrap(app);

});

demo_angular.js (controllers)

var base_url="http://localhost/ums/";
var angularControllers = angular.module('angularControllers', ['flash']);  
angularControllers.controller('AddUserCtrl', ['$scope','$http', '$timeout','Flash', function($scope,$http, $timeout,Flash){
// doing some stuff
}]);
//..... other controllers...

Note: Before implementing requirejs it was fine. (I am just trying to implement lazy load)

Sorry. Actually I have shown all the code, which i am using. — VBMali
– VBMali, Commented Jul 6, 2015 at 5:46
remove , after last parameter in require.config({ paths: { ...............'app':['angular']**,** try after removing that may work — Himesh Aadeshara
– Himesh Aadeshara, Commented Jul 6, 2015 at 5:47

Johnny Ha · Accepted Answer · 2015-07-06 08:03:12Z

3

Here are one working example based on your code: http://plnkr.co/edit/Y3XpQKa5b9oqaL7aByP4?p=preview

I have stripped some code of yours.

main.js:

var base_url="//cdnjs.cloudflare.com/ajax/libs/";
require.config({
  paths: {
    'angular': base_url + 'angular.js/1.2.16/angular.min',
    'ngRoute': base_url + 'angular.js/1.2.16/angular-route.min',
    'ngAnimate': base_url + 'angular.js/1.2.16/angular-animate.min',
    'angularAMD': 'http://cdn.jsdelivr.net/angular.amd/0.2/angularAMD.min',
    'app': 'app'
  },
  waitSeconds: 0,
  shim: {
    'angular': {
        exports: 'angular'
    },
    'angularAMD': {
        deps: ['angular']
    },
    'ngRoute': {
        deps: ['angular']
    },
    'ngAnimate': {
        deps: ['angular']
    },
    'ngAnimate': {
        deps: ['angular']
    },
    'app': {
        deps: ['angular']
    }
  },
  deps: ['app']
});

app.js: You forgot to include angular and controllerUrl.

var base_url="/";

define(['angular', 'angularAMD', 'ngRoute', 'ngAnimate'], function (angular, angularAMD) {

  var app = angular.module('webbapp', ['ngRoute', 'ngAnimate']);

  app.config(['$routeProvider', function($routeProvider){

    $routeProvider
        .when('/add_user', angularAMD.route( {
            title : 'Add User',
            controller : 'AddUserCtrl',
            templateUrl : 'add_user.html',
            controllerUrl: 'demo_angular.js'
        }))
        .otherwise({
            redirectTo : '/dashboard'
        });
  }]);

  return angularAMD.bootstrap(app);
});

demo_controller.js: Try to include app instead of angular.

define(['app'], function (app) {

  app.controller('AddUserCtrl', ['$scope','$http', '$timeout', function($scope,$http, $timeout){
    console.log('AddUserCtrl');
  }]);

});

edited Jul 6, 2015 at 8:03

answered Jul 6, 2015 at 6:42

Johnny Ha

6335 silver badges21 bronze badges

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

5 Comments

Johnny Ha Over a year ago

Can you try to upload all you code inte a plunker example?

VBMali Over a year ago

Will it work in plunker? Its not that much small to upload, or may be I can't.

Johnny Ha Over a year ago

Why not? Just try to not include php code. I don't think that would be a problem :)

VBMali Over a year ago

Is that loading sequence matters? Because when i see in developer tool by clicking on NET tab: sequence is: require.js, main.js, app.js,angular.min.js,angularAMD.min.js,angular-route-min.js,angular-flash.js,.....

Johnny Ha Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

angularjs with requirejs not working

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related