We Keep Coding

AngularJS 1.5 Controllers in Separate Files

I have a hard time understanding this. I'm attempting to put controllers in separate files so that they only deal with 1 thing, ideally, a partial view
My folder structure is like this...
My app.js file is like this.
angular.module('mikevarela', ['ui.router', 'mikevarela.controller.home', 'mikevarela.controller.about', 'mikevarela.controller.audio'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: '../partials/home.partial.html',
controller: 'HomeController'
})
.state('about', {
url: '/about',
templateUrl: '../partials/about.partial.html',
controller: 'AboutController'
})
.state('audio', {
url: '/audio',
templateUrl: '../partials/audio.partial.html',
controller: 'AudioController'
});
});
and my controllers each have a module like this...
angular.module('mikevarela.controller.home', [])
.controller('HomeController', ['$scope', function($scope) {
$scope.title = 'Mike Varela Home Page';
}]);
My issues comes with the intial app declaration. I don't want to have to inject all the controllers in the main array app definition, that would be cumbersome and long winded. Isn't there a way to define the controller at the controller file. Kind of like this
angular.module('mikevarela', []).controller('HomeController', ['$scope', function($scope) {
// stuff here
}]);

Use angular.module('mikevarela').controller..... in subsequent files.
angular.module('mikevarela',[]).controller.....
is equivalent to redefining your app. The second param is requires array.
Quoting official angular.module docs
requires
(optional)
!Array.=
If specified then new module is being created. If unspecified then the module is being retrieved for further configuration.

About your Controllers...
I think you're loading the controllers incorrectly.
You don't need to declare controllers as a dependency. Rather stating module.controller('yourController)` makes that controller available throughout the module.
If your controllers are in separate files, all you need to do to make it available is load it in with a script tag. e.g.
<script src="app.js"></script>
<script src="controller1.js"></script>
<script src="controller2.js"></script>
About your Application Structure...
This is not related to your question, but just coming from someone who's developed using Angular, I'd recommend not grouping your application by controllers/ by rather by feature. See: https://scotch.io/tutorials/angularjs-best-practices-directory-structure

Angular directive error : Unable to load template from templateUrl - fails when I load template via 'templateUrl' (continuous loading in browser)

I'm not sure why it shows below warnings in console and infinitely loads page, I'm just calling a template which is actually calling another directly in which I'm calling another html with templateUrl. Below is my code. Thanks in advance.
route file, which will load step-1.tpl.html on get-started/1
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/get-started/1', {
templateUrl: 'get-started/step-1.tpl.html',
});
}])
step-1.tpl.html - file in which I'm using my directive when above url is loaded
<div ng-controller="addWebsite">
<div step1></div>
</div>
my directive code
angular.module('add-website', [])
.controller('addWebsite', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('step1', function() {
return {
restrict: 'AE',
templateUrl: 'add-website/step1.html'
};
});
add-website/step1.html
<div>Name: {{customer.name}} Address: {{customer.address}}</div>
I'm getting this error when I hit /get-started/1.

please include angular-route.js and inject 'ngRoute' in module dependency

In your .config file, what does your angular.module() declaration look like? At a guess I'd say you're doing something like you have for your controllers, like this:
angular.module('add-website', [])
Only have one like this, the one on your controller for example should look like this:
angular.module('add-website')
But Nishant is also right, you need to inject ngRoute too.

It was actually a path issue! :( get-started/step-1.tpl.html should be shared/get-started/step-1.tpl.html. Thanks!

Injecting Angular modules: Unknown provider

I followed a tutorial on how to organize and Angular project. I have a ng directory that contains all my controllers, services and my routes.js. This is then bundled all together into an app.js by my gulp config.
My module.js is like this:
var app = angular.module('app', [
'ngRoute',
'ui.bootstrap'
]);
Here's a bit of my routes.js:
angular.module('app')
.config(function ($routeProvider) {
.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
});
Here's what my working LoginCtrl looks like:
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
$scope.login = function(username, password) {
...
}
})
The tutorial didn't make use of any Angular modules and I wanted to try one out. I added ui.bootstrap to my page from a CDN and try to change the LoginCtrl to:
angular.module('app')
.controller('LoginCtrl', function($scope, $uibModal, UserSvc) {
...
})
But this throws me the following error:
"Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal
What is causing this error? In every tutorial I find this seems to be how they load a module, the only difference I see is that the tutorial don't seem to be using a router.
PS: Note that if I use an empty module list [] I get the exact same error. If I use a non-existing module ['helloworld'] I get an errorModule 'helloworld' is not available'. So I'm concluding that my `ui.bootstrap' module is indeed available.
EDIT: Plunker fiddle here: http://plnkr.co/edit/FWHQ5ZDAByOWsL9YeMUH?p=preview

angular route is another module you should not only include but also use like this
in the app module creation
means DI of route
angular.module('app', ['ngRoute']);
Please go through the angular route doc

Remove ['ui.bootstrap'] form controller. You should add dependencies only one time but you add it twice so the second dependency list override the first one.
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
... })

your routes snippet looks wrong, you should be hanging the when call off $routeProvider and maybe declare $routeProvider as an injected val if it's not being picked up e.g.
angular.module('app')
.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
}]);

I have checked your link. I think there is a serious issue with angular and ui bootstrap version.In ui-boostrap dashboard, it is written that 0.12.0 is the last version that supports AngularJS 1.2.x. I have tried with all combinations but it doesn't work with your angular version.
I suggest you to change angular version to latest and ui-bootstrap version to latest so it will work.
Please check out this working Plukr
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js'></script> //change this to latest also.
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.0.3/ui-bootstrap.min.js'></script>
<script src='./app.js'></script>
If you want to go with your angular version only. I'd request you to do some R&D. Try with different versions of ui-bootstrap. still if it doesn't work you can make PR.

Stop Controller's activity when switch route

I create single page app by AngularJS and I found my problem. I have function refresh data every 2 minutes by jQuery in route A. When I change to other route, that function in controller is still working. This is my code.
App.js
var newsapp = angular.module('newsAppMD', ['ngRoute']);
newsapp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/news', {
templateUrl: 'templates/news.html',
controller: 'imageNewsCtrl'
}).
when('/news/:nameCat', {
templateUrl: 'templates/news-thumbnail.html',
controller: 'newsPageCtrl'
}).
otherwise({
redirectTo: '/news'
});
}]);
newsapp.controller('imageNewsCtrl', function($scope, $http, $interval, $timeout ) {
$('#bottom-bar').find('#epg').hide();
$scope.updateTimeEPG = 120000;
$scope.fetchFeed = function() {
$http.get("http://wi.th/thaipbs_tv_backend/epg_forJS.php").success(function(response) {
$scope.items = response.Schedule;
console.log($scope.items);
$timeout(function() { $scope.fetchFeed(); }, $scope.updateTimeEPG);
}).then(function() {
$('#bottom-bar').find('.loading').hide();
$('#bottom-bar').find('#epg').show();
});
};
$scope.fetchFeed();
});
newsapp.controller('newsPageCtrl', function($scope, $http, $location) {
// blah blah blah
}]);
I choose /news imageNewsCtrl work. And when I switch to other route, function in imageNewsCtrl still work (I see function print console.log when I changed route). I want to stop function in controller when change route. Thanks for your suggestion everyone. :)

I am not too entirely sure, but try using $stateProvider instead of $routeProvider. If you do, then you need to npm install angular-ui-router (it is a powerful third party module) and replace ngroute. I only user $routeProvider for the .otherwise function. You can also do a lot more cool stuff like onEnter and onExit with $stateProvider. Another thing is I would recommend you to use only Angular instead of jQuery. I do not really see a point of you using both. Use Angular's two-way data binding! Also, if you really want to get into Angular, then I recommend John Papa's style guide. This guys knows what he is talking about for making a great Angular app. I hope this info helps!

How to configure 'ngProgress' as loader in my project [ngbp boilerplate]

I'm using 'ngbp' (https://github.com/ngbp/ngbp) angular boilerplate to build my project and I'm trying to make ngProgress work to show the loader when changing from section to section.
I've installed ngProgress through bower. I have css and js in place.
In my app.js I have this:
(function(app) {
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
}]);
app.run(function () {});
app.controller('AppController', ['$scope', function ($scope) {
}]);
}(angular.module("grinFood", [
'grinFood.home',
'grinFood.about',
'grinFood.menu',
'grinFood.catering',
'grinFood.takeithome',
'grinFood.contact',
'templates-app',
'templates-common',
'ui.router.state',
'ui.router',
'ngProgress',
])));
Then for example my catering.js looks like this:
(function(app) {
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('catering', {
url: '/catering',
views: {
"main": {
controller: 'CateringController',
templateUrl: 'catering/catering.tpl.html'
}
},
data:{ pageTitle: 'Catering' }
});
}]);
app.controller('CateringController', ['$scope', function ($scope, ngProgress) {
var init = function() {
// A definitive place to put everything that needs to run when the controller starts. Avoid
// writing any code outside of this function that executes immediately.
ngProgress.start();
};
init();
}]);
}(angular.module("grinFood.catering", [
'ui.router'
])));
That is when I get TypeError: Cannot read property 'start' of undefined
Also tried to put the ngprogress in the controller in app.js but I can't make it work.
You can watch the error here: http://ticketcomunicacion.com/grinfood/#/menu
Any help would be appreciate. Thanks

First off, ngbp looks like it's out of date. Try http://yeoman.io/ Secondly, I'm clueless why do you wrap app with a function? This is pointless, unless that you have a other library with a conflict.
Do you use minifiers? If yes try use one that is aware of anugarjs dependency framework. Basically, you need to specify your dependency correctly
['$scope', function ($scope, ngProgress)
change to
function ($scope, ngProgress)
or
['$scope', 'ngProgress', function ($scope, ngProgress)

You are not injecting ngProgress into the controller properly.
Instead of this:
app.controller('CateringController', ['$scope', function ($scope, ngProgress) {
You need to do this:
app.controller('CateringController', ['$scope', 'ngProgress', function ($scope, ngProgress) {
Note, a while back I switched to using ng-annotate, it's a very nice way to avoid these errors. I actually use ng-annotate-rails. These will help you avoid these types of mistakes in the future and clean up your code a bit. I highly recommend either one!