Angularjs控制器错误本机

Question

我正在开发一个网络应用程序，我使用 Laravel 作为后端仅用于 REST Api 和 angular 作为前端。当我在浏览器中启动我的应用程序时出现以下错误。

错误：[ng:areq] http://errors.angularjs.org/1.5.5/ng/areq?p0=mainController&p1=not%20a%20function%2C%20got%20undefined 在错误（本机）

App.js

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

MyAppService.js

angular.module('myAppService', [])

    .factory('Result', function($http) {

        return {
            get : function() {
                return $http.get('http://localhost/ngresulty/public/result');
            },
            show : function(id) {
                return $http.get('api/result/' + id);
            },
            save : function(resultData) {
                return $http({
                    method: 'POST',
                    url: 'api/result',
                    headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                    data: $.param(resultData)
                });
            },
            destroy : function(id) {
                return $http.delete('api/result/' + id);
            }
        }

    });

MainCtrl.js

angular.module('mainCtrl', [])

    .controller('mainController', function($scope, $http, Result) {
        // object to hold all the data for the new comment form
        $scope.resultData = {};

        // loading variable to show the spinning loading icon
        $scope.loading = true;

        // get all the comments first and bind it to the $scope.comments object
        Result.get()
            .success(function(data) {
                $scope.students = data;
                $scope.loading = false;
            });


        // function to handle submitting the form
        $scope.submitResult = function() {
            $scope.loading = true;

            // save the comment. pass in comment data from the form
            Result.save($scope.resultData)
                .success(function(data) {
                    $scope.resultData = {};
                    // if successful, we'll need to refresh the comment list
                    Result.get()
                        .success(function(getData) {
                            $scope.students = getData;
                            $scope.loading = false;
                        });

                })
                .error(function(data) {
                    console.log(data);
                });
        };

        // function to handle deleting a comment
        $scope.deleteResult = function(id) {
            $scope.loading = true; 

            Result.destroy(id)
                .success(function(data) {

                    // if successful, we'll need to refresh the comment list
                    Result.get()
                        .success(function(getData) {
                            $scope.students = getData;
                            $scope.loading = false;
                        });

                });
        };

    });

查看或 Results.blade.php

@extends('layouts.app')
@section('content')


<div class="container" ng-app="myApp" ng-controller="mainController">

    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">All Students Results Record</div>
                <label>Search: <input ng-model="searchText"></label>
                <div class="panel-body">

                    <input type="text" ng-model="search">

                    <table class="table table-striped">
                            <thead>
                              <tr>
                                <th>Roll No</th>
                                <th>Student Name</th>

                              </tr>
                            </thead>
                            <tbody ng-hide="loading" ng-repeat="student in students | filter:searchText">

                                    <td>@{{ student.rollno }}</td>
                                    <td>@{{ student.name }}</td>


                            </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-4">
        <div class="panel panel-default">
                <div class="panel-heading">Action(s)</div>

                <div class="panel-body">
                    <center><a type="submit" href="/ngresulty/public/result/create" class="btn btn-info btn-lg">Add New Result(s)</a></center>
                </div>
            </div>

        </div>

    </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">
    <script src="app/controllers/mainCtrl.js"></script> <!-- load our controller -->
    <script src="app/services/myAppService.js"></script> <!-- load our service -->
    <script src="app/app.js"></script> <!-- load our application -->
@endsection

Answer 1

查找页面前面某处使用的ng-app 指令。

@extends('layouts.app')
@section('content')


<div class="container" ng-app="myApp" ng-controller="mainController">

layouts.app 或 content 部分中有什么内容？

来自文档：

使用ngApp时有几点需要注意：

每个 HTML 文档只能自动引导一个 AngularJS 应用程序。在文档中找到的第一个 ngApp 将用于定义根元素以作为应用程序自动引导。要在 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们。

如果之前使用了ng-app 指令，则后续的ng-app="myApp" 将被忽略，从而导致找不到mainController 函数。

Answer 2

使用

angular.module('mainCtrl', [])

在你的控制器/服务/指令定义中创建一个新模块。

当你想要引用mainCtrl 模块时，请执行

angular.module('mainCtrl')

改为。

来自 Angular 文档：“请注意，使用 angular.module('myModule', []) 将创建模块 myModule 并覆盖任何名为 myModule 的现有模块。使用 angular.module('myModule') 检索现有模块。”

https://docs.angularjs.org/guide/module