Develop Reference

cannot run log method in config method for angular

I'm trying to intercept specific calls and show an alert to the user. There's already existing code on our project that looks like:
myModule.config([
'$routeProvider', '$locationProvider', "$httpProvider",
($routeProvider: ng.route.IRouteProvider, $locationProvider: ng.ILocationProvider, $httpProvider: ng.IHttpProvider) => {
console.log("in my module");
if (history.pushState) {
$locationProvider.html5Mode(true);
$routeProvider.when('/projects', {
template: Templates.projects,
controller: projectsListControllerName
});
} else {
$routeProvider.when('/', {
template: Templates.projects,
controller: projectsListControllerName
});
}
}
]);
Is there something wrong with console.log("in my module"); in the config method of myModule? My routes still work going to /projects and /, but I never see "in my module" in the console.

Is there something wrong with console.log("in my module"); in the config method of myModule?
Nope. It's okay
My routes still work going to /projects and /, but I never see "in my module" in the console.
/ is guaranteed to work as long as you have a server route returning /. Most likely the same is applying for /projects i.e. the server is returning the page but client side angular isn't picking up the details for /projects
What is broken?
Most likely you don't have an ng-app pointing to the module or if you are using requirejs you are missing a angular.bootstrap call after you load this file.

Angular Uncaught Object

I'm new to Angular so i'm still getting my head around how it works. I've stumbled into a problem however (quite early on...) and the below code is giving me "Uncaught Object" in the console and breaks Angular. The .config section is the culprit, if I remove it, the page loads fine. I'm not entirely sure how the error is being caused because to me, everything looks fine?
var app = angular.module('app', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/dashboard', {
templateUrl: '/app/views/admin.html',
controller: 'DashboardController'
})
.otherwise('/', {
redirectTo: '/'
})
$locationProvider.html5mode(true);
}])
.controller('DashboardController', ['$scope', function ($scope, Security) {
$scope.security = Security;
}])

I had the same error; if you activate Chrome to pause on exceptions, you'll be able to have more detailed error information

.otherwise takes only one parameter - an object which contains information on what needs to be done for routes that are not defined.
In your case, you seem to be passing a route to it in addition to an object.
Replace:
.otherwise('/', {
redirectTo: '/'
})
with
.otherwise({
redirectTo: '/dashboard'
});
Note that you need to redirect to a path that exists. '/' is a path that does not exist. '/dashboard' is a path that does, hence you redirect to it. Or, define a handler for '/' path

I'm posting my own solution, as several factors seem to be behind this issue and nobody has talked about this so far.
That is, try to write your code outside of $.ready();
<script>
$(function(){
// This leaves "Uncaught object" error in Chrome!
// var app = angular.module('testApp', ['ngRoute']);
});
// So get it out of $.ready()!!
var app = angular.module('testApp', ['ngRoute']);
</script>

In this instance it looks like the error has been caused by this:
$locationProvider.html5mode(true); <-- mode should be capital 'M'.

Be sure your angular.js is loaded before angular-route.js in your HTML file.
like:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.js"></script>

I just ran into this, in my case it was due to using UI-Router and having a duplicated state name.

AngularJS locationProvider Routing

I'm very new to Angular and I'm currently building a few test/dummy apps to get my head around the way it works and become more-familiar with SPA's in Angular. However, I've stumbled into an issue when I start adding routes to my application and loading the content via ng-view
$locationProvider doesn't seem to be working correctly because if I go to localhost/sdfsdf then I get cannot GET /sdfsdf when in reality the page should be redirecting to /cocktails.
routes.js
var cocktailApp = angular.module('cocktailApp', ['ngRoute', 'cocktailControllers']);
cocktailApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/cocktails', {
templateUrl: '/partials/cocktail-list.html',
controller: 'cocktailsController'
})
.otherwise({
redirectTo: '/cocktails'
});
$locationProvider.html5mode(true);
}]);

Angular only recognizes anchor URL syntax for URLs pasted directly on the browser. So you have to you try http://localhost/#/sdfsdf instead to make your routing work. Please note that anchor syntax /# was added in previous URL.

Problems injecting kinvey into angular application

