Question

我正在尝试使用make一个angularJS网络应用程序。我买了一个模板，它的所有控制器，路由和指令都在一个文件app.js

中

这是我的第一个angularJS应用程序，或者实际上是我的第一个前端工作。现在试图成为一个全栈极客......：D

所以这就是我被困住的地方。该应用程序完全正常，但当我在另一个文件AuthCtrl中添加一个新的控制器auth.js时，它会给我一个错误，指出AppCtrl未找到。遵循HTML将使您更好地理解它。我已经指出代码片段中的确切问题在哪里以及是什么。

<!doctype html>
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>PropheSee Dashboard</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic" rel="stylesheet" type="text/css">
    <!-- Needs images, font... therefore can not be part of main.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.min.css">
    <!-- end Needs images -->

        <link rel="stylesheet" href="styles/main.css">

</head>
<body data-ng-app="app" id="app" class="app" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl" data-ng-class=" {'layout-boxed': admin.layout === 'boxed' } ">

    <div data-ng-controller="AuthCtrl" data-ng-app="app">
       <ul>
        <li ng-repeat="phone in phones">
          {{phone.name}}
          <p>{{phone.snippet}}</p>
        </li>
      </ul>
    </div>
    <%-body%>

    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="scripts/vendor.js"></script>

    <script src="scripts/ui.js"></script>

    <script src="scripts/app.js"></script>


    <!-- 
     This is where the problem is. As soon as I add the following line to use AuthCtrl,
     It says AppCtrl not found. Is it that I can't use more than one import for controllers? Or is there a problem in the way I am doing the imports?
    -->
    <script src="scripts/controllers/auth.js"></script>

</body>

编辑 - 验证

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

app.controller('AuthCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

App.js代码段

(function() {
"use strict";
angular.module("app.chart.ctrls",[])
    .controller("chartCtrl",[
        "$scope",
        function($scope){ ....

Answer 1

问题是您在auth.js文件中执行此操作：

var app = angular.module('app',.......

从而声明一个新的应用程序或覆盖app.js

中声明的应用程序

相反，您应该使用app.js文件中定义的相同应用变量。

您需要声明应用并在变量中存储对它的引用：

var yourApp = angular.module("app.controllers",[.........]);

然后添加控制器，将它们分配给“保存”应用程序定义的变量。这就是应该在yourApp应用程序上定义chartCtrl控制器的方法：

yourApp.controller("chartCtrl",[
        "$scope",
        function($scope){ ....

然后你的控制器在auth.js文件中：

yourApp.controller('AuthCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

AngularJS在同一视图中使用两个控制器

1 个答案: