Angular js partial controller

Question

I have an angular js folder structure as below. I am using angular ui router for routing. My question is i have included the link for the HomeController.js in index.html but it seems that angular ui router can't find the controller. Any solution? perhaps a way to directly include the link for the controller instead of controller name?

    app/
        index.html
        app.js
        Home/
            home.html
            HomeController.js
        Contact/
            contact.html
            ContactController.js

var app = angular.module('myApp', ['ngRoute', 'ui.router'];
        app.config(function($stateProvider, $urlRouterProvider) { 
        	$urlRouterProvider.otherwise('/');
            $stateProvider
                .state('home', {
                    url: '/',
                    templateUrl: 'Home/home.html',
                    controller: 'homeController'
                })
                .state('contact', {
                    ...
                });
        });

// working if is in same js file, not working if on different js file 
app.controller('homeController', function ($scope) {
	$scope.logoName = 'myLogo';
});

<!-- body.html -->
...
<div ui-view>

</div>
...


<!-- home.html -->
<div ng-controller="bsCarouselController">
   {{logoName}}
</div>

please recheck name that you have given in ContactController.js for example myApp.conroller('homeController',function(){}); — Shubham Nigam
– Shubham Nigam, Commented Jun 17, 2015 at 5:13
i am pretty sure is correct. It work if i throw the controller into app.js but not separate the controller out — desmondlee
– desmondlee, Commented Jun 17, 2015 at 5:18
Can you provide fiddle for more understanding because I think there would be a little mistake that is causing error.. Is there any error in console?? — Shubham Nigam
– Shubham Nigam, Commented Jun 17, 2015 at 5:28
Error was coming because the name inside ng-controller is different form stateProvider 'home-controller' and need not to write ng-controller if you are providing it through stateProvider — Shubham Nigam
– Shubham Nigam, Commented Jun 17, 2015 at 9:01

InfinitePrime · Accepted Answer · 2015-06-17 05:48:59Z

1

Working with AngularJS with UI router, I always try to go through this checklist whenever I find myself in trouble.

Include your controller.js file in index.html and cross check that your browser console does not log a 404 for a GET request of this file. (Use Wiredep to automate this)
Make sure the name of your controller is the same in constructor as well as in your state definition.
If you are using IIFE, then make sure you call that in the end.

(function() {
    angular
      .module("app")
      .controller("HomeCtrl", HomeCtrl);

    function HomeCtrl() {
    }
  })();

Make sure the Module under which your controller is declared is injected into your main bootstrap module definition and also cross check if all other dependencies are resolved.

Looking at your question, I don't think you can directly include link for the controller in your state definition options object. But you can crosscheck all of the above points and also copy and paste the error in your console. That would help in finding a faster solution.

And looking at your recent comment, I think that it is because of Module dependencies problem. Point #4.

Make sure you specify the module under which you want to define your controller.

If it is an existing module (i.e Previously defined):

angular
  .module("existingModule")
  .controller("HomeCtrl", function() {} )

If it is a new module

angular
  .module("newModule", []) // Make sure you inject this newModule in app.js
  .controller("HomeCtrl", function() {})

Edit: Looking at your update, you have explicitly assigned a controller in your markup using ng-controller. Any angular expressions inside this div prototypically inherits from bsCarouselController , homeController and RootScope.

edited Jun 17, 2015 at 5:48

answered Jun 17, 2015 at 5:40

InfinitePrime

1,7761 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

desmondlee Over a year ago

still trying your suggestion. If controller url cannot be included directy. Let say i have 100 controller in 100 js file, then i need to update it to include the 100js file in script src on main index.html?

InfinitePrime Over a year ago

You need not. You can do under one module and under one file. But it gets messy. You should ideally have one controller per feature. That's why I recommended using wiredep to automate this task

desmondlee Over a year ago

great i have found the solution by removing ng-controller

Collectives™ on Stack Overflow

Angular js partial controller

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related