I followed this tutorial (https://www.startersquad.com/blog/angularjs-requirejs/) in order to build an application with AngularJS + RequireJS ; the problem I'm facing know is that I don't have any errors, just a blank page..
In hints, I can see for all my modules (including ui-router and app): 'module was created but never loaded' ...
I can't see where I did something wrong, and why anything isn't loaded ; the angular.bootstrap is called, I can see the log around.
Here is my architecture :
main.js
require.config({
// Alias libraries paths
paths: {
'domReady': './app/bower_components/requirejs-domready/domReady',
'angular': './app/bower_components/angular/angular',
'uiRouter': './app/bower_components/angular-ui-router/release/angular-ui-router'
},
// To support AMD
shim: {
'angular': {
exports: 'angular'
},
'uiRouter': {
deps: ['angular']
}
},
// Kick start application
deps: ['./bootstrap']
});
bootstrap.js
/**
* Bootstraps Angular onto the window.document node
*/
define([
'require',
'angular',
'uiRouter',
'app',
'routes'
], function(require, ng) {
'use strict';
require(['domReady!'], function(document) {
console.log('document is ready : ' + document);
ng.bootstrap(document, ['app']);
console.log('after bootstrap');
});
});
app.js
define([
'angular',
'uiRouter',
'./app/components/index'
], function(ng) {
'use strict';
return ng.module('app', [
'app.components',
'ui.router'
]);
});
routes.js
define(['./app'], function(app) {
'use strict';
return app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/javascripts/app/components/home/views/home.html',
controller: 'MainCtrl',
resolve: {
contactPromise: ['contacts', function(contacts) {
return contacts.getAll();
}]
}
})
.state('contacts', {
url: '/contacts',
templateUrl: '/javascripts/app/components/contact/views/list.html',
controller: 'ContactsListCtrl',
resolve: {
contactPromise: ['contacts', function(contacts) {
return contacts.getAll();
}]
}
})
.state('contacts_show', {
url: '/contacts/{id}',
templateUrl: '/javascripts/app/components/contact/views/show.html',
controller: 'ContactsShowCtrl',
resolve: {
contact: ['$stateParams', 'contacts', function($stateParams, contacts) {
return contacts.get($stateParams.id);
}]
}
});
$urlRouterProvider.otherwise('home');
}
]);
});
app/components/index.js
define([
'./contact/index',
'./home/index'
], function() {});
app/components/module.js
define(['angular'], function(ng) {
'use strict';
return ng.module('app.components', []);
});
app/components/contact/index.js
define([
'./controllers/ContactsControllers',
'./services/contactFactory'
], function() {});
app/components/contact/module.js
define(['angular', '../module'], function(angular, module) {
'use strict';
return angular.module('app.components.contact', []);
});
app/components/contact/controllers/ContactsControllers.js (for example)
define(['../module'], function(module) {
'use strict';
module.controller('ContactsListCtrl', [
'$scope',
'contacts',
function($scope, contacts) {
$scope.contacts = contacts.contacts;
$scope.addContact = function() {
if (!$scope.name || $scope.name === '' || !$scope.firstname || $scope.firstname === '') {
return;
}
contacts.create({
name: $scope.name,
firstname: $scope.firstname,
dynamicField: 'test'
});
$scope.name = '';
$scope.firstname = '';
};
}
]);
module.controller('ContactsShowCtrl', [
'$scope',
'contacts',
'contact',
function($scope, contacts, contact) {
$scope.contact = contact;
}
]);
});
Any idea?
EDIT : my angularjs is served by a nodejs server, maybe it changes something..
Here is my index.ejs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Troubadour : Prenez votre groupe en main !</title>
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
-->
</head>
<body>
<div class="container-fluid">
<ui-view></ui-view>
</div>
<!-- .container-fluid -->
<script src="/javascripts/app/bower_components/requirejs/require.js" data-main="/javascripts/main.js"></script>
</body>
</html>
Related
Can someone help me with this routing? It always gives the following error:
Uncaught Error: [$injector:modulerr]
The code in question:
var app = angular.module('mainApp', ['ui.router', 'oc.lazyLoad','ngRoute', 'commonApp', 'adminApp', 'ui.bootstrap', 'gm', 'ngMessages', 'daterangepicker','customDirectives', 'mw-datepicker-range','uiGmapgoogle-maps','ngAutocomplete','ngImageCompress']);
app.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider','uiGmapGoogleMapApiProvider' , function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider,uiGmapGoogleMapApiProvider) {
$urlRouterProvider.otherwise("/home");
//Config For ocLazyLoading
$ocLazyLoadProvider.config({
'debug': true, // For debugging 'true/false'
'events': true, // For Event 'true/false'
'modules': [{ // Set modules initially
name : 'home', // State1 module
files: ['home/home.controller.js',
'home/home.service.js',
'home/homeMapper.service.js',
]
},{
name : 'about', // State2 module
files: ['about/about.controller.js']
}]
});
//Config/states of UI Router
$stateProvider
.state('home', {
url: "/home",
views : {
"" : {
templateUrl:"/home/home.html"
}
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('home'); // Resolve promise and load before view
}]
}
})
.state('about', {
url: "/about",
views : {
"" : {
templateUrl:"/about/about.html"
}
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('about'); // Resolve promise and load before view
}]
}
});
}]);
I am starter on these 2 libraries. Previously I used ng-view for switching views, and now I am migrating to ui-view with RequireJS.
Here my codes
index.html
...
<body ng-cloack ui-router-styles>
<div class="ui-view"></div>
</body>
<script src="components/JS/moment.js"></script>
<script src="components/JS/moment_locale-id.js"></script>
<script src="components/JS/require.js" data-main="main.js"></script>
...
main.js
require.config({
waitSeconds: 0,
baseUrl: '',
paths: {
'angular': 'components/JS/angular.min',
'angularAMD': 'components/JS/angularAMD.min',
'angular-ui-router': 'components/JS/angular-ui-router.min',
'angular-ui-router-styles': 'components/JS/angular-ui-router-styles',
'angular-messages': 'components/JS/angular-messages.min',
'angular-aria': 'components/JS/angular-aria.min',
'angular-animate': 'components/JS/angular-animate.min',
'angular-material': 'components/JS/angular-material.min',
'angular-locale_id-id': 'components/JS/angular-locale_id-id',
'angular-moment': 'components/JS/angular-moment.min',
'moment': 'components/JS/moment'
},
shim: {
'angular': {
exports: 'angular'
},
'angularAMD': ['angular'],
'angular-ui-router': ['angular'],
'angular-locale_id-id': ['angular'],
'angular-ui-router-styles': ['angular-ui-router'],
'angular-aria': ['angular'],
'angular-messages': ['angular'],
'angular-animate': ['angular'],
'angular-material': ['angular', 'angular-animate', 'angular-aria', 'angular-messages'],
'angular-moment': ['moment']
},
deps: ['app']
});
app.js
define([
'angularAMD',
'angular-ui-router',
'angular-ui-router-styles',
'angular-material',
'angular-messages',
'angular-animate',
'angular-aria',
'angular-locale_id-id',
'angular-moment'
],
function (angularAMD, amMoment) {
'use strict';
var app = angular.module('com.malasbelanja.app', ['angularMoment', 'ngMaterial', 'ngMessages', 'ngAnimate', 'ui.router', 'uiRouterStyles']);
app.config(function ($stateProvider, $urlRouterProvider, $mdThemingProvider, $mdGestureProvider, $sceDelegateProvider, $compileProvider, $mdDateLocaleProvider) {
$stateProvider
.state('login', angularAMD.route({
url: '/login',
templateUrl: 'state/views/login.php',
data: {
css: ['state/styles/login.css']
},
/*resolve: {
loadController: ['$q',
function ($q) {
var deferred = $q.defer();
require(['state/controllers/login'], function () {
deferred.resolve();
});
return deferred.promise;
}
]
},*/
controller: 'loginController'
}))
.state('register', angularAMD.route({
url: '/register',
templateUrl: 'state/views/register.php',
data: {
css: ['state/styles/register.css']
}
}));
$urlRouterProvider.otherwise("login");
$mdThemingProvider.theme('default')
.primaryPalette('green', {
'default': '900'
})
.accentPalette('blue', {
'default': '900'
});
$mdThemingProvider.theme('dark')
.primaryPalette('yellow')
.dark();
$mdDateLocaleProvider.formatDate = function (date) {
return moment(date).format('LL');
};
$compileProvider.preAssignBindingsEnabled(true);
$mdGestureProvider.skipClickHijack();
$sceDelegateProvider.resourceUrlWhitelist(['**']);
});
app.controller('loginController', function($scope){
$scope.login = function(){
alert('halo');
};
});
app.run(function (amMoment) {
amMoment.changeLocale('id');
});
angularAMD.bootstrap(app);
return app;
});
But the page goes blank.
Here is the console message:
require.js:5 GET http://bismillah/loginController.js 403 (Forbidden)
require.js:5 Uncaught Error: Script error for "loginController"
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:5)
at HTMLScriptElement.onScriptError (require.js:5)
Note: http://bismillah is my own virtual sever build on XAMPP
I plan to use a dynamic controller files later, and have founded how to provide them (on the comment block : app.js). Now I just want to implementing controller that i have defined in app.js but I keep getting error. Can you solve it? Any help is appreciated, thank you.
I've been working on some boilerplate stuff and ran into something peculiar.
I have a module and it works fine:
define([
'angular',
'angular-couch-potato',
'angular-sanitize',
'angular-ui-router',
], function (ng, couchPotato) {
"use strict";
var module = ng.module('app.home', [
'ngSanitize',
'ui.router'
]);
module.config(function ($stateProvider, $couchPotatoProvider) {
$stateProvider
.state('app.home', {
url: '/',
views: {
"content#app": {
controller: 'HomeCtrl',
templateUrl: 'app/components/home/views/home.html',
resolve: {
deps: $couchPotatoProvider.resolveDependencies([
'components/home/controllers/HomeController'
])
}
}
},
data:{
title: 'Home'
}
});
});
couchPotato.configureApp(module);
module.run(function($couchPotato){
module.lazy = $couchPotato;
});
return module;
});
Now if I remove angular-sanitize from define like so:
define([
'angular',
'angular-couch-potato',
'angular-ui-router',
], function (ng, couchPotato) {
"use strict";
var module = ng.module('app.home', [
'ui.router'
]);
module.config(function ($stateProvider, $couchPotatoProvider) {
$stateProvider
.state('app.home', {
url: '/',
views: {
"content#app": {
controller: 'HomeCtrl',
templateUrl: 'app/components/home/views/home.html',
resolve: {
deps: $couchPotatoProvider.resolveDependencies([
'components/home/controllers/HomeController'
])
}
}
},
data:{
title: 'Home'
}
});
});
couchPotato.configureApp(module);
module.run(function($couchPotato){
module.lazy = $couchPotato;
});
return module;
});
It no longer works. Chrome throws this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.26%2Fangular.min.js%3A18%3A170)
My controller is empty with it's only dependency $scope and the view file just has hello world around p tags.
Can someone please explain to me what I am missing or why this is happening?
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)
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');
}]);
});
Here is the deal. I have a problem with using ui-bootstrap-tpls directives namely "pagination". Library is connected successfully in requirejs, you can see in the haed, but directive is not working.
<script type="text/javascript" data-requiremodule="angularBootstrap" src="/components/angular-bootstrap/ui-bootstrap-tpls.js">
<div ng-controller="myController">
<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
</div>
here is requirejs:
requirejs.config({
baseUrl: '/',
paths: {
'angular': 'components/angular/angular',
'angularRoute': 'components/angular-route/angular-route',
'angularBootstrap': 'components/angular-bootstrap/ui-bootstrap-tpls',
},
shim: {
'angular': {
deps: [ 'jquery' ],
exports: 'angular'
},
'angularRoute': {
deps: [ 'angular' ]
},
'angularBootstrap': {
deps: ['angular']
},
}
});
and app.js:
define(['angular', 'angularBootstrap', 'angularRoute'], function (angular) {
'use strict';
return angular.module('myModule', ['ngRoute']);
});
app.js should be like this:
define(['angular', 'angularBootstrap', 'angularRoute'], function (angular) {
'use strict';
return angular.module('myModule', ['ngRoute','ui.bootstrap']);
});
in return angular.module it was necessary to add 'ui.bootstrap'