MEAN Stack – Style the Create Customer Page – Day 13
The MEAN Challenge Continues!
This video is part of the 30 Day MEAN Stack Honolulu Challenge
In this video we continue styling the Create Customer Page and look at some Angular functionality. We also create our first Customer Record.
We look at:
– Using CSS to style the Create Customer Page
– Create a new Customers CSS File
– Increase the size of the User Glyphicon
– Align the Referred Checkbox to the left using CSS
– Use ng-class to dynamically change the colour of the User Glyphicon based on the Referred checkbox
– Check if we can create a Customer Record without logging in
– Log into the App so that we can use the Customers Menu
– Create our first Customer record
– Look at how $location can be used to route a user to a new view
The functional design post mentioned in this video with the use case, storyboard and wireframes can be found here: Home Page Design.
Hey thanks for making these awesome videos. I am working on an app which requires nested database.
Product->Category->SubCategory->ItemName->ItemDetails(MRP, SP, ….)
I followed the steps shown in video, plus checked out mongoose docs for creating a nested collection. I am able to grunt successfully ( no errors), but when I try to submit the form, only the parent field value is getting updated. The fields inside it show custom error. On removing the ” required ” from server.model.js the form is getting submitted with default null value.
Hey Shubham – if you’re using nested subdocuments, you may have hit the mongo limit.
How did you all of a sudden log in? Please advise! Thanks 🙂
I had to go play back the video to see what you meant! At 7:37 – I created a user and logged in. I did it SOOO fast, between 7:37 and 7:38 that you can’t even see it in human speed 😛
(The other, slightly more likely explanation is that I must have chopped it out when I was editing the video)
I was successful in creating a new customer, I fixed the id of firstname and lastname under the input fields!
i have a problem, the “customers” in the menu (header of the home page) didn’t appeared automaticly like yours,
can you help me please??
Hmm…This may have occurred if the menu option wasn’t selected when the crud module was generated. Here are some steps which might help:
1. Create an empty js file here: public/modules/customers/config/customers.client.config.js
2. Paste in the following code:
Note: this is assuming that you have the following service in your app already: public/modules/core/services/menus.client.service.js
Hollo.. did you use the MeanJS blog generator for your blog? Interested to know.
Hey Steve, Thanks for your question. I haven’t used the MeanJS blog generator.
ok.. I tried to use the generator and it blew up my app. I would like to learn how to add a comments page similar to this one. Any plans to do a tutorial ? The others have been so helpful in regards of accelerating my coding skills.
I’m planning to create some new videos soon.
In the meantime, have a look at some of the angular modules that are available for comments to get some ideas, a quick search found me this one : http://caitp.github.io/ui-comments/#/
Where did you include the css file?
Hi Alex, thanks for your question.
Add the CSS file in the following location: Public > Modules > Customers > CSS > ‘customers.css’
As long as the file is added to the CSS folder for the module, the app will automatically pick it up when the server is restarted, using the code on line 33/34 of the all.js file.
You were right. I was so used to the web server restarting itself when files changed that I didn’t realise it would be necessary to manually restart it. When I did, it picked up the CSS. Thanks for these tutorials, I think they are going to become a great resource. It is one of the only tutorials I have followed and everything works and looks exactly the same as your screen when I follow the instructions.
I had the same problem. Thanks for clarifying. I didnt know I needed to restart my “nodemon server.js”
Looks like it was an issue with the version of some of my components, running “bower update” resolved it for me. Good hint for anyone else following that runs into the same issue!
Great videos! I’ve noticed that in my local confiruation the button dropdown for Customers in the top menu bar does not function properly i.e. it doesn’t respond to clicks to reveal the dropdown options or parse the route. However, I can manually enter the GET request for “/customers” in the URL bar and it loads successfully. Did you have to make any modifications to the base code to allow it to work properly?
I don’t think I changed any code on the menus.