使用angular.js在單獨的文件夾中創建控制器文件

Question

我需要將控制器頁面保留在單獨的folder.But中，這向我顯示以下錯誤。

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

我在下面解釋我的代碼。

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'
    })
})

在上面的代碼中，我為不同的模板聲明了不同的控制器。所有部分模板將添加到下面的索引頁面中。

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>

在這里，我需要使用home.html部分模板，我將在單獨的文件夾中創建新的homecontroller文件，並將此文件包含在母版頁中。在這里，我創建了一個文件（ ie-HomeController.js -HomeController.js），如下所示。

HomeController.js：

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

})

當我包含此文件時，我沒有得到任何部分模板，並且當我從母版頁中刪除此文件鏈接時（ ie-index.html ），上述錯誤即將到來。請幫助我解決此問題。 我正在使用1.4.6版的angular.js。

Answer 1

要獲得對現有模塊的引用，您必須不聲明依賴項列表！ 卸下支架，它應該可以工作。

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

Answer 2

始終始終首先包含Angular插件文件，然后包含應用程序app.js ，配置文件（如果有），最后包含所有創建的Angular模塊依賴項，例如服務，指令，工廠以及最后的控制器。

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

//考慮將此代碼添加到控制器的單獨文件中

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>

使用angular.js在單獨的文件夾中創建控制器文件

問題描述

2 個解決方案

解決方案1
1 已采納 2015-09-28 09:13:26

解決方案2
0 2015-09-28 09:36:58

使用angular.js在單獨的文件夾中創建控制器文件

問題描述

2 個解決方案

解決方案1 1 已采納 2015-09-28 09:13:26

解決方案2 0 2015-09-28 09:36:58

解決方案1
1 已采納 2015-09-28 09:13:26

解決方案2
0 2015-09-28 09:36:58