Posts

Showing posts with the label angular-seed

AngularJS SPA Pt 3 : Refactor Code to Not Use Global Variables (Shopping List App)

Image
In the previous blog we got Angular-Seed to work with a module and a controller.  However, we put everything in the global scope.  The problem with that is that there are many JavaScript libraries that might be using the same variables as we are, or if we are working with other developers.  The way we can mitigate this problem is to wrap our modules and controllers in an anonymous function.  Think of an anonymous function as a wrapper or a container to hold our modules and controllers.  Another term developers like to refer to anonymous function is an IIFE.  Whatever it's called it's always good practice to avoid putting things in the global environment if it can be avoided. Here are the steps to take the modules and controllers out of the global environment: 1.  First let's wrap the module in an anonymous function.  The source code for the app.js file should look like the following (function(){ 'use strict'; var app = angular.module('sho...

AngularJS SPA Pt 2 : Preparing Angular-Seed For The Shopping List Application

Image
The previous blog we setup the Angular-Seed boilerplate template for our SPA application.  In this blog we are going to prepare the Angular-Seed template for our SPA application which is going to be a simple shopping list application.  The steps below describes the steps to clean up some of the pages in the angular-seed template for our application. 1.  Delete the content of the "index.html" page in the angular-seed main folder.   It is located in the main folder of the angular-seed template "/angular-seed 2.  The source code file "index.html" should look like the following <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Shopping List App</title> <link rel="stylesheet" type="text/css" href="app.css"> </head> <body> <script type="text/javascript" src="js/lib/angular.js"></script> <script type="t...