Create controller file in separate folder using angular.js

Question

i need to keep my controller page in separate folder.But it is showing me the below error.

Error: [ng:areq] http://errors.angularjs.org/1.4.6/ng/areq?p0=homecontroller&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)

I am explaining my code below.

app.js:

var GoFastoApp=angular.module('GofastoHome',['ngRoute']);
GoFastoApp.config(function($routeProvider) {
    $routeProvider
    .when('/',{
        templateUrl : 'view/home.html',
        controller  : 'homecontroller'
    })
    .when('/deptinfo',{
        templateUrl : 'view/info.html',
        controller  : 'infocontroller'
    })
    .when('/TimeTable',{
        templateUrl : 'view/time.html',
        controller  : 'timecontroller'
    })
    .when('/course',{
        templateUrl : 'view/course.html',
        controller  : 'coursecontroller'
    })
    .when('/subject',{
        templateUrl : 'view/subject.html',
        controller  : 'subjectcontroller'
    })
    .when('/hod',{
        templateUrl : 'view/hod.html',
        controller  : 'hodcontroller'
    })
    .when('/faculty',{
        templateUrl : 'view/faculty.html',
        controller  : 'facultycontroller'
    })
})

In the above code i have declared different controller for different template.All the partial template will add into below index page.

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="GofastoHome">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>

    <!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
    <script src="js/angularjs.js" type="text/javascript"></script>
    <script src="js/angularroute.js" type="text/javascript"></script>
    <script src="controller/app.js" type="text/javascript"></script>
    <!-- GLOBAL STYLES - Include these on every page. -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/style22.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
<nav class="navbar navbar-default navbar-fixed-top"  style="margin-top:50px">
      <div class="container" style="width:1270px;">
        <div class="navbar-header navbar-brand">
        Computer Science & Engineering
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">Dept. info</a></li>
            <li><a href="#contact">Time Table</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Edit <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="/course">Course</a></li>
                <li><a href="/subject">Subject</a></li>
                <li><a href="/hod">HOD</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="/faculty">Faculty</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          </div><!--/.nav-collapse -->
      </div>
    </nav>
       <!--main_heading_div-->
        <!--middle_content_details_data-->
        <div class="row" style="padding-top:90px;"  ng-view>


        </div>
        <!--end_middle_content_details_data-->

    </div>
    <!-- /.page-content -->

</div>
</div>
<script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
    <script src="js/jquery.popupoverlay.js"></script>
    <!--<script src="controller/HomeController.js" type="text/javascript"></script>-->
</body>
</html>

Here i need suppose for home.html partial template i will create new homecontroller file in separate folder and include this file in master page.Here i created one file(i.e-HomeController.js) which is given below.

HomeController.js:

var homeapp=angular.module('GofastoHome',[]);
homeapp.controller('homecontroller',function($scope){

})

When i include this file i did not get any partial template and when i removed this file link from master page(i.e-index.html) the above error is coming.Please help me to resolve this issue. I am using angular.js version 1.4.6.

I don't really understand the question... Of course you need to include all files needed in the index.html... — Gustav
– Gustav, Commented Sep 28, 2015 at 9:12
Can yo create plunker for your question? I think problem is with your way to initialize AngularJs module and include all files. — Laxmi Salunkhe
– Laxmi Salunkhe, Commented Sep 28, 2015 at 9:13
@Gustav : But after including no partial template is coming.Here my requirement is i will keep all controller file in one folder and will execute respective template. — satya
– satya, Commented Sep 28, 2015 at 9:14

Michael · Accepted Answer · 2015-09-28 09:13:26Z

1

To get a reference to an existing module you must not declare a dependency list! Remove the brackets and it should work.

var homeapp=angular.module('GofastoHome');

answered Sep 28, 2015 at 9:13

Michael

3,1141 gold badge19 silver badges17 bronze badges

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

Comments

Laxmi Salunkhe · Accepted Answer · 2015-09-28 09:36:58Z

Always include Angular Plugin file first, then include application app.js, configuration files if any and at the end include all angular modules dependencies created like services, directives, factories and at last controllers.

app.js

// Angular Module initialization
var goFastoApp=angular.module('GofastoHome',['ngRoute']);

// Config Block
GoFastoApp.config(function($routeProvider) {
    $routeProvider
    .when('/',{
        templateUrl : 'view/home.html',
        controller  : 'homecontroller'
    })
});

home.controller.js

// Consider this code you have added in separate file for controller

goFastoApp.controller('homecontroller',function($scope){
   $scope.username = "Satya";
})

index.html

<!DOCTYPE html>
<html lang="en" ng-app="GofastoHome">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>

    <!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->

    <!-- GLOBAL STYLES - Include these on every page. -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style22.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <!-- Page Content -->

    <!-- Plugin Files -->
    <script src="js/angularjs.js" type="text/javascript"></script>
    <script src="js/angularroute.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
    <script src="js/jquery.popupoverlay.js"></script>
    <!-- End Plugin Files -->

    <!-- JS Files -->
    <script src="controller/app.js" type="text/javascript"></script>
    <script src="controller/HomeController.js" type="text/javascript"></script>
    <!-- End JS Files -->
</body>
</html>

Collectives™ on Stack Overflow

Create controller file in separate folder using angular.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related