HiveBrain v1.2.0
Get Started
← Back to all entries
snippethtmlMinor

Online store for pies - Part 1: Create your account to buy delicious pies

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
yourcreatepartbuypiesstoreonlineaccountdeliciousfor

Problem

I've got a goal and that goal is to become an Angular expert. So what better way of learning than to create an online store for pies, right? I've just finished the registration part and would like some feedback on it.

The registration process happens via Firebase's AngularFire, I decided to use Firebase because I've heard that it works great with Angular and I really want to become good at both of these frameworks. I use the AuthWithPassword feature as the authentication when logging in. And I store some personal info in a JSON format in Firebase to use at the checkout at a later point.

Now what I need some feedback on is the following:

  • I've split my controllers up into multiple ones to handle different logic across the application. Should I split this controller up even more since it's going to be even bigger once I add the login functionality to it? I've heard that this is the way to go but it also seems silly to put everything in a different controller because in the end it feels like it's going to get more messy than it has to.



  • Can I "angular-ify" my markup to make it better in any way?



  • Anything in general that I'm doing wrong or should improve to following best practices.



The registration template:

```

Fill in your information



Firstname:

*


Lastname:

*


Street address:

*


City:

*


ZIP/Postal code:

*


Country:

*


Email:

*


Password:

*

Solution

Nice project, I hope by helping out will eventually get some free pie? Anyway, one pretty big thing about why I like angular is the two way data binding. In this example you set up your form and referencing it with jQuery .val() to get the values and build your user object. Instead use the ng-model directive and you user object will create itself! :)

e.g:



In your controller you will then have access to the userinfo obejct via $scope.userinfo, no need for jQuery!

Moving on to the validation and the displaying of error messages, instead of writing out every possible case in your markup and then displaying it via the controller I would let the controller do all the work and just tell the template to render errors. E.g I would create an array 'errors' which I would bind to the scope so it becomes accesible from the view. In the template I would simply do:

 {{ error }} 


Your controller would then be responsible to push the error messages to the errrors array. But dont forget to reset it before you validate! You dont want last times error messages :)

Thats it for me!

Code Snippets

<input type="email" ng-model="userinfo.email" alt="Enter your email" placeholder="Email" 
                       id="email" class="input rounded-corners box-shadow">
<h5 ng-repeat="error in errors" class="error"> {{ error }} </h5>

Context

StackExchange Code Review Q#78874, answer score: 3

Revisions (0)

No revisions yet.