MEAN Stack – Intro to AngularJS ngRepeat & ngClass – Day 4

The MEAN Challenge Continues!

This video is part of the 30 Day MEAN Stack Honolulu Challenge

In this video we’ll look at two Angular directives, and how they can help to build the home page.

We look at:
– Two Angular Directives
– Looping through an array using ng-repeat
– Adding some dynamic styles using ng-class

The functional design post mentioned in this video of the home page – use case, storyboard and wireframes can be found here: Home Page Design.

Tags: ,
Next

MEAN Stack – Social Accounts to Sign-in with Facebook – Day 5
Previous

MEAN Stack – Intro to Bootstrap Buttons, Glyphicons, Navbar – Day 3

9 Comments

Let me know what you think

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

  • thatweezal
    Reply

    Is there a way u can make the source files available via copyable text, as you did in the first 3 days? That way, we can do each day correctly in sequence, but if we download and integrate everything at once it already finishes the whole thing for us.

    • bossable

      Hey there, I appreciate your feedback and I understand the difficulty with trying to follow the code in the videos. Unfortunately, I didn’t keep the code source as I was going through it. If you or anyone else wants to send me the code for the different days, I’d happily update the posts to include it.

      I’m thinking about doing an updated version of the mean stack 30 day challenge with Angular 2 in the next few months, and will take the feedback on-board to make the process easier to follow the next time around.

  • MR
    Reply

    Hi Shristi,

    Thank you for all the tutorials! I was wondering if you have the source code for each day somewhere posted? maybe on github or somewhere?

    Thanks a ton!

  • Harsh
    Reply

    Hello Shristi,

    In this example you have 6 items to show on your home page.
    In my app i have 12 items, lets say more than 6.
    So, in my case do i have to enter each 12 items manually for displaying…???
    because i want to use same color for the icon after repetition but the different description and total.
    so my question is do i have to add these 12 items like in this tutorial or is there any logic available to write these items 6 times and it displays 12 times..?

    Thanks in Advance.
    Harsh.

    • bossable

      Hi Harsh – I’m not entirely sure that I understand the question.
      If you’ll be using static data, you can add the data to $scope.alerts and loop through it.
      For data that is the same, such as your icon colours, you can remove it from $scope.alerts, and just add it in your view (it would be added as a ‘class’ rather than ‘ng-class’).