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.

Next

MEAN Stack – Mongo Explorer & AngularJS Batarang – Day 14
Previous

MEAN Stack – AngularJS Models in Bootstrap Forms – Day 12

21 Comments

Let me know what you think

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Shubham Sinha
    Reply

    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.

    • bossable

      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)

  • Abdelhalim
    Reply

    hello,
    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??

    • bossable

      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:

      'use strict';

// Configuring the Customers module
angular.module('customers').run(['Menus',
	function(Menus) {
		// Set top bar menu items
		Menus.addMenuItem('topbar', 'Customers', 'customers', 'dropdown', '/customers(/create)?');
		Menus.addSubMenuItem('topbar', 'customers', 'List Customers', 'customers');
	}
]);

      Note: this is assuming that you have the following service in your app already: public/modules/core/services/menus.client.service.js

    • steve

      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.

    • bossable

      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.

    • Alex

      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.

  • Zach
    Reply

    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!

  • Zach
    Reply

    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?

    • bossable

      Hey Zach – do you have any JavaScript errors in your browsers console? There may be an issue with missing files.

      I don’t think I changed any code on the menus.