Error occured when implement requirejs in angularjs - angularjs

I want to create one Module with multiple controller in different file so i use requirejs but when i implement there error are occured in angular js
These error are occured when i implement requirjs
1.
2.
-----------------------
This is my main.js File
require.config({
paths: {
'angular' : '/js/Angular.js',
'ngRoute': '/js/Angular-Route.js',
'angularAMD': 'http://cdn.jsdelivr.net/angular.amd/0.2/angularAMD.min',
'Workflow': 'Workflow'
},
waitSeconds: 0,
shim: {
'angular': {
exports: 'angular'
},
'angularAMD': {
deps: ['angular']
},
'ngRoute': {
deps: ['angular']
},
'Workflow': {
deps: ['angular']
}
},
deps: ['Workflow']
});
This is App.js File
define(['angular', 'angularAMD', 'ngRoute'], function (angular, angularAMD) {
var Workflow = angular.module("Workflow", ["ngRoute"]);
Workflow.config(function ($routeProvider) {
$routeProvider
.when("/home", {
controller: 'WorkflowController',
template: '<dt-task></dt-task>'
})
.when("/second", {
templateUrl: "/Directive/second.html",
})
});
return angularAMD.bootstrap(Workflow);
});
This is Controller
define(['Workflow'], function (Workflow) {
Workflow.controller("WorkflowController", function ($scope) {
$scope.task = {
task: null,
url: null,
Method: null,
Auth: null,
params: [
{ key: '', value: '' },
]
};
$scope.addTextBox = () => {
$scope.task.params.push({ key: '', value: '' });
}
$scope.addtask = () => {
$scope.Atask = {
"Task": $scope.task.task,
"Url": $scope.task.url,
"Method": $scope.task.Method,
"Auth": $scope.task.Auth,
"params": [],
}

Related

Use Angular-translate in $stateProvider param

Here is my route config file
$stateProvider.state('process', {
url: '/process',
params: {
title: 'Process Name'
},
views: {
'processDemo': {
component: 'process'
}
},
resolve: {
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('demo');
return $translate.refresh();
}]
}
});
Here is my demo.json file
{
"name": "Process"
}
I want to use demo.json name in my config file. Anybody can help for this?

How to load third party libraries using Require.js in Angular.js project

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({...})
};

angularjs with requirejs not working

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

Upgrading Angular version

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.

Marionette / Backbone routing and controllers with require.js

Could someone please explain/provide an example how to get this routing thingy to work in Marionette.
I would like to get console.log("stuff") after navigating to /#test.
This is what I have so far and it does absolutely nothing (no errors though...):
main.js:
requirejs.config({
baseUrl: '/',
paths: {
'text': '../vendor/javascripts/requirejs-text/text',
'backbone': '../vendor/javascripts/backbone/backbone',
'backbone.wreqr': '../vendor/javascripts/backbone.wreqr/backbone.wreqr',
'backbone.babysitter': '../vendor/javascripts/backbone.babysitter/backbone.babysitter',
'jquery': '../vendor/javascripts/jquery/jquery',
'jquery-ui': '../vendor/javascripts/jquery-ui/jquery-ui',
'json2': '../vendor/javascripts/json2/json2',
'marionette': '../vendor/javascripts/marionette/backbone.marionette',
'underscore': '../vendor/javascripts/underscore/underscore',
'handlebars': '../vendor/javascripts/handlebars/handlebars'
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['jquery', 'underscore', 'json2'],
exports: 'Backbone'
},
'marionette': {
deps: ['backbone'],
exports: 'Marionette'
},
'jquery-ui': {
deps: ['jquery']
},
'handlebars': {
exports: 'Handlebars'
}
}
});
define(["app"], function(App) {
return App.start();
});
app.js:
define(['underscore', 'jquery', 'backbone', 'marionette', 'view', 'router'], function(_, $, Backbone, Marionette, View, Router) {
var App;
App = new Backbone.Marionette.Application();
App.on("initialize:after", function() {
var router, view;
view = new View();
return router = new Router();
});
return App;
});
router.js:
define(["marionette", "controller"], function(Marionette, Controller) {
var AppRouter;
AppRouter = Backbone.Marionette.AppRouter.extend({
controller: Controller,
appRoutes: {
'test': 'testStuff'
},
initialize: function() {
return console.log('router init');
}
});
return AppRouter;
});
controller.js:
define ["marionette"], (Marionette) ->
Controller = Marionette.Controller.extend
initialize: ->
console.log 'controller initialized'
testStuff: ->
alert 'stuff'
# create an instance
Controller = new Controller()
So this thing got solved:
Needed to add
if (Backbone.history) {
Backbone.history.start();
}
after initializing the router

Resources