angularjs with requirejs not working - angularjs

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)

Answer 1

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');
}]);
});