I am having some trouble injecting kinvey into my angular application. I have been getting the following error with the code below: Uncaught Error: [$injector:unpr]
var app = angular.module('FantasySeasons', ['snap', 'ngRoute', 'ngResource', 'ngTouch',
'angular-carousel', 'FSControllers', 'FSPartials', 'kinvey']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl : 'partials/home.html',
controller : 'HomeCtrl'
}).otherwise({
redirectTo : '/'
});
}]);
app.run(function($kinvey){
var promise = $kinvey.init({
appKey: 'your app key',
appSecret: 'your app secret'
});
});

As the creator of the Kinvey Angular library, I don’t see anything wrong with declaring the Kinvey dependency.
Since the error message is not specific to any module, I can only guess at this point. One thing to note is the ngRoute module is no longer part of the AngularJS core (since 1.2.0). To use it, you need to include it separately, see docs. Make sure this is the case. Otherwise, you run into that error.

How to split AngularJS application into smaller modules and handle routing correctly?

What would be the best way to split AngularJS application into smaller pieces/module? For example if I have a blog post and commenting enabled for that, I think I could break it down to modules like "posts" and "comments"(?) (maybe not the best example, but the idea is to split the application logic into separate modules rather than building a huge one-module-app).
I've tried to bootstrap both modules in the separate DOM nodes and use routing in both of the modules accordingly. There are few problems:
As a "single-page" application I'm bootstrapping comments module to be used even on the front page even though it's not used there.
Since I'm not able to use multiple ng-views inside ng-app, I'm forced to write all the wrappers for my modules in the index.html view and bootstrap them? Should it be like that? Seems a bit wrong. How/where should I bootstrap those?
Are there any tips for the routing? Should I spread those in the modules or should I combine them all together somehow? (creating one "blog" module to include "posts" and "comments" modules as dependencies would still make it hard to define for example the "/post/:id" routing..?)
index.html
<div class="post"><ng-view></ng-view></div>
<div class="comments"><ng-view></ng-view></div>
javascript.js
angular.module('posts', []).config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
'template': 'Showing all the posts',
'controller': 'postCtrl
})
.when('/post/:id', {
'template': 'Showing post :id',
'controller': 'postCtrl
});
}]);
angular.module('comments', []).config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/post/:id', {
'template': 'Showing post :id comments',
'controller': 'CommentsCtrl'
});
}]);
angular.bootstrap($('.post'), ['posts']);
angular.bootstrap($('.comments'), ['comments']);

I would divide the app in "view modules" and these sub modules.
Then I use the $routeProvider to switch between the views. I define the different routing config in each module.
If I need further submodules, I load these with ng-include.
/* App Module */
angular.module('MyApp', ['MyApp.home', 'MyApp.blog'])
.config( function myAppConfig ( $routeProvider ) {
'use strict';
$routeProvider.otherwise({ redirectTo: '/home' });
});
/* home Module */
angular.module('MyApp.home', [])
.config(['$routeProvider', function config( $routeProvider ) {
$routeProvider.when('/home', {
controller: 'HomeController',
template: '<p>This is my Home</p>'
});
}]);
I created a little repository on github to explain this.

You can define routes in the submodules:
angular.module('app', ['ngRoute', 'app.moduleX'])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
});
//Handle all exceptions
$routeProvider.otherwise({
redirectTo: '/home'
});
})
angular.module('app.moduleX', []).config(function($routeProvider) {
$routeProvider.when('/settings', {
templateUrl: 'partials/settings.html',
controller: 'SettingsCtrl'
});
})
I also wrote a blog post about this topic.

We're doing something similar with a portal app and sub-apps. A few things we've discovered:
Only one "app" can have routes and routeParams. Because of this, if the "sub-app" needs access to the $routeParams, you either have to go "old school" for URL parsing, or use an event service.
Speaking of events, there is no Angular service for the apps to communicate, so you'll need to roll your own event service talking to root scope for both apps and inject it into both apps.
I can't see where we used ng-view for the "sub-app". Apparently bootstrapping directly to an element works similarly.
Because only one app can have routes, the apps should be bootstrapped in order. So something like this:
$( function () {
$.when(angular.bootstrap($('.post'), ['posts'])).done( function() {
console.log('POSTS: bootstrapped');
//Manually add the controller to the comments element. (May or may not be
//necessary, but we were doing something that required it to work.)
$('.comments').attr('ng-controller', 'CommentsCtrl');
$.when(angular.bootstrap($('.comments'), ['comments'])).done( function() {
console.log('COMMENTS: bootstrapped');
});
});
});

I hope you can use "ui-router" routing module.
Here is good tutorial for this http://www.ng-newsletter.com/posts/angular-ui-router.html