Question

我使用的是Laravel 4.2和angular 1.2.21。我已经按照本教程：http://scotch.io/tutorials/php/create-a-laravel-and-angular-single-page-comment-application，但我遇到了一个奇怪的错误。我也使用Browserify和gulp来组织我的依赖项。该错误似乎与gulp或Browserify无关，因为我已经能够确认已编译的js文件包含所有内容。

我的路由似乎没问题，我的数据库有数据（在我的api / food_item_templates路由上成功填充），并且food_item_templates / index视图加载，但是当angular尝试实例化我的一个模块时，我收到一个js错误。

我得到的错误是：

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"_invokeQueue":[["$controllerProvider","register",{"0":"mainController"}]],"_runBlocks":[],"requires":[],"name":...<omitted>...2)

应用/视图/布局/ angular.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Test</title>

</head>

<body ng-app="app" ng-controller="mainController">

@yield('content')

<script src="/js/main.js"></script>

</body>
</html>

routes.php文件

Blade::setContentTags('<%', '%>');      // for variables and all things Blade
Blade::setEscapedContentTags('<%%', '%%>');     // for escaped data

...

Route::get('food_item_templates', function() {
    return View::make('food_item_templates/index');
});

Route::group(array('prefix' => 'api'), function() {
    Route::resource('food_item_templates', 'FoodItemTemplatesController',
        array('only' => array('index', 'store', 'destroy')));
});

应用/视图/ food_item_templates / index.blade.php

@extends('layouts.angular')

@section('content')
<div class="food_item_template" ng-hide="loading" ng-repeat="food_item_template in food_item_templates">
    <h3>Food Item Template #{{ food_item_template.id }} <small>by {{ food_item_template.name }}</h3>
    <p>{{ food_item_template.text }}</p>

    <p><a href="#" ng-click="deleteFoodItemTemplate(food_item_template.id)" class="text-muted">Delete</a></p>
</div>
@stop

应用/ JavaScript的/控制器/ mainCtrl.js

'use strict';

module.exports = angular.module('mainCtrl', [])

    .controller('mainController', function($scope, $http, FoodItemTemplate) {
        $scope.foodItemTemplateData = {};

        $scope.loading = true;

        FoodItemTemplate.get()
            .success(function(data) {
                $scope.foodItemTemplates = data;
                $scope.loading = false;
            });

        $scope.submitFoodItemTemplate = function() {
            $scope.loading = true;

            FoodItemTemplate.save($scope.foodItemTemplateData)
                .success(function(data) {

                    FoodItemTemplate.get()
                        .success(function(getData) {
                            $scope.foodItemTemplates = getData;
                            $scope.loading = false;
                        });

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

        $scope.deleteFoodItemTemplate = function(id) {
            $scope.loading = true;

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

                    FoodItemTemplate.get()
                        .success(function(getData) {
                            $scope.foodItemTemplates = getData;
                            $scope.loading = false;
                        });

                });
        };

    });

应用/ JavaScript的/服务/ foodItemTemplateService.js

'use strict';

module.exports = angular.module('foodItemTemplateService', [])

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

        return {
            get : function() {
                return $http.get('/api/food_item_templates');
            },

            save : function(foodItemTemplateData) {
                return $http({
                    method: 'POST',
                    url: '/api/food_item_templates',
                    headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                    data: $.param(foodItemTemplateData)
                });
            },

            destroy : function(id) {
                return $http.delete('/api/food_item_templates/' + id);
            }
        }

    });

应用/ JavaScript的/ main.js

'use strict';

var angular         = require('angular');
var mainCtrl        = require('./controllers/mainCtrl');
var foodItemTemplateService = require('./services/foodItemTemplateService');

angular.module('app', [mainCtrl, foodItemTemplateService]);

gulpfile.js

...

gulp.task('scripts', function() {
    gulp.src('app/javascript/main.js')
        .pipe(browserify({
          insertGlobals : true,
          debug : !gulp.env.production
        }))
        .pipe(gulp.dest('./public/js'))
});

gulp.task('watch', function() {
    gulp.watch('app/javascript/**/*.js', ['scripts'])
});

gulp.task('default', ['scripts']);

的package.json

{

...

  "main": "gulpfile.js",
  "directories": {
    "test": "tests"
  },
  "dependencies": {
    "angular": "^1.2.21",
    "gulp": "^3.8.7"
  },
  "devDependencies": {
    "gulp": "^3.8.7",
    "gulp-browserify": "^0.5.0",
    "gulp-compass": "^1.3.1",
    "gulp-concat": "^2.3.4",
    "gulp-jshint": "^1.8.4",
    "gulp-notify": "^1.5.0",
    "gulp-phpspec": "^0.2.5",
    "gulp-rename": "^1.2.0",
    "gulp-sass": "^0.7.3",
    "gulp-uglify": "^0.3.1",
    "gulp-util": "^3.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

}

使用Laravel的AngularJS无法实例化模块应用程序

0 个答案: