Be right back.
38 | Landing page
9 |
10 |
11 | This is a starter project that gives you an out of the box configuration for Laravel5 and
12 | Angular.
13 |
12 | #ssh to your server here
13 | php artisan route:clear
14 | php artisan config:clear
15 | git pull
16 | php artisan migrate
17 | composer install
18 | php artisan route:cache
19 | php artisan config:cache
20 | php artisan optimize25 | Deploy.sh 26 | is available at the root level of your app. 27 |
28 |29 | Keep in mind that any configuration/routing change that you make, will not take effect until you clear the cache again. 30 |
31 |
12 | DialogService.alert('This is an alert title', 'You can specify some description text in here.');
13 |
14 | //use artisan ng:dialog add_users
15 | //$scope is optional. You'll be able to use $scope.$parent from within the dialog's controller
16 | DialogService.fromTemplate('add_users', $scope);21 | DialogService 22 | can be extended to suit your needs. 23 |
24 |13 | Elixir 3.0 has been configured to generate the following: 14 |
15 |29 | You can also create new elixir tasks inside the /tasks folder. Just like the bower and angular tasks. 30 |
31 |
12 | artisan ng:feature name #New feature inside angular/app/
13 | artisan ng:dialog name #New custom dialog inside angular/dialogs/
14 | artisan ng:directive name #New directive inside angular/directives/
15 | artisan ng:service name #New service inside angular/services/
16 | artisan ng:filter name #New filter inside angular/filters/
17 | artisan ng:config name #New config inside angular/config/22 | Do not append the words Service, Controller or Ctrl. 23 |
24 |25 | They will be automatically created according to the StudlyCase of the name you entered. 26 |
27 |28 | Use the snake_case for more than 1 word: add_users, add_items, edit_data 29 |
30 |
12 | composer create-project jadjoubran/laravel5-angular-material-starter --prefer-dist
13 | cd laravel5-angular-material-starter
14 | #fix database credentials in .env
15 | npm install -g gulp bower
16 | npm install
17 | bower install
18 | gulp && gulp watch
19 | php artisan serve24 | You're ready to go! Open http://localhost:8000 in your browser. 25 |
26 |
12 | (function (){
13 | "use strict";
14 |
15 | angular.module('app.config').config(function ($authProvider){
16 | // Satellizer configuration that specifies which API
17 | // route the JWT should be retrieved from
18 | $authProvider.loginUrl = '/api/1/authenticate/auth';
19 | });
20 |
21 | })();26 | JWT-auth is configured to work out of the box with dingo/api. Checkout the REST API docs. 27 |
28 | 31 |
10 |
11 | This is a starter project that gives you an out of the box configuration for Laravel5 and
12 | Angular.
13 |
12 | 14 | Debugbar allows you to easily debug your app. 15 |
16 |17 | You can debug pretty much everything: queries, routes, messages, mails, views, etc.. 18 |
19 |33 | Angular Loading Bar is that loading bar that you see on top when you navigate between routes. 34 |
35 |49 | Laravel5-angular-material-starter comes with some useful angular filters: 50 |
51 |
12 | $api->version('v1', function ($api) {
13 | $api->get('data', 'App\Http\Controllers\WelcomeController@getSample');
14 | });
19 | dingo/api package is meant to provide you, with a set of tools to help you easily and quickly build your own API. dingo/api works out of the box in Laravel angular material starter.
20 | Feel free to check their wiki to customize it.
21 | dingo/api is configured to work harmoniously with JWT-auth.
22 |
36 | Restangular.all('data').doGET().then(function(response){
37 | console.log(response.data);
38 | });43 | Restangular is an AngularJS service to handle Rest API Restful Resources properly and easily. 44 |
45 |
58 | //return your data using the api response macro
59 | return response()->api($data);
64 | ResponseMacroServiceProvider returns your data inside the data object.
65 |
67 | You can customize it to include other properties. 68 |
69 |70 |
71 | Also route versioning and Accept header are configured for you in angular/config/restangular.js, to match with Dingo/API. 72 |
73 |12 | The Laravel 5.1 that you loved, comes pre-configured to run with AngularJS: 13 |
14 |36 | AngularJS comes ready to communicate with the Laravel 5 API that you're building. It 37 | actually 38 | comes with a few sample API endpoints! 39 |
40 |41 | This is what you have out of the box: 42 |
43 |64 | Material Design as a UI library! 65 |
66 |67 | Here's what you'll get: 68 |
69 |
12 | (function(){
13 | "use strict";
14 |
15 | angular.module('app.config').config( function($mdThemingProvider) {
16 | /* For more info, visit https://material.angularjs.org/#/Theming/01_introduction */
17 | $mdThemingProvider.theme('default')
18 | .primaryPalette('indigo')
19 | .accentPalette('grey')
20 | .warnPalette('red');
21 | });
22 |
23 | })();28 | angular/config/theme.js 29 | is where you can change your theme. 30 |
31 |32 | Visit https://material.angularjs.org/#/Theming/01_introduction for more information. 33 |
34 |
12 | //info
13 | ToastService.show('This is a toast notification!');
14 |
15 | //error
16 | ToastService.error('Connection interrupted!');21 | ToastService 22 | can be extended to suit your needs. 23 |
24 |
12 | 14 | Open /unsupported-browser to see the unsupported browser page that shows for Internet Explorer 10 or below. 15 |
16 |17 | This is necessary because Angular Material uses the newest features in CSS (such as flexbox or its layout). 18 |
19 |
9 | The Laravel 5.1 that you loved, comes pre-configured to run with AngularJS:
10 |
32 | AngularJS comes ready to communicate with the Laravel 5 API that you're building. It actually
33 | comes with a few sample API endpoints!
34 | This is what you have out of the box:
35 |
56 | Material Design as a UI library! Chosen instead of bootstrap in order to avoid injecting jQuery
57 | with Angular.
58 | Here's what you'll get:
59 |
12 | #ssh to your server here
13 | php artisan route:clear
14 | php artisan config:clear
15 | git pull
16 | php artisan migrate
17 | composer install
18 | php artisan route:cache
19 | php artisan config:cache
20 | php artisan optimize25 | Deploy.sh 26 | is available at the root level of your app. 27 |
28 |29 | Keep in mind that any configuration/routing change that you make, will not take effect until you clear the cache again. 30 |
31 |
12 | DialogService.alert('This is an alert title', 'You can specify some description text in here.');
13 |
14 | //use artisan ng:dialog add_users
15 | //$scope is optional. You'll be able to use $scope.$parent from within the dialog's controller
16 | DialogService.fromTemplate('add_users', $scope);21 | DialogService 22 | can be extended to suit your needs. 23 |
24 |13 | Elixir 3.0 has been configured to generate the following: 14 |
15 |29 | You can also create new elixir tasks inside the /tasks folder. Just like the bower and angular tasks. 30 |
31 |
12 | artisan ng:feature name #New feature inside angular/app/
13 | artisan ng:dialog name #New custom dialog inside angular/dialogs/
14 | artisan ng:directive name #New directive inside angular/directives/
15 | artisan ng:service name #New service inside angular/services/
16 | artisan ng:filter name #New filter inside angular/filters/
17 | artisan ng:config name #New config inside angular/config/22 | Do not append the words Service, Controller or Ctrl. 23 |
24 |25 | They will be automatically created according to the StudlyCase of the name you entered. 26 |
27 |28 | Use the snake_case for more than 1 word: add_users, add_items, edit_data 29 |
30 |
12 | composer create-project jadjoubran/laravel5-angular-material-starter --prefer-dist
13 | cd laravel5-angular-material-starter
14 | #fix database credentials in .env
15 | npm install -g gulp bower
16 | npm install
17 | bower install
18 | gulp && gulp watch
19 | php artisan serve24 | You're ready to go! Open http://localhost:8000 in your browser. 25 |
26 |
12 | (function (){
13 | "use strict";
14 |
15 | angular.module('app.config').config(function ($authProvider){
16 | // Satellizer configuration that specifies which API
17 | // route the JWT should be retrieved from
18 | $authProvider.loginUrl = '/api/1/authenticate/auth';
19 | });
20 |
21 | })();26 | JWT-auth is configured to work out of the box with dingo/api. Checkout the REST API docs. 27 |
28 | 31 |
10 |
11 | This is a starter project that gives you an out of the box configuration for Laravel5 and
12 | Angular.
13 |
12 | 14 | Debugbar allows you to easily debug your app. 15 |
16 |17 | You can debug pretty much everything: queries, routes, messages, mails, views, etc.. 18 |
19 |33 | Angular Loading Bar is that loading bar that you see on top when you navigate between routes. 34 |
35 |49 | Laravel5-angular-material-starter comes with some useful angular filters: 50 |
51 |
12 | $api->version('v1', function ($api) {
13 | $api->get('data', 'App\Http\Controllers\WelcomeController@getSample');
14 | });
19 | dingo/api package is meant to provide you, with a set of tools to help you easily and quickly build your own API. dingo/api works out of the box in Laravel angular material starter.
20 | Feel free to check their wiki to customize it.
21 | dingo/api is configured to work harmoniously with JWT-auth.
22 |
36 | Restangular.all('data').doGET().then(function(response){
37 | console.log(response.data);
38 | });43 | Restangular is an AngularJS service to handle Rest API Restful Resources properly and easily. 44 |
45 |
58 | //return your data using the api response macro
59 | return response()->api($data);
64 | ResponseMacroServiceProvider returns your data inside the data object.
65 |
67 | You can customize it to include other properties. 68 |
69 |70 |
71 | Also route versioning and Accept header are configured for you in angular/config/restangular.js, to match with Dingo/API. 72 |
73 |12 | The Laravel 5.1 that you loved, comes pre-configured to run with AngularJS: 13 |
14 |36 | AngularJS comes ready to communicate with the Laravel 5 API that you're building. It 37 | actually 38 | comes with a few sample API endpoints! 39 |
40 |41 | This is what you have out of the box: 42 |
43 |64 | Material Design as a UI library! 65 |
66 |67 | Here's what you'll get: 68 |
69 |
12 | (function(){
13 | "use strict";
14 |
15 | angular.module('app.config').config( function($mdThemingProvider) {
16 | /* For more info, visit https://material.angularjs.org/#/Theming/01_introduction */
17 | $mdThemingProvider.theme('default')
18 | .primaryPalette('indigo')
19 | .accentPalette('grey')
20 | .warnPalette('red');
21 | });
22 |
23 | })();28 | angular/config/theme.js 29 | is where you can change your theme. 30 |
31 |32 | Visit https://material.angularjs.org/#/Theming/01_introduction for more information. 33 |
34 |
12 | //info
13 | ToastService.show('This is a toast notification!');
14 |
15 | //error
16 | ToastService.error('Connection interrupted!');21 | ToastService 22 | can be extended to suit your needs. 23 |
24 |
12 | 14 | Open /unsupported-browser to see the unsupported browser page that shows for Internet Explorer 10 or below. 15 |
16 |17 | This is necessary because Angular Material uses the newest features in CSS (such as flexbox or its layout). 18 |
19 |
