We Keep Coding

Issue in Angular route

I have an AngularJS application. I recently added couple of routes but they don't work. The rest is working fine.
I included them in my index.html
<script src="privacy_policy/privacy_policy.js"></script>
<script src="contacts/contacts.js"></script>
I added them in my app.js file:
angular.module('myApp', [
...
'myApp.privacy_policy',
'myApp.contacts',
...
]).
The route system:
$routeProvider.when('/privacy_policy', {
templateurl: 'privacy_policy/privacy_policy.html',
data: {
needauth: false
}
});
$routeProvider.when('/contacts', {
templateurl: 'contacts/contacts.html',
data: {
needauth: false
}
});
I added a simple controller:
'use strict';
angular.module(
'myApp.privacy_policy', ['ngRoute']
).
config(['$routeProvider', function($routeProvider) {
}]).
controller('PrivacyPolicyCtrl', ["$scope", "$http", "store", "URL", function($scope, $http, store, URL) {
}]);
And some simple html:
<div ng-controller="PrivacyPolicyCtrl" class='row below-header'>
PRIVACY POLICY
</div>
Finally I created a simple link to that view:
<li><a href='/privacy_policy'>Privacy policy</a></li>
I created the SAME things for contacts but if I click on those link ng-view is completely empty.
All the others route are working fine and I can't see any difference. I get no error on the console.
In the route system in app.js If I put a different template, for example:
$routeProvider.when('/privacy_policy', {
templateurl: 'faq/faq.html',
data: {
needauth: false
}
});
The faq page is diplayed correctly. What am I missing?

Ok I finally find you what the problem is.
I only needed to change this:
templateurl: 'contacts/contacts.html',
with this:
templateUrl: 'contacts/contacts.html',

Route "ui-route" not working. TemplateUrl html not visible in ui-view

I use ui-router angular js file for routing and its not working when used in a complex scenario. I have posted all my code in Plunker for your view and thanks in advance for your time and help.
"use strict";
var app = angular.module( "productManagement", ["ui.router", "common.services", "productResourceMock"] );
app.config([ "$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider){
// Redirect to home view when route not found
$urlRouterProvider.otherwise("/");
$stateProvider
// Home state routing
.state("home", {
url: "/",
templateUrl: "route-welcome.html"
})
.state("productList", {
url: "/products",
templateUrl: "route-productlist.html"
})
.state("productDetail", {
url: "/products/detail/:productId",
templateUrl: "route-productdetail.html"
})
}
]);
Plunker link here

Your requests for template pages are being caught by the $httpBackend, which doesn't know about your .html files. It is instead throwing errors like the following:
Error: Unexpected request: GET route-welcome.html
No more request expected
To fix this, you can add a passThrough to your app.run:
....
$httpBackend.whenGET(productUrl).respond(products);
$httpBackend.whenGET(/\.html$/).passThrough();
....

AngularJS app initiating twice (tried the usual solutions..)

SOLVED:
Resolution here:
https://stackoverflow.com/a/29662815/4004456
Batarang Chrome plugin was firing all ng-click actions twice. Nothing wrong with my code.. Batarang owes me an afternoon...
NOTE: I have attempted all fixes in: Combating AngularJS executing controller twice
EDIT: something puzzling:
It seems all controllers are initialised twice, as it doesn't matter which view calls which function, it its fired twice, this is what lead me to believe it is a problem within the app.js file..
EDIT: resolutions I've attempted:
I've tried removing bower dependencies one by one to rule out a dependency causing it.
I've scoured my code for double controller init (both in index.html and then again in a div / bootstrap init. )
I've removed my custom directives one by one to ensure the "restrict:" / controller duplication isn't occurring.
I've removed all ng-if statements from the application.
Scoured all html for a duplicate ng-view / ui-view etc.
Tried all combinations of routes + links having and not having trailing slashes.
My issue however is nearly identical to the above question, my controllers are firing functions twice on button click.
I've tried to set up a plunkr but the code is too complex for me to get it working properly.. I've stripped any bloat out of the below code.
index.html
<section ng-show="!stateIsLoading"> <div ng-view></div></section>
<section class="colorful" ng-hide="!stateIsLoading">
<three-bounce-spinner></three-bounce-spinner>
</section>
app.js
'use strict';
/**
* #ngdoc overview
* #name smcmsApp
* #description
* # smcmsApp
*
* Main module of the application.
*/
angular
.module('smcmsApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap',
'angular-spinkit',
'restangular'
])
.config(function ($routeProvider, RestangularProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/sales', {
templateUrl: 'views/sales.html',
controller: 'SalesCtrl',
resolve: {
mailers: function (API) {
return API.mailers.getList();
},
totals: function (Restangular) {
return Restangular.all('profit').customGET();
}
}
})
.when('/design', {
templateUrl: 'views/design.html',
controller: 'DesignCtrl',
resolve: {
design: function (API) {
return API.design.getList();
}
}
})
.otherwise({
redirectTo: '/'
});
RestangularProvider.setBaseUrl('http://localhost/SMCMS_Angular/api/Slim/');
})
.run(function ($rootScope, $log) {
$rootScope.stateIsLoading = false;
$rootScope.$on('$routeChangeStart', function () {
console.log("route change start");
$rootScope.stateIsLoading = true;
});
$rootScope.$on('$routeChangeSuccess', function () {
console.log("route change success");
$rootScope.stateIsLoading = false;
});
$rootScope.$on('$routeChangeError', function () {
//catch error
console.log("Route changing animation error");
});
});
DesignCtrl.js
angular.module('smcmsApp')
.controller('DesignCtrl', function ($scope, $log, design, Notifications, Data) {
/* ------------------------- Order Interactions --------------- */
$scope.saveOrder = function (order) {
Notifications.addAlert('error', 'called showModal() from design.js');
$log.debug("called showModal() from design.js");
};
});
views/design.html
<label ng-click="saveOrder(order)" class="btn btn-default">Save Details <span class="glyphicon glyphicon-floppy-open"></span>

I believe the problem is in the way the app handles during initialization. If you navigate to your application http://example.com/ then your url will be an empty string and trigger the route change. After it fails to resolve it will then hit the otherwise and cause the double route change/initialization.
Basically if you fire up the route yourself upon load you shouldn't see the double change. You can just inject the $location service and direct there yourself inside of the run assuming you want to start at any one given point. (see the plunk: http://plnkr.co/edit/lTOSYX?p=preview )
.run(function ($rootScope, $log, $location) {
$location.path('/');//Add this
// continue code here
});
If your controllers are double loading then you probably have other complications such as the double controller declaration/execution issue mentioned in the note (Combating AngularJS executing controller twice).

Using ocLazyLoad to lazy load a controller with $stateProvider

I'm having issues using oclazyload with $stateProvider.
I have specified that the controller .js should be loaded in the router config, and it does,' but it's not available to use as an ng-controller attribute in the file loaded in templateURL.
ui-route config:
core
.run(
[ '$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
[ '$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
console.info('Routing ...');
$urlRouterProvider
.otherwise('/app/dashboard');
$stateProvider
.state('app', {
abstract: true,
url: '/app',
templateUrl: 'templates/app.html',
})
.state('app.orders', {
abstract: true,
url: '/orders',
templateUrl: 'templates/orders/orders.html',
})
.state('app.orders.index', {
url: '/index',
templateUrl: 'templates/orders/index.html',
resolve: {
deps: ['$ocLazyLoad',
function( $ocLazyLoad ){
console.info('Path ot order controller in route config',Momento.paths.js + 'controllers/orders/index.js');
return $ocLazyLoad.load([
Momento.paths.js + 'controllers/orders/index.js'
])
}
]
}
})
}
]
)
;
And my templateURL file starts:
<div class="" id="" ng-controller="OrdersIndexController">...</div>
But when it loads, console throws the error:
<info>orders/index controller loaded controllers/orders/index.js:3
<info>Now I've finished loading the controller/order/index.js config/ui-router.js:69
<info>orders template loaded VM30437:1 (<-- this is the app.orders abstract template with ui-view directive ready for app.orders.index view)
<error>Error: [ng:areq] Argument 'OrdersIndexController' is not a function, got undefined
... <trace>
So the file is loaded correctly by lazyload, confirmed by console output above and network tab in developer tools, but it's not available in the templateURL to use as controller? Does it need to be aliased either in router config using controller:'' key or in template? Does it need to be specifically attached to the (only) module in this app?
What am I missing?
PS: confirming that the name of the controller is in fact OrdersIndexController:
core
.controller('OrdersIndexController', [
'Model', '$scope', '$window',
function( Model, $scope, $window){
console.info("OrdersIndexController fired");
}
]);

You have to register your controller with
angular.module("myApp").controller
Working
angular.module("myApp").controller('HomePageController', ['$scope', function ($scope) {
console.log("HomePageController loaded");
}]);
Not working
var myApp = angular.module("myApp")
myApp.controller('HomePageController', ['$scope', function ($scope) {
console.log("HomePageController loaded");
}]);

Inside the function function($ocLazyLoad){} you must to declare the name of module that contains the controller and the name of file "to lazy load"
function( $ocLazyLoad ){
return $ocLazyLoad.load(
{
name: 'module.name',
files: ['files']
}
);
}

If you use the current documented way for ocLazyLoad 1.0 -> With your router
...
resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load('js/AppCtrl.js');
}]
}
then in js/AppCtrl.js
You have something like this:
angular.module("myApp").controller('DynamicNew1Ctrl', ['$scope', function($scope) {
$scope.name = "Scoped variable";
console.log("Controller Initialized");
}]);
Note that with angular.module("myApp") you are attaching the new controller to an existing module, in this case the mainApp, so any of new dynamic controllers can use the app dependencies.
but you can define a new module an inject your dependencies, as described here, the later is used commonly when you estructure your app with a plugin architecture and you want to isolate the dynamic modules so they only have access to some especific dependencies

Angularjs controller not found

As I felt my single controller was growing too large I am now trying to make use of multiple controllers. However, my UserController can't be found for some reason when I navigate to /signup. I'm getting this error:
Error: [ng:areq] Argument 'UserController' is not a function, got undefined
app.js
var app = angular.module('myApp', [
'ui.router',
'ngResource',
'myApp.controllers',
]);
angular.module('myApp.controllers', []);
app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('signup', {
url: '/signup',
templateUrl: 'views/signup.html',
controller: "UserController"
});
});
I'm including the .js files in this order:
<script src="angular/controllers/mainCtrl.js"></script> //binded to body tag
<script src="angular/controllers/userCtrl.js"></script> //set in signup state
<script src="angular/app.js"></script>
UserController
angular.module('myApp.controllers').controller('UserController', function () {
//do stuff
});
What am I missing?

Make it easier on yourself and create cleaner code.
var app = angular.module('myApp', [
'ui.router',
'ngResource',
'myApp.controllers',
])
.config(function($stateProvider) {
$stateProvider
.state('signup', {
url: '/signup',
templateUrl: 'views/signup.html',
controller: "UserController"
});
});
you weren't using $urlRoutProvider and $httpProvider so why inject them?
Angular Modules are good for nothing...so far. Except for loading 3rd-party angular code into your app and mocking during testing. Other than that, there is no reason to use more than one module in your app.
To create your UserController do a
app.controller('UserController', function ($scope) {
//do stuff
});

<script src="angular/controllers/mainCtrl.js"></script> //binded to body tag
<script src="angular/controllers/userCtrl.js"></script> //set in signup state
<script src="angular/app.js"></script>
You cant use a module before it's declared.so switch the scripts order.
You should stick to 1 independent module declaration per file and you'll be fine,otherwise you'll have to manage script order.

Your app.js has to be declared first like below BEFORE you pull in its controller subcomponents:
<script src="angular/app.js"></script>
<script src="angular/controllers/mainCtrl.js"></script> //binded to body tag
<script src="angular/controllers/userCtrl.js"></script> //set in signup state