Develop Reference

Syntax for Extending AngularJS Route Provider

Hopefully this question doesn't get erroneously marked as a duplicate.
I am attempting to extend the AngularJS $routeProvider, as suggested as a response to a previous question. Unfortunately, this is not working, and I may have the syntax incorrect.
Here is a sanitized version of my "top-level" module:
// app.js
angular.module('app', ['ngRoute', 'ngSanitize'
, 'main'
])
.provider('appRoute', ['$routeProvider', function($routeProvider) {
this.$get = function($http) {
console.log("Instantiaing $rmaRouteProvider");
var universalResolves = {authorize: function($http) {
return $http.get('/svc/authorize/view?urlPath=' + path)
.then(function(response) {
var data = response.data;
if (response.data.result === 'NOT_AUTHORIZED') {
throw "NOT_AUTHORIZED";
}
console.log("finished authorized()");
return data;
});
}
};
var rmaRouteProvider = angular.extend({}, $routeProvider, {
when: function(path, route) {
route.resolve = (route.resolve) ? route.resolve : {};
angular.extend(route.resolve, universalResolves);
$routeProvider.when(path, route);
return this;
}
});
return rmaRouteProvider;
}
}]);
Here is my main.js, where I am attempting to define routes using the appRoute provider instead of the $routeProvider:
angular.module('admin', ['ngRoute', 'ngSanitize', 'ngCsv'])
.config(['appRouteProvider', function(appRouteProvider) {
appRouteProvider.when('/route', {
templateUrl: 'pageTemplate.tmpl.html',
controller: 'pageCtrl'
}
]);
Unfortunately, I get the following error:
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module main due to:
[$injector:unpr] Unknown provider: appRouteProvider
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24appRouteProvider
minErr/<#https://localhost:8443/js/angular/angular.js:68:12
createInjector/providerCache.$injector<#https://localhost:8443/js/angular/angular.js:4511:19
getService#https://localhost:8443/js/angular/angular.js:4664:39
injectionArgs#https://localhost:8443/js/angular/angular.js:4688:58
invoke#https://localhost:8443/js/angular/angular.js:4710:18
runInvokeQueue#https://localhost:8443/js/angular/angular.js:4611:11
loadModules/<#https://localhost:8443/js/angular/angular.js:4620:11
forEach#https://localhost:8443/js/angular/angular.js:321:11
loadModules#https://localhost:8443/js/angular/angular.js:4601:5
loadModules/<#https://localhost:8443/js/angular/angular.js:4618:40
forEach#http…
As I said, I'm hoping this is an error with my syntax.
Edit: I realize that instatiation of providers is load-order specific. The app.js is the first <script> imported in the application index.html file and should be loaded first.
Edit 2: I have updated this question to the following: Custom Route Provider when is not a function

Set correctly SignalR-hub configuration with AngularJS

I following this tutorial to implement push notifications with SignalR and toastr
before implement it my app.js is like:
(function () {
'use strict';
var app = angular.module('myPortal', ['common.core', 'common.ui'])
.config(config)
.run(run);
/* Setup global settings */
app.factory('settings', ['$rootScope', function ($rootScope) {
// supported languages
var settings = {....
when I update it as tutorial I have something like this:
(function () {
'use strict';
var app = angular.module('myPortal', ['common.core', 'common.ui'])
.config(config)
.run(run);
$(function () {
$.connection.hub.logging = true;
$.connection.hub.start();
});
$.connection.hub.error(function (err) {
console.log('An error occurred: ' + err);
});
angular.module('app')
.value('notification', $.connection.notification)
.value('toastr', toastr);
/* Setup global settings */
app.factory('settings', ['$rootScope', function ($rootScope) {
// supported languages
var settings = {...
but now my app crash and chrome console throw these issues:
angular.js:68 Uncaught Error: [$injector:nomod] Module 'app' is not
available! You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies as
the second argument.
and
Uncaught Error: [$injector:unpr] Unknown provider: settingsProvider <-
settings
What am I doing wrong? Regards

ngResource/$resource not injected correctly

The current task is to write a client for an API. The $resource module is not getting injected correctly. I have injected ngResource to the module, and then also passed it into the factory declaration. However inside the controller, if I try to console.log($resource), I get the following error:
TypeError: 'undefined' is not a function (evaluating '$resource('https://ourlink.nl',options)')
I am convinced the issue is happening/not happening in app.js, but receptive to input if you have other ideas. Can you help me spot the problem?
restClient.js
function restClient ($resource) {
'use strict';
var options = {};
init();
return {
endpoint: self.endpoint,
sendRequest: sendRequest
};
function init () {
self.endpoint = 'https://ourlink.nl';
}
function sendRequest () {
$resource('https://ourlink.nl', options);
return true;
}
}
module.exports = restClient;
app.js
var angular = require('angular');
// imports
require('angular-resource');
(function (angular, config, loaders, controllers, services, providers) {
'use strict';
angular
.module('at.annabel', [
'ngLocale',
'ngRoute',
'ngResource',
'ngSanitize',
'pascalprecht.translate',
'ui.bootstrap'
])
// constants
.constant('translations', config.translations)
// config
.config([
'$locationProvider',
'config.BASE_PATH',
providers.locationProvider
])
// services
.factory(
'restClient',
['$resource', services.restClient]
)
// controllers
.controller(
'PlaceholderController',
[controllers.PlaceholderController]
)
;
}
))(
angular,
// config
{
menu: require('./config/menu').config
...
}
},
// loaders
{
localeLoader: require('./config/locale-loader')
},
// controllers
{
PlaceholderController: require('./modules/placeholder/placeholder-controller')
},
// services
{
restClient: require('./services/restClient')
},
//providers
{
locationProvider: require('./config/location-provider')
}
);

It turned out to be there the whole time. Since the app does not invoke restClient.js in the browser, I was only seeing the module invoked in test. The test runner wasn't properly set up for $resource, and $resource needed to be injected into the module by the test. Thanks to everyone who took the time to read and investigate. I got caught up on the app.js file, because it is so unconventional, but turns out the whole file is legit.

All AngularJS Controllers Not Loading with LazyLoad

I am trying to lazy load my controllers for my AngularJS app I built along side with requireJS. I have created a custom "lazyLoad" library that creates a resolve object in app.config() routes (also I am using ui-router). If I code the state (without my library) to look like so it works
define(['angular', 'lazyLoader', 'uiRouter'], function(angular, lazyLoader, uiRouter){
var app = angular.module('myApp', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
window.lazy = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
$urlRouterProvider.otherwise('/');
$stateProvider
.state('campaigns', {
url:'/campaigns',
views: {
"top-nav" : {
templateUrl: 'views/home/top-nav.html',
resolve : {
load : ['$q', '$rootScope', function($q, $rootScope){
var d = $q.defer();
require(['../app/controllers/header-controller'], function() {
$rootScope.$apply(function(){
d.resolve();
});
});
return d.promise;
}]
}
},
"fullpage": {
templateUrl: 'views/home/index.html',
resolve : {
load : ['$q', '$rootScope', function($q, $rootScope){
var d = $q.defer();
require(['../app/controllers/home-controller'], function() {
$rootScope.$apply(function(){
d.resolve();
});
});
return d.promise;
}]
}
//controller: 'home-controller'
}
}
});
});
return app;
});
If I attempt to replace the resolve object with my library function it looks would look like this:
define(['angular', 'lazyLoader', 'uiRouter'], function(angular, lazyLoader, uiRouter){
and
.state('home', lazyLoader.route({
url:'/',
views: {
"top-nav" : {
templateUrl: 'views/home/top-nav.html',
controllerUrl: '../app/controllers/header-controller'
},
"fullpage": {
templateUrl: 'views/home/index.html',
controllerUrl: '../app/controllers/home-controller'
}
}
}));
lazyLoader.js
define(function () {
'use strict';
function LazyLoader() {}
LazyLoader.prototype.route = function(config){
var controllerPath;
if(config && config.views){
var singleView = Object.keys(config.views);
for(var i in singleView){
var viewName = singleView[i];
controllerPath = config.views[viewName].controllerUrl;
delete config.views.controllerUrl;
config.views[viewName].resolve = {
load : ['$q', '$rootScope', function($q, $rootScope){
var d = $q.defer();
require([controllerPath], function() {
$rootScope.$apply(function(){
d.resolve();
});
});
return d.promise;
}]
};
}
}
return config;
}
return new LazyLoader();
});
Example Controller
define(['app/module'], function (module) {
lazy.controller('header-controller', ['$scope', function ($scope) {
// stuff here
}]);
});
On a side note I plan on implementing something better than attaching lazy variable to window.
When I code the router like the first example it works. When I use my lazyLoader the one of the two views loads it's controller, the second view's controller's file is started to load (console.logs at the beginning show this) but it cannot resolve "module" in the example above.
link to error: AngularJS Error
Again this issue only happens when using my lazyloader which is producing the same resolve object that I have hard coded in for the version that works.
I have searched high and low and there are a lot of resources out there but I could not find anything that addressed this issue.
Any advice is appreciated!

You are taking too much pain to do lazy loading of controllers & services. There is simple approach to lazy load files with ocLazyLoad. This article might help you resolve the same issue.
https://routerabbit.com/blog/convert-angularjs-yeoman-spa-lazyload/
What you should do is
Add a reference of ocLayzLoad & updated JS files’ reference to load on demand from app.js or .html file of their views.
`bower install oclazyload --save-dev`
Now load the module ‘oc.lazyLoad’ in application. Update app.js file
angular
.module('helloWorldApp', [
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'oc.lazyLoad',
])
Load JS file by adding reference of JS in .html file
<div oc-lazy-load="['scripts/controllers/about.js', 'scripts/services/helloservice.js']">
<div ng-controller="AboutCtrl as about">
Your html goes here
</div>
</div>
If you using Grunt, update Gruntfile to uglyfy, renamed file name & update references in the final .html or .js file.

On the 'myApp' module definition, shouldn't you be returning app variable instead of myApp?
And to avoid exposing lazy to window, you could define it as a property of app variable, this way when you define new functions, you require app first and you can use it:
app.js:
app.lazy = {
controller: $controllerProvider.register,
directive: $compileProvider.register,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
...
return app;
controller.js:
define(['app'], function (app) {
app.lazy.controller('header-controller', ['$scope', function ($scope) {
// stuff here
}]);
});

Unknown Provider e-provider error while using angularjs and ruby on rails

I have a Rails/AngularJS app which works fine in local development environment. However, when I deployed this app to Amazon Cloud the AngularJS returns this error in the browser console:
Unknown provider: eProvider <- e
However it works fine on development environment.
I am accesing the below service from one of my javascript files.. for eg:-
userList. storeActorListWithId()
My service is the following:-
woi.service('userList',['$rootScope', 'userAPI' , 'recoAPI', function($rootScope, userAPI, recoAPI){
var actorList = [];
var actorId = "";
return{
storeActorListWithId: function(data){
actorList = [];
angular.forEach(data,function(actor){
if(actor.castname)
{
actorList.push({name: actor.castname,id: actor.castid});
}
})
} ,
getActorListWithId: function(){
return actorList;
},
storeActorId: function(id){
actorId = id;
},
getActorId: function(){
return actorId;
}
}
}]);
My application.js file is as follows.Is it minification safe or not.
resolve: {
checkActorId: function($route,$location,$rootScope){
var url = $route.current.params.id;
var actorName = url.replace(/\-/g, " ").replace(/\~/g, "-").replace(/\$/g, "/");
var actorList = $rootScope.storeActorNameAndId;
if($rootScope.storeActorNameAndId){
angular.forEach(actorList, function(actor, key){
if(actor.name == actorName){
$rootScope.actorid = actor.id;
}
});
}
else
{
$location.path("home")
}
}
}
I have tried many solution(use of DI) given on the website but none of them is helping me.
Please Help me..
Thanks in advance

Finally got the solution after hours of research.
There was problem of minification-safe annotation in resolve block. This code was giving the above error.
resolve: {
setParams: function($rootScope, $route) {
$rootScope.Programmeid = $route.current.params.programmeid;
$rootScope.channelid = $route.current.params.channelid;
}
}
I resolved it by changing the code to this:
resolve: {
setParams: ['$rootScope', '$route', function($rootScope, $route) {
$rootScope.Programmeid = $route.current.params.programmeid;
$rootScope.channelid = $route.current.params.channelid;
}];
}

In my case (Rails app), I had to remove the uglifier gem from my Gemfile and then remove the config line in config/environments/production.rb:
config.assets.js_compressor = :uglifier

in my case
app.config(function ($stateProvider) {
$stateProvider
.state('A', {
...,
});
});
was changed to
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state('A', {
...,
});
}]);
then minification works