well done! How to start building a new app/project

[odyright]

Well done! you did a good work! please i need your help, i followed all the instruction installing your project. And i see the side menu bar on the left. But now what am'i supposed to do? and how could i began ? please, i'm new & unexperimented developper! could you give me an advise and sample?

[jadjoubran]

Hi @odyright Thanks!

So everything that regards Laravel stays the same.. So your workflow should not change If you need help in Laravel, I'd recommend laracasts.

Regarding Angular, also nothing should change. You just have to open the angular folder and you can create a new folder by feature. Say you want to create a login feature, then you'd create a login folder with login.html and login.js and optionally login.less.

By the way, this is the recommended workflow, but you can change it to suit your needs. And you can also use php artisan ng:feature login to generate these files, folder and sample controller.

Now let's say you want to add a new page, you just have to open routes.js and add a new route. Try to see how previous routes in the demo are implemented. The cool thing about this repo is that it uses itself to show the documentation. So you can always tinker with its source code.

There's also a sample API call that you can see in the routes.php file.

So if you feel that these are weird, this is because there are some libraries that are being used. So assuming you know Angular, you just have to check the following libraries: ui-router and restangular. But again, if you don't feel comfortable with restangular for example, you can stick to plain old $http.

I'd recommend that you start by creating a new page to the documentation that calls a sample API GET method. And feel free to ask me if you encounter any issue.

[odyright]

thank you @jadjoubran I will let you know about my progress on this work.... for exemple :+1: I am creating a home page that provides a wizard registration form (with material design) in 4 steps. how do I proceed? I want to remind that I am new so thank you again for your expertise and your indulgence.

[jadjoubran]

So this is absolutely just plain angular right?

I'm guessing you can look for ready made angular wizard components: You can try this one angular-wizard or follow this tutorial on scotch.io.

I'm going to close this issue for now, but feel free to comment again and I'll reply as soon as possible :D

[odyright]

ok thank you very much! :+1: , could i use it in your project without any problems!?

[jadjoubran]

Yes of course!

[odyright]

hello, I have somme problems with the gait to follow you prescribed me . I create a new page but nothing appears ! may be i should do something else?

I do not control very well yet Laravel and angular ... but my goal is to come to understand and become a good developer

[jadjoubran]

Hi @odyright

What you did is the first step. Which is adding the route to the routes file. Great! Now if you want it to show in the sidebar, you have to open the sidebar.html file and add a new entry to the new page and fix the ui-sref directive to link to your new page!

Let me know if it works for you The reason why you might think this is over-complicated is because there are so many underlying libraries that are being used here

[odyright]

i did it, but the link didn't target because i forgot to add the same route in public/js/app.js, and now it works very well :+1: I projected to correct my design

[odyright]

Hello, @jadjoubran ..Excuse me again this time if I screwed up all night and I can not stylize my form . should i use a custom css/less file. if yes where should i include it?

I want to do something in this kind or better than that

[Bodom78]

To theme Angular Material you should read their documentation at https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme

This file you will use to modify with what you learn from the Angular Material docs is located in angular/config/theme.js

Add any less files you like in the angular/app folders, as long as gulp watch is running it will get compiled into the project.

Example add angular/material/mystyles.less run gulp watch and add any css you like.

To style the sidebar you can modify the existing angular/app/sidebar/sidebar.less

[odyright]

thanx... but @Bodom78 i don't want to themify in my own way but i want to add my own page with new features like form wizard like the picture above! but i still hurt

[jadjoubran]

@odyright it's exactly what @Bodom78 said. If you want to add you rown CSS file, you need to create a new less file and make sure gulp watch is running.

[odyright]

Pfffff......Ok ok but i don't have any experience

[odyright]

How to do it ?

[jadjoubran]

@odyright you need to follow the steps that @Bodom78 mentioned 1) run gulp watch 2) create a new less file in angular/material/mystyles.less and add your custom css there

[odyright]

hah ok i see! but my first purpose is to be able to build a multi-step form like what i shown above! if i follow the steps that @Bodom78 described to me, could i achive my goal?

[jadjoubran]

Assuming that you used a ready-made library as I previously suggested? Yes

[odyright]

:+1: :100: is there a particular way to create a new .less file

[jadjoubran]

Command line or your Explorer. Just like you usually do it

[odyright]

in fact i don't know

[jadjoubran]

You just have to create a new file using the normal file explorer

[odyright]

i did, the next?

[Bodom78]

Sounds like this might be out of scope of what this "Starter Project" is actually for.

The starter project is for those who are familiar with the libraries and want an idea on how to incorporate them all into a functional project.

What it's not for is teaching you how to use the libraries themselves. There are many resources out there already for that.

At a minimum I'd say a decent understanding of how AngularJS and angular apps work is required before anything else.

[odyright]

it's what i want to do, ok I understand, if you're already stalled in development don't be too hard on me pls! Help me rather as @jadjoubran done.

[jadjoubran]

Hey @odyright No one is too hard on you, but what @Bodom78 said is actually right. The recommended way would be to get familiar with the underlying technologies or else you're not going to be able to enjoy & succeed developing this because there are too many underlying libraries

[odyright]

thanx @jadjoubran thanx @Bodom78 , i will perform myself

[jadjoubran]

Good luck mate, feel free to reopen if you have more issues

[odyright]

hello @jadjoubran how could i put the datetime / datebirth field?

[jadjoubran]

This is what you're looking for: datepicker

[odyright]

yes but i tried to do that without success! the field doesn't appear. here are my file's code, can you correct my mistakes / or can you guide me? (function(){ "use strict";

angular.module('app.controllers').controller('InscriptionsCtrl', function($scope, $mdToast,      $mdDialog, $interval, ToastService, DialogService){
    //
    $scope.promoImage = 'https://i.imgur.com/ZbLzOPP.jpg';
    $scope.icon = 'send';

    var icons = [
            'skip_next', 'school', 'share', 'star_outline'
        ],
        counter = 0;

    $interval(function(){
        $scope.icon = icons[++counter];
        if (counter > 4){
            counter = 0;
        }
    }, 2000);

    $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());
});

})();

[jadjoubran]

Is gulp running? If not then run gulp && gulp watch

[odyright]

Yes, i tried but nothing could you describe me how to do that from scratch @jadjoubran ?

[jadjoubran]

Check your inspect element console, it seems you have some errors

[odyright]

thank you, very much!

[jadjoubran]

@odyright check this out, it might help you understand the underlying technologies for this repo http://www.sitepoint.com/flexible-and-easily-maintainable-laravel-angular-material-apps/

[odyright]

yes thanx

[odyright]

I appreciate the help you provided me

[jadjoubran]

Sure no worries!

[odyright]

Hello @jadjoubran i didn't want open a new issue because i encountered the same difficulties. i created a new page "Inscriptions en ligne" which works very well. And now i want to change the look in the html and less file under angular app folder by adding a locked sidenav with subheaders but nothing on my side. i want it looks like joelcox.io website with animation. could you tell me how to start?

[jadjoubran]

Hi @odyright Have you seen the official angular material docs on that?

[odyright]

Yes of course! may be i messed something.

[odyright]

Your repo has 3 views, main, header & footer which are named.. so should i named an other in the concerned state for my new page (sidebar & subheader) so the look would be changed?

[jadjoubran]

You can either use a different named view or just simply edit the sidebar.html