角度在laravel中不起作用答案

【问题标题】：angular not working in laravel角度在laravel中不起作用
【发布时间】：2016-06-19 17:44:35
【问题描述】：

我无法在 Laravel 中获得简单的 Angular 代码工作，尽管我在 codepen 中对其进行了测试并且它可以工作。

在我的吞咽中，我有棱角。而且我还尝试评论所有其他脚本（并从 resources/js 目录中删除已经复制的脚本）以仅使用 angular 进行测试。

gulp.js

elixir(function(mix) {
 mix
 // .copy('vendor/bower_components/jquery/dist/jquery.js', 'resources/js/1-jquery.js')  
 // .copy('vendor/bower_components/bootstrap/dist/js/bootstrap.js', 'resources/js/2-bootstrap.js')  
  .copy('vendor/bower_components/angular/angular.js', 'resources/js/3-angular.js')  
 // .copy('vendor/bower_components/lightgallery/dist/js/lightgallery-all.js', 'resources/js/4-lightgallery.js')  
 // .copy('vendor/bower_components/lightslider/dist/js/lightslider.js', 'resources/js/5-lightslider.js')  

  .scriptsIn('resources/js') 
  .version([
      'public/css/app.css',
      'public/js/all.js'
      ])  
});

blade.php

{!! Form::open(array('route' => 'order', 'class' => 'go-right calculator', 'files' => true, 'ng-app' => 'SaunaDoorCalc', 'ng-controller' => 'SaunaDoorCalcController')) !!}

    <div class="form-group door_size_radio col-xs-12 col-sm-6" style="margin-bottom:67px;"><h4>Размер дверной коробки (в миллиметрах)</h4>
        <div ng-repeat="a in sizeswitch" class="form-group">
        <input type="radio" value="@{{a.value}}" name="door_size_radio" class="radio">
        <label for="door_size_radio" class="radio">@{{a.label}}</label>
        </div>
    </div>
{!! Form::close() !!}

app.js

angular
  .module('SaunaDoorCalc',[])
  .controller('SaunaDoorCalcController', function($scope) {

    $scope.sizeswitch = [           
      { value: 'standard', label: 'Стандартный' },
      { value: 'special',  label: 'Ввести размер' }
    ];


    $scope.submit = function() {
      alert('submit');
    };


    $scope.myDate = new Date();
    $scope.minDate = new Date(
      $scope.myDate.getFullYear(),
      $scope.myDate.getMonth() - 2,
      $scope.myDate.getDate());
    $scope.maxDate = new Date(
      $scope.myDate.getFullYear(),
      $scope.myDate.getMonth() + 2,
      $scope.myDate.getDate());
  $scope.onlyWeekendsPredicate = function(date) {
    var day = date.getDay();
    return day === 0 || day === 6;
  }
  });

在输出网页中，我看到 {{a.label}} 并且只有一次，而不是两次。

我在js部分发现了这个错误

Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.6/$injector/nomod?p0=app
minErr/<@http://site.dev/build/js/all-6fc346934b.js:12247:12
module/<@http://site.dev/build/js/all-6fc346934b.js:14280:17
ensure@http://site.dev/build/js/all-6fc346934b.js:14204:38
module@http://site.dev/build/js/all-6fc346934b.js:14278:14
loadModules/<@http://site.dev/build/js/all-6fc346934b.js:16786:22
forEach@http://site.dev/build/js/all-6fc346934b.js:12501:11
loadModules@http://site.dev/build/js/all-6fc346934b.js:16770:5
createInjector@http://site.dev/build/js/all-6fc346934b.js:16692:19
bootstrap/doBootstrap@http://site.dev/build/js/all-6fc346934b.js:13956:20
bootstrap@http://site.dev/build/js/all-6fc346934b.js:13977:12
angularInit@http://site.dev/build/js/all-6fc346934b.js:13862:5
@http://site.dev/build/js/all-6fc346934b.js:43197:5
jQuery.Callbacks/fire@http://site.dev/build/js/all-6fc346934b.js:3187:11
jQuery.Callbacks/self.fireWith@http://site.dev/build/js/all-6fc346934b.js:3317:7
.ready@http://site.dev/build/js/all-6fc346934b.js:3536:3
completed@http://site.dev/build/js/all-6fc346934b.js:3552:2

【问题讨论】：

检查控制台里面有什么？
是的。有东西。添加到初始帖子

标签： javascript php angularjs laravel-5

【解决方案1】：

在控制台错误中，Angular 正在寻找名为 app 的模块。也许在您的视图文件的某个地方，您使用了ng-app="app"，但尚未创建模块。

尝试以下任一解决方案。

解决方案 1：

在您引导 Angular 应用程序的视图文件中，将 ng-app 的值更改为您创建的模块的名称。假设您在 body 标记中引导您的应用程序，并且您的主模块称为 SaunaDoorCalc：

<body ng-app="SaunaDoorCalc">

解决方案 2：

在 app.js 中，将模块名称从 SaunaDoorCalc 更改为 app。

angular
  .module('app',[])
  .controller('SaunaDoorCalcController', function($scope) {
    // your code here
}

【讨论】：