CODEWITHSUNDEEP
angularjsangular-ui-router
desmondlee
desmondlee

Reputation: 1703

Angular js partial controller

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>

Upvotes: 1

Views: 871

Answers (1)

InfinitePrime
InfinitePrime

Reputation: 1776

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.

Upvotes: 1

Related Questions