How to move controller source from app.js to desired folder location in angular project

Question

I need help on moving controller from app.js to desired folder. My Folder structure look likes the blw

---app
   --home
     --home.html
     --homecontroller.js
   --about
   --contact
   --app.html
   --app.js
---asset
---index.html

I have kept my controller source in my app.js. But i planned to move the specific controller into the corresponding root folder. Lets say i have home controller code in app.js. Now i want to move it to homecontroller.js which placed in home folder. I tried that. but it doesn't work for me. However it works when i keep that in app.js. Can you help me to move it to desired root.

my app.js is

var app = angular.module('TrailApp', ['ui.router'])

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home/part1');
    $stateProvider

        .state('base', {
          abstract: true,
          url: '',
          templateUrl: 'app/app.html'
        })

        .state('home', {
          url: '/home',
          parent: 'base',
          templateUrl: 'app/home/home.html',
          controller: 'homectrl'
        })
           .state('home.part1', {
              url: '/part1',
              templateUrl: 'app/home/part1.html',
              //controller: 'homectrl'
            })
            .state('home.part2', {
              url: '/part2',
              templateUrl: 'app/home/part2.html',
              //controller: 'homectrl'
            })
        .state('about', {
          url: '/about',
          parent: 'base',
          templateUrl: 'app/about/about.html',
          //controller: 'aboutctrl'
        })


  });

 //This below code should be moved to homecontroller.js 
app.controller('homectrl', ['$scope', '$location', '$rootScope',
  function($scope, $location, $rootScope) {

      $scope.custom = false;
      $scope.actionBtn = function(event) {
            $scope.custom = true;   
      };

  }
]);

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

You can get your answer here

In homecontroller.js

angular.module('TrailApp').controller('homectrl', ['$scope', '$location', '$rootScope',
  function($scope, $location, $rootScope) {

      $scope.custom = false;
      $scope.actionBtn = function(event) {
            $scope.custom = true;   
      };

  }
]);

edited May 23 '17 at 12:14

Community

1
1

answered Nov 04 '15 at 10:47

Vo Thanh Thang

330
1
5
16

yes it works after i called that file in the index.html. but i have one more concern about it. If i have more than 10 controller, what would i do. should i call all those separate files in index.html? i m not sure how to achieve without calling all in index.html. Any suggestion regarding it – Bhavan Kumar Natarajan Nov 04 '15 at 11:13
For that case, you can use Gulp or Grunt to build client – Vo Thanh Thang Nov 04 '15 at 11:18

score 0 · Answer 2 · answered Nov 04 '15 at 10:49

0

You have to inject that controller module in app.js. Like

var myApp=angular.module('myApp', ['controllers']);

This is your controller.js in other folder

var controllers = angular.module('controllers', []);

answered Nov 04 '15 at 10:49

Nagarjuna Reddy

4,083
14
41
85

How to move controller source from app.js to desired folder location in angular project

2 Answers2