Гибкие и легко обслуживаемые приложения Laravel + Angular Material

 /*Elixir Task for bower * Upgraded from https://github.com/ansata-biz/laravel-elixir-bower */ 
 var  gulp =  require ( 'gulp' ); 
 var  mainBowerFiles =  require ( 'main-bower-files' ); 
 var  filter =  require ( 'gulp-filter' ); 
 var  notify =  require ( 'gulp-notify' ); 
 var  minify =  require ( 'gulp-minify-css' ); 
 var  uglify =  require ( 'gulp-uglify' ); 
 var  concat_sm =  require ( 'gulp-concat-sourcemap' ); 
 var  concat =  require ( 'gulp-concat' ); 
 var  gulpIf =  require ( 'gulp-if' ); 

 var   Elixir   =  require ( 'laravel-elixir' ); 

 var   Task   =   Elixir . Task ; 

 Elixir . extend ( 'bower' ,   function ( jsOutputFile ,  jsOutputFolder ,  cssOutputFile ,  cssOutputFolder )   { 

     var  cssFile =  cssOutputFile ||   'vendor.css' ; 
     var  jsFile =  jsOutputFile ||   'vendor.js' ; 

     if   (! Elixir . config . production ){ concat =  concat_sm ; 
     } 

     var  onError =   function   ( err )   { notify . onError ({ title :   "Laravel Elixir" , subtitle :   "Bower Files Compilation Failed!" , message :   "Error: <%= error.message %>" , icon :  __dirname +   '/../node_modules/laravel-elixir/icons/fail.png' 
         })( err ); 
         this . emit ( 'end' ); 
     }; 

     new   Task ( 'bower-js' ,   function ()   { 
         return  gulp . src ( mainBowerFiles ()) 
             . on ( 'error' ,  onError ) 
             . pipe ( filter ( '**/*.js' )) 
             . pipe ( concat ( jsFile ,   { sourcesContent :   true })) 
             . pipe ( gulpIf ( Elixir . config . production ,  uglify ())) 
             . pipe ( gulp . dest ( jsOutputFolder ||   Elixir . config . js . outputFolder )) 
             . pipe ( notify ({ title :   'Laravel Elixir' , subtitle :   'Javascript Bower Files Imported!' , icon :  __dirname +   '/../node_modules/laravel-elixir/icons/laravel.png' , message :   ' ' 
             })); 
     }). watch ( 'bower.json' ); 


     new   Task ( 'bower-css' ,   function (){ 
         return  gulp . src ( mainBowerFiles ()) 
             . on ( 'error' ,  onError ) 
             . pipe ( filter ( '**/*.css' )) 
             . pipe ( concat ( cssFile )) 
             . pipe ( gulpIf ( config . production ,  minify ())) 
             . pipe ( gulp . dest ( cssOutputFolder ||  config . css . outputFolder )) 
             . pipe ( notify ({ title :   'Laravel Elixir' , subtitle :   'CSS Bower Files Imported!' , icon :  __dirname +   '/../node_modules/laravel-elixir/icons/laravel.png' , message :   ' ' 
             })); 
     }). watch ( 'bower.json' ); 

 }); 

Эти 2 задания могут показаться немного сложными, но вам не нужно об этом беспокоиться. Вы здесь, чтобы ускорить процесс разработки, а не тратить время на настройку инструментов сборки.

Причина, по которой я не использую некоторые из доступных узловых модулей, которые доступны онлайн, заключается в том, что на момент написания они медленны и часто ограничены в функциональности. Наслаждайтесь!

Настройка AngularJS

Установка

Давайте начнем с загрузки последней версии Angular 1

 bower install angular #1 --save 

Не забудьте флаг --save потому что мы хотим, чтобы он был сохранен в bower.json

Теперь мы можем запустить gulp && gulp watch .

Настройка основного модуля

Давайте начнем с настройки angular/main.js

 ( function (){ 
 "use strict" ; 

 var  app =  angular . module ( 'app' , 
         [ 
         'app.controllers' , 
         'app.filters' , 
         'app.services' , 
         'app.directives' , 
         'app.routes' , 
         'app.config' 
         ]); angular . module ( 'app.routes' ,   []); angular . module ( 'app.controllers' ,   []); angular . module ( 'app.filters' ,   []); angular . module ( 'app.services' ,   []); angular . module ( 'app.directives' ,   []); angular . module ( 'app.config' ,   []); 
     })(); 

Соединение Laravel & Angular

Обслуживание приложения

Нам нужно создать новый контроллер с помощью ремесленника.

 php artisan make : controller AngularController   -- plain 

 AngularController . php public   function  serveApp (){ 
     return  view ( 'index' ); 
 } 

и затем замените существующий Route::get('/', ...) в routes.php следующим:

 Route :: get ( '/' ,   'AngularController@serveApp' ); 

Поначалу это кажется бесполезным, но мне нравится хранить логику вне файла Routes, поэтому я предпочитаю, чтобы там не было замыканий. В конце концов, мы собираемся использовать этот контроллер для других методов, таких как неподдерживаемая страница браузера.

Затем нам нужно создать view resources/views/index.blade.php и добавить этот HTML:

 <html   ng-app = "app" > 
 <head> 
     <link   rel = "stylesheet"   href = "/css/vendor.css" > 
     <link   rel = "stylesheet"   href = "/css/app.css" > 
 </head> 
 <body> 

     <md-button   class = "md-raised md-primary" > Welcome to Angular Material </md-button> 

     <script   src = "/js/vendor.js" ></script> 
     <script   src = "/js/app.js" ></script> 
 </body> 
 </html> 

Неподдерживаемый браузер

Angular Material предназначен для вечнозеленых браузеров, поэтому нам нужно добавить страницу для неподдерживаемых (IE <= 10).

Мы начнем с добавления следующего условного комментария в <head> нашего представления index.blade.php :

 <!--[if lte IE 10]> <script type="text/javascript">document.location.href ='/unsupported-browser'</script> <![endif]--> 

Это перенаправит пользователя с неподдерживаемым браузером на /unsupported-browser , маршрут, который мы должны обработать в routes.php :

 Route :: get ( '/unsupported-browser' ,   'AngularController@unsupported' ); 

 public   function  unsupported (){ 
     return  view ( 'unsupported' ); 
 } 

 bower install angular - material -- save 

 angular . module ( 'app.controllers' ,   [ 'ngMaterial' ]); angular . module ( 'app.config' ,   [ 'ngMaterial' ]); 

 /angular/ config / theme . js : 


 ( function (){ 
     "use strict" ; angular . module ( 'app.config' ). config (   function ( $mdThemingProvider )   { 
         /* For more info, visit https://material.angularjs.org/#/Theming/01_introduction */ $mdThemingProvider . theme ( 'default' ) 
         . primaryPalette ( 'teal' ) 
         . accentPalette ( 'cyan' ) 
         . warnPalette ( 'red' ); 
     }); 

 })(); 

 bower install ui - router -- save 

 angular . module ( 'app.routes' ,   [ 'ui.router' ]); angular . module ( 'app.controllers' ,   [ 'ngMaterial' ,   'ui.router' ]); 

 ( function (){ 
     "use strict" ; angular . module ( 'app.routes' ). config (   function ( $stateProvider ,  $urlRouterProvider )   { 

         var  getView =   function (  viewName ){ 
             return   '/views/app/'   +  viewName +   '/'   +  viewName +   '.html' ; 
         }; $urlRouterProvider . otherwise ( '/' ); $stateProvider . state ( 'landing' ,   { url :   '/' , views :   { main :   { templateUrl :  getView ( 'landing' ) 
                 } 
             } 
         }). state ( 'login' ,   { url :   '/login' , views :   { main :   { templateUrl :  getView ( 'login' ) 
                 }, footer :   { templateUrl :  getView ( 'footer' ) 
                 } 
             } 
         }); 

     }   ); 
 })(); 

 <div   ui-view = "main" ></div> 
 <div   ui-view = "footer" ></div> 

 bower install restangular -- save 

 angular / main . js : angular . module ( 'app.controllers' ,   [ 'ngMaterial' ,   'ui.router' ,   'restangular' ]); 

 php artisan make : controller DataController   -- plain 

 DataController . php : 

 public   function  index (){ 
     return   [ 'data' ,   'here' ]; 
 } 

 app\Http\routes . php : 

 Route :: get ( '/data' ,   'DataController@index' ); 

 Restangular . all ( 'data' ). doGET (). then ( function ( response ){ window . console . log ( response ); 
 }); 

 ( function (){ 
     "use strict" ; angular . module ( "app.services" ). factory ( 'ToastService' ,   function (  $mdToast ){ 

         var  delay =   6000 , position =   'top right' , action =   'OK' ; 

         return   { show :   function ( content )   { 
                 return  $mdToast . show ( $mdToast . simple () 
                     . content ( content ) 
                     . position ( position ) 
                     . action ( action ) 
                     . hideDelay ( delay ) 
                     ); 
             } 
         }; 
     }); 
 })(); 

 ( function (){ 
     "use strict" ; angular . module ( 'app.controllers' ). controller ( 'TestCtrl' ,   function (   ToastService   ){ 
                     ToastService . show ( 'User added successfully' ); 
             }; 

         }); 

 })(); 

 ( function (){ 
     "use strict" ; angular . module ( "app.services" ). factory ( 'DialogService' ,   function (  $mdDialog ){ 

         return   { fromTemplate :   function (  template ,  $scope )   { 

                 var  options =   { templateUrl :   '/views/dialogs/'   +  template +   '/'   +  template +   '.html' 
                 }; 

                 if   (  $scope ){ options . scope =  $scope . $new (); 
                 } 

                 return  $mdDialog . show ( options ); 
             }, hide :   function (){ 
                 return  $mdDialog . hide (); 
             }, alert :   function ( title ,  content ){ $mdDialog . show ( $mdDialog . alert () 
                     . title ( title ) 
                     . content ( content ) 
                     . ok ( 'Ok' ) 
                     ); 
             } 
         }; 
     }); 
 })(); 

   . copy ( 'angular/dialogs/**/*.html' ,   'public/views/dialogs/' ); 

 ( function   (){ 
     "use strict" ; angular . module ( 'app.controllers' ). controller ( 'DialogTestCtrl' ,   function   ( $scope ,   DialogService ){ $scope . addUser =   function (){ 
                 return   DialogService . fromTemplate ( 'add_user' ,  $scope ); 
             }; $scope . success =   function (){ 
                 return   DialogService . alert ( 'Success' ,   'User created successfully!' ); 
             }; 


         }); 

 })(); 

 php artisan route : clear php artisan config : clear git pull php artisan migrate composer install php artisan route : cache php artisan config : cache php artisan optimize 

 npm install - g jshint jscs 

 root =   true 

 [*] insert_final_newline =   false charset =  utf - 8 end_of_line =  lf [*.{ js , html }] indent_size =   4 indent_style =  tab trim_trailing_whitespace =   true 

 [{ package . json , bower . json ,. jscs . json }] indent_style =  space indent_size =   2 

 [*. sh ] end_of_line =  lf 

 { 
   "browser" :   true , 
   "bitwise" :   true , 
   "immed" :   true , 
   "newcap" :   false , 
   "noarg" :   true , 
   "noempty" :   true , 
   "nonew" :   true , 
   "maxlen" :   140 , 
   "boss" :   true , 
   "eqnull" :   true , 
   "eqeqeq" :   true , 
   "expr" :   true , 
   "strict" :   true , 
   "loopfunc" :   true , 
   "sub" :   true , 
   "undef" :   true , 
   "globals" :   { 
     "angular" :   false , 
     "describe" :   false , 
     "it" :   false , 
     "expect" :   false , 
     "beforeEach" :   false , 
     "afterEach" :   false , 
     "module" :   false , 
     "inject" :   false 
   } 
 } 

 { 
   "requireCurlyBraces" :   [ 
     "if" , 
     "else" , 
     "for" , 
     "while" , 
     "do" 
   ], 
   "requireSpaceAfterKeywords" :   [ 
     "if" , 
     "for" , 
     "while" , 
     "do" , 
     "switch" , 
     "return" 
   ], 
   "disallowSpacesInFunctionExpression" :   { 
     "beforeOpeningRoundBrace" :   true 
   }, 
   "disallowTrailingWhitespace" :   true , 
   "disallowMixedSpacesAndTabs" :   true , 
   "requireMultipleVarDecl" :   true , 
   "requireSpacesInsideObjectBrackets" :   "all" , 
   "requireSpaceBeforeBinaryOperators" :   [ 
     "+" , 
     "-" , 
     "/" , 
     "*" , 
     "=" , 
     "==" , 
     "===" , 
     "!=" , 
     "!==" 
   ], 
   "disallowSpaceAfterPrefixUnaryOperators" :   [ 
     "++" , 
     "--" , 
     "+" , 
     "-" 
   ], 
   "disallowSpaceBeforePostfixUnaryOperators" :   [ 
     "++" , 
     "--" 
   ], 
   "disallowKeywords" :   [ 
     "with" 
   ], 
   "disallowKeywordsOnNewLine" :   [ 
     "else" 
   ], 
   "excludeFiles" :   [ "node_modules/**" ] 
 } 

 composer global require "squizlabs/php_codesniffer=*" 

 phpcs -- standard = psr2 app / 

 #!/bin/sh jscs angular /**/*. js jshint angular /**/*. js phpcs -- standard = psr2 app / exec 1 >& 2