dimanche 19 juin 2016

angular not working in laravel

I cannot get simple angular code work in Laravel, though I tested it in codepen and it works.

in my gulp I have angular. And I tried also to comment all other scripts (and delete already copied scripts from resources/js directory) to test only with 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="@" name="door_size_radio" class="radio">
        <label for="door_size_radio" class="radio">@</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;
  }

  });

In output webpage I see and only once, not twice.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire