Develop Reference

Error: ng:areq Bad Argument AngularJS

I am working on a new portfolio site and want to use AngularJS to display my work and pure css to format layout etc.
I found a useful tutorial that outlined how to structure your app for future scaling and have set up a file tree like so:
so each component is a basically a mini MVC. I have set up my routes in app.routes.js and organised app.module.js as below:
app.module.js:
angular.module('app', ['ngRoute', 'appControllers', 'appResources']);
angular.module('appControllers', ['ngRoute']);
angular.module('appResources', ['ngResource']);
app.route.js:
angular.module('app')
.config(['$routeProvider', function ($routeProvider) {
'use strict';
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'app/components/home/home-view.html',
controller : 'HomeCtrl'
})
// route for the about page
.when('/about', {
templateUrl : 'app/components/about/about-view.html',
controller : 'AboutCtrl'
})
// route for the contact page
.when('/contact', {
templateUrl : 'app/components/contact/contact-view.html',
controller : 'ContactCtrl'
});
}]);
so this is my set up, for now, I just need to see that each controller for the routes are working and then I will begin adding in my content, but I have hit a hurdle straight away as the controllers for each view are showing as undefined.
Here is an example of a controller, they are all the same at the moment, but with a different message:
angular.module('appControllers')
.controller('AboutCtrl', ['$scope', '$http', function ($scope, $http) {
'use strict';
$scope.message = 'This will be the about page';
}]);
the html is correct and there are no typos, so I am scratching my head as to why this is showing up as an error.
Is this something to do with the way I have my modules set up?
Any assistance would be greatly appreciated.
Many thanks in advance.

This error is telling you that your HomeCtrl is undefined. You will need to include a <script src="app/components/home/HomeController.js"></script> in your index.html file to include each of your controllers with this type of app configuration.
If you want to avoid this, you can scaffold your app something like this.
(function () {
"use strict";
angular.module('appControllers')
.controller('HomeCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.message = 'This will be the home page';
}])
.controller('AboutCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.message = 'This will be the about page';
}]);
})();
There is no single "best" way to do something. It is all relative to the needs of your app and preference.

module dependency with ngRoute breaks angular rendering

I am trying to use Mean stack in my website project. I am using ngRoute for routing and I want to add bootstrap carousel to my main page. I am trying to put angular team carousel component from this page.
While I am trying to implement this, I realize as soon as I try to add module dependency ( which is var app = angular.module('myApp', []) ) to my controller , angular breaks (without any error) and nothing appear in page. If I delete, everything is working normal. I assume this is related with routing ?
Project Structure;
-myApp
-node_modules
package.json
server.js
-public
-controllers
-lib
-views
app.js
index.html
app.js ;
(function(){
var app = angular.module('filmSevmem', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/main', {
templateUrl: 'views/main.html',
controller: 'MainController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutController'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'ContactController'
})
.otherwise({redirectTo:'/main'});
});
})();
MainController.js;
(function(){
var app = angular.module('myApp');
var MainController = function ($scope, $http) {
....... // codes from carousel
.......
app.controller('MainController', MainController);
})();
If I add , [] or ['ngAnimate', 'ui.bootstrap'] or anything to right of 'myApp', nothing work and I get empty page from my localhost. What can cause this problem ? What should I do ? Thank you.

var app = angular.module('myApp'); means get me the module myApp.var app = angular.module('myApp', [listOfDependencies]); means create the module myApp with all of the listed dependencies. So if you put square brackets in app.js AND in mainController.js, then you overwrite the previously created. The simplest solution would be to add ngAnimate and ui.bootstrap in your app.js like this: var app = angular.module('myApp', ['ngRoute','ngAnimate','ui.bootstrap']);
If you don't want to have all your dependencies in your root module, you can make submodules like var controllers = angular.module('myApp.controllers', ['ngAnimate']), and include this in your app.js like var app = angular.module('myApp', ['myApp.controllers']);

Why you are creating two different modules? And even you are not injecting the first module while creating the second.
By no chance your application is gonna work until and unless you code everything using single module or inject one module in another!

AngularJS - How to refer to a submodule controller from ui-router?

I'm struggling a bit with having submodules in an Angular 1.3.9 app. I've got a (non-working, sorry) preview at http://plnkr.co/edit/XBfTPAGRRe0CWJgjGJzc?p=preview and I think it's freaking out, in part, because I'm using Restangular.
I have the following:
angular
.module('estimate', ['ui.router', 'restangular', 'estimate.project'])
;
angular
.module('estimate.project', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider'
, function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('project', {
url: "/project/{id:int}",
abstract: true,
templateUrl: '/app/templates/project.html',
controller: "ProjectController as project",
resolve: { // stuff }
})
.state('project.overview', {
url: "",
templateUrl: "/app/templates/overview.html"
})
// ...
;
}])
.controller('ProjectController', ['$scope', 'ProjectService', 'myProject'
, function($scope, ProjectService, myProject) {
console.log('i made it!');
}]);
And in my template, which is served from the estimate module, I have:
<li><a ui-sref="project.overview({ id: 1 })">One</a></li>
The URL resolves correctly on the page, but clicking on it does nothing. It doesn't even throw any console errors - it just sits there. My gut tells me it has to do with how I'm referring to the controllers and/or the routes, and if they need to be prefixed or modified to work with a submodule. Any ideas on how to get it to load properly?
If this post is too scatterbrained, let me know and I'll try to clean it up.

I updated your plunker here and would say, that the most important change is - referencing sub-module in the main module:
Instead of this:
angular
.module('estimate', ['ui.router', 'restangular'])
...
angular
.module('estimate.project', ['ui.router'])
...
We have to use this, i.e. reference sub module in a parent module
angular
.module('estimate', ['ui.router', 'restangular', 'estimate.project'])
...
angular
.module('estimate.project', ['ui.router'])
...
With some few other small adjustments, that should be the way. Check it working here

AngularJS: Testing registered controllers with Karma

I'm fed up with running unit tests with my AngularJS application using Karma an Jasmine. I'm not using requireJS, but custom solution with dynamic loading controllers based on loading widgets segments. Is there any ways to perform a mock or injection of $controllerProvider in some pre-loaded test-helper.js?
My typically controller looks like:
'use strict';
Polygons.app.controllerProvider.register('MyController',
['$scope', '$rootScope', '$location', 'MyService'
function ($scope, $rootScope, $location, MyService) {
...
}
]
);
Polygons.app is concept wich is described in app.js:
Polygons.app = angular.module('app', ['ngRoute', 'ngSanitize', 'ngCookies'])
.config(['$routeProvider', '$httpProvider', '$compileProvider', '$routeSegmentProvider', '$locationProvider', '$controllerProvider', 'router', '$provide',
function ($routeProvider, $httpProvider, $compileProvider, $routeSegmentProvider, $locationProvider, $controllerProvider, router, $provide) {
Polygons.app.controllerProvider = $controllerProvider;
Polygons.app.compileProvider = $compileProvider;
...
Because module.config() doesn't execute during tests there is no way to obtain controllerProvider property of Polygons.app - I'm getting an error 'Cannot read property 'register' of undefined'.
So is there any ways to solve that problem?
Please, any help or conjecture, I'm totally lost.
Thanks a lot.

Using Restangular with the same URL but different files

I need to communicate with a REST web service via Angular and I'm using RestAngular but I'm running into some difficulty. I have to use the same URL but GET & POST to two different files. I'm setting the base URL in my .config in the app.js and the service.js is where I'm setting the other URL via RestangularConfigurer. The BaseURL in the config has a query string appended to it. The second URL in the service does not. I want to GET from the BaseURL in the config and POST to the Factory from an input. Below is an example of my code
app.js
'use strict';
angular
.module('testApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap',
'ngGrid',
'google-maps',
'ngMessages',
'restangular'
])
.config(function (RestangularProvider, $routeProvider) {
RestangularProvider.setBaseUrl('http://dev.domain.com:9005/question-ws.htm?&areacode=215');
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
});
service.js
'use strict';
angular.module('testApp')
.factory('NextRestangular', function($http, $sce, Restangular){
return Restangular.withConfig(function(RestangularConfigurer) {
RestangularConfigurer.setBaseUrl('http://dev.domain.com:9005/next-question-ws.htm');
});
});
controller.js
'use strict';
angular.module('testApp')
.controller('ScreenCtrl', function ($scope, Restangular, NextRestangular) {
Restangular.all().getList();
NextRestangular.all().getList();
});
I can't seem to GET from Restangular and I can't POST to NextRestangular. Will the file structure be able to support this? Am I going about this all wrong?

Restangular is a service to handle Rest API Restful Resources.
The .htm in your URLs leads me to believe the response is not JSON. I don't believe Restangular will work for you if that is the case. I recommend looking into ngResource or even $http. If your response is JSON, the following should help get you on your way.
In this example, the baseUrl should be "http://dev.domain.com:9005".
RestangularProvider.setBaseUrl('http://dev.domain.com:9005');
I have not used setRequestSuffix before but that may allow you to also have the .htm.
RestangularProvider.setRequestSuffix('.htm');
Then your API calls should look something like this.
Restangular.all('next-question-ws').get({areacode: 215});
Restangular.all('next-question-ws').post(
// JSON Payload here.
});