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.
Related
Really don't understand how to load third party libraries using Require.js in Angular.js project
For example 'topojson' is defined, but 'datamap' is undefined in this case.
Datamap from here https://github.com/markmarkoh/datamaps/blob/master/dist/datamaps.world.js
Topojson from here https://github.com/mbostock/topojson/blob/master/topojson.js
Angular app.js:
'use strict';
requirejs.config({
paths: {
'angular': ['../lib/angularjs/angular'],
'angular-route': ['../lib/angular-route/angular-route'],
'angular-resource': ['../lib/angular-resource/angular-resource'],
'angular-animate': ['../lib/angular-animate/angular-animate'],
'datamap':['../app/dense/world-view/datamaps.world'],
'topojson':['../app/dense/world-view/topojson'],
'lodash': ['../lib/lodash/lodash'],
'd3': ['../lib/d3js/d3']
},
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
deps: ['angular'],
exports: 'angular'
},
'angular-resource': {
deps: ['angular'],
exports: 'angular'
},
'angular-animate': {
deps: ['angular'],
exports: 'angular'
},
'd3': {
exports: 'd3'
},
'topojson': {
deps: ['d3'],
exports: 'topojson'
},
'datamaps': {
deps: ['d3', 'topojson'],
exports: 'datamaps'
},
'lodash': {
exports: 'lodash'
}
}
});
require(
[
'angular',
'topojson',
'datamap',
'angular-route',
'angular-resource',
'angular-animate',
'lodash',
'd3'
],
function (angular, topojson, datamap) {
console.log("topojson", topojson);
console.log("datamap", datamap); // is undefined
angular.module('myApp', [
'myApp.graph',
'myApp.node',
'myApp.dense',
'ngAnimate',
'ngRoute'])
.config(function ($routeProvider) {
$routeProvider.otherwise({
redirectTo: '/login'
});
})
;
angular.bootstrap(document.getElementById("myAppId"), ['myApp']);
});
Some of the Angular controllers:
'use strict';
define(['angular'], function (angular) {
angular
.module('myApp.dense', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/dense', {
templateUrl: 'assets/app/dense/dense.html',
controller: 'DenseCtrl'
});
}])
.controller('DenseCtrl', function ($scope) {
var map = new Datamap({
scope: 'world',
element: document.getElementById("someId"),
projection: 'mercator',
height: 500,
fills: {
defaultFill: '#f0af0a',
lt50: 'rgba(0,244,244,0.9)',
gt50: 'red'
},
data: {
}
});
})
;
});
In my angular controller new Datamap(...) says 'ReferenceError: Datamap is not defined'
This is not the only case.
Same for most external JS libraries.
I am running Angular project on top of Scala and SBT with WebJars, so Require.js is the only way how to load all that stuff.
I don't see any imports except for angular in your RequireJS module (the second snippet in your question). You need to add your other dependencies, such as datamap, etc.
Looks like in 'Datamap' object does not initialize, line 12535:
https://github.com/markmarkoh/datamaps/blob/master/dist/datamaps.world.js#L12535
// expose library
if (typeof exports === 'object') {
d3 = require('d3');
topojson = require('topojson');
module.exports = Datamap;
}
else if ( typeof define === "function" && define.amd ) {
define( "datamaps", ["require", "d3", "topojson"], function(require) {
d3 = require('d3');
topojson = require('topojson');
return Datamap;
});
// window.Datamap = window.Datamaps = Datamap; // hack
}
else {
window.Datamap = window.Datamaps = Datamap;
}
Now it works for me.
Added that line after define:
window.Datamap = window.Datamaps = Datamap; // hack
and used require block inside Angular controller:
requirejs(["datamaps"], function () {
// draw map here new Datamap({...})
};
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>
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');
}]);
});
I have a web application using angular v1.1.5 and i am trying to update this to v.1.2.9.
I have downloaded v1.2.9 and the corresponding route.js file however when trying to run my application, i am seeing the below:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=app&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.9%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1
main.js:
(function(require) {
'use strict';
require.config({
baseUrl: '/resources/js',
paths: {
'zepto' : 'vendor/zepto',
'jquery' : 'vendor/jquery',
'angular' : 'vendor/angular',
'ngRoute' : 'vendor/route',
// 'ngResource': 'vendor/resource',
'router' : 'vendor/page',
'history' : 'vendor/history.iegte8',
'event' : 'vendor/eventemitter2'
},
shim: {
'zepto' : { exports: '$' },
'angular' : { deps: ['jquery'], exports: 'angular' },
'ngRoute' : { deps: ['angular'], exports: 'angular' },
// 'ngResource': { deps: ['angular'], exports: 'angular' },
'app' : { deps: ['angular'] },
'router' : { exports: 'page'}
}
});
require(['angular', 'app'], function (angular, app) {
angular.bootstrap(document,['app']);
});
})(this.require);
app.js:
define("app", ["angular"], function(angular){
var app = angular.module("app", ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
})
.when("/products", {
templateUrl: "products.html",
controller: "ProductsController"
})
.otherwise({ redirectTo: '/products'});
});
return app;
});
Any advice appreciated.
Update**********************************************
If i change (app.js):
define("app", ["angular"], function(angular){
to:
define("app", ["angular", "ngRoute"], function(angular){
I get the following error:
TypeError: e is undefined
...controller,f),b.controllerAs&&(a[b.controllerAs]=f),c.data("$ngControllerControl...
I'm not familiar with require.js, but wouldn't you need to inject it here as well?
require(['angular', 'ngRoute', 'app'], function (angular, app, ngRoute) {
angular.bootstrap(document,['app', 'ngRoute']);
});
I might be out on deep waters here though.