#100DaysOfCode: Day 2 Working with AngularJS and Bootstrap

I have now finished course 3 of Hong Kong University’s Full Stack Web Development Specialization, Frontend JavaScript Frameworks: AngularJS. It was probably the most trying course so far in the track, not due to it’s difficulty level, but due to the demanding amount of coursework that was expected on exercises and assignments.  Between the lectures, configuring code, getting components to work cohesively, completing project tasks, I believe I spent about 7-8 hours a week over the past month on this course.  I ‘m not complaining; all work is good work when you are trying to achieve a particular goal.  However, moments when you run code on the server that repeatedly fails is enough to cause anyone to be frustrated.

Nonetheless, I finished the course, and since I spent day 2 of the 100-Day challenge writing code for the assignments, I thought I share some snippets from my final project.  The snippets won’t make much since to those who don’t know AngularJS, so I encourage you to take the course for yourself if interested.

Background

AngularJS follows the MVC software architecture model, so code for the views (HTML files of the project) and controllers (written in JavaScript) are separate in my project folder.  For my project, I also utilized an Angular services, which are JavaScript objects that use dependency injections to share, organize, and communicate code to the controllers and views.  My project consisted of a web app for a mock restaurant called ConFusion.  It included a Bootstrap-driven UI, with menu options, promotional info, a chef directory, and user interactivity.  For the final assignment, I had to write code that populates the UI with content on the restaurant’s current promotion, info on the lead chef, and featured dish on the home page using data stored on the server.  I also had to update code that takes information submitted by the user via a feedback form and saves it on the server.

Angular $resource and Services

I used the Angular directive ngResource, use as $resource as a services dependency injection, to interact with the data and wrote the services code for displaying the dish being promoted by the restaurant, the menu option on the menu.html page, the chef directory (leadership), and save feedback when submitted through the contactus.html form.  Here’s my code snippet for services:

.service('menuFactory', ['$resource', 'baseURL', function($resource,baseURL) {
            
            // Implement getPromotion function to display promotional item
    
            this.getPromotion = function(){
                return $resource(baseURL+"promotions/:id",null);
            };
            
            // Implement getDishes function to display featured dish and menu options
    
            this.getDishes = function(){
                return $resource(baseURL+"dishes/:id",null,{'update':{method:'PUT'}});    
            };   
  }])


.service('corporateFactory', ['$resource', 'baseURL', function($resource,baseURL) {
     
            // Implement getLeaders function to display chef directory
            
            this.getLeaders = function() {
              return $resource(baseURL+"leadership/:id",null,{'update':{method:'PUT'}}); 
            };
        }])


.service('feedbackFactory',['$resource', 'baseURL', function($resource,baseURL) {
        
            // Feedback service
            
            this.getFeedback = function(){
                return $resource(baseURL+"feedback/:id", null,{'save':{method:'POST',isArray:true}});
            };
 }])

Controllers Setup

I set up three controllers to handle these tasks: IndexController for displaying a featured dish and promotion on home.html page, AboutController to display the chef directory on the aboutus.html page,  and FeedbackContoller for the form on the contactus.html page. The controllers would grab data served in the database file (db.json) and display enabled by the services.js code. If the data was present, the data would display as UI content, if not, an error message would display.  Success and error callback functions were implemented to render the display properly according to an initial conditonal set to false if data is loading and true if data is ready to display.  The following code snippet is an example of the AboutController.

.controller('AboutController', ['$scope', '$stateParams', 'corporateFactory', function($scope, $stateParams, corporateFactory){
            
            $scope.showLeaders=false;
            $scope.message ="Loading...";

            corporateFactory.getLeaders().query(
                function(response){
                    $scope.leaders = response;
                    $scope.showLeaders = true;
                },
                function(response){
                    $scope.message="Error: "+response.status+ " " + response.statusText;
                }
            );
  }])

Angular ngIf Directive

To tie it all together, I had to make sure that the views would display the data according to whatever controller the were assigned using the Angular ngIf directive and {{expressions}}.  For example, the code is set up below to display an error message if the condition assigned to ng-if evaluates to false, and display the chef directory from the AboutController if the condition assigned evaluates to true. The rest of the code utilizes Bootstrap, the UI framework chosen for this project. *I do apologize for the fuzzy screenshot, by the way*

had to screenshot, preformatted option is buggy

had to screenshot, preformatted option is buggy

Using json-server

I had previously installed json-server to store API data collected in the db.json file, and used that to save info from the feedback form. I ran into some issues with using Gulp as my task runner to grab any HTML and JS file data updates and store them into tjhe dist folder that feeds db.json. The script I wrote was not configured correctly, and instead of re-writing it, I made sure the code for gulp watch was correct and would run. The reason being is that running the gulp watch command would save updates to the dist folder as I wanted, and I could add them to the public folder within json-server directly that would run the app when initiated.  This was a tedious task but this way I could make sure the most recent and updated views were running on the server.

After all the previous work I completed on the project, as well as writing the code for the controllers, services, running gulp tasks, and starting json-server correctly in the terminal, I had a functioning app!  I cannot share the full app code on GitHub as that would be sharing the answers to the course assignments, but I did include some screenshots of the finished app below:

 

home page

home page

 

menu page

menu page

 

user is taken to the dishdetails page when a menu item is clicked

A user is taken to the dishdetails page when a menu item is clicked where they can enter a comment and it’s automatically updated using controller code of the app

 

Contact Us Page

feedback form on the contactus page. As the user types, a preview of the form is shown on the right. Once submitted, the database is updated

Bootstrappin’ Portfolio

In addition to finishing my assignment, I started reading “Bootstrap Site Blueprints” by David Cochran and Ian Whitley. Although I’m experienced in Bootstrap, the book details how to work specifically with LESS files for better customization of the framework. It also has 5 projects to do within it and I’m enjoying creating quick sites and taking a break from my studies. For the first project, I had to create a basic single-page portfolio site with a three-column setup for the content called Bootstrappin’ Portfolio.  I worked on it last night and implemented the navbar and a sliding carousel.  To check that project out and follow my progress, visit my #100DaysOfCode repo on Github for Day 2.

Be sure to follow me @SheThrives11 on Twitter to get daily updates on when I release challenge posts. If you are taking the challenge along with me, feel free to comment and leave a link to your blog or project. I’d be happy to support!

*** Day 2 Recap ***

  1. Added code for controllers, services, and the view HTML files  to AngularJS app project
  2. Reconfigured gulp watch command to update the distribution folder
  3. Install json-server to run the app from the dist folder that contains the updated HTML files and scripts
  4. After successful run, submitted project for final assignment, completed course
  5. Set up portfolio site project folder, created GitHub repo, and install Bootstrap and HTML5 Boilerplate
  6. Added navbar, carousel, and images to the site project

 

Advertisements

7 thoughts on “#100DaysOfCode: Day 2 Working with AngularJS and Bootstrap

  1. Pingback: #100DaysOfCode Day 8: Staying Upbeat and Focused on AngularJS | Our Code
  2. Pingback: #100DaysOfCode Day 10 & 11 Progress Report | Our Code
  3. Pingback: #100DaysOfCode Day 25: Examining Your Options for Mobile App Development | Our Code
  4. Pingback: #100DaysOfCode Day 25: Examining Options for Mobile App Development | Our Code
  5. Pingback: #100DaysOfCode Day 27: Installing Ionic and Starting an App | Our Code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s