Carlos Azaustre - Agile web development with AngularJS

Table of Contents

1. 1. Structure of a Modern Web Application
   2. Technologies
2. 1. Installing Google Chrome
   2. Installing and Configuring Sublime Text or Atom
   3. Installing and Configuring iTerm2
   4. Installing Git
      1. Registration on GitHub
      2. Registration on GitLab
   5. File and Directory Structure
   6. Automating our Workflow
3. 1. HTML5Boilerplate
   2. Installing Dependencies
   3. Application Modules
      1. Architecture
      2. Main
      3. Services
      4. Controllers
      5. Partial Views
4. 1. Fontawesome
   2. Typographic Fonts
   3. Application Styles
5. 1. Template Caching
   2. Concatenation of JS and CSS Files
   3. Production File Server
   4. Reducing CSS Code

Agile web development with AngularJS

Copyright 2015 Carlos Azaustre. Author & publisher.

Copyright 2015 Erica Huttner for English Translation.

• 1st Edition (Spanish): August 2014
• 2nd Edition (Spanish): January 2015
• English Edition: March 2015

Published by carlosazaustre.es Books

Biography

Carlos Azaustre (Madrid, 1984) Web developer, focused on the front end , lover of JavaScript. Various years of experience at private companies, startups and as a freelancer . Currently working as CTO of the startup Chefly BSc in Telematics Engineering from Charles III University of Madrid and studies for the MSc in Web Technologies from the University of Castile-La Mancha (Spain). Outside of formal education, he loves self-learning using the internet. You can find his articles and tutorials on his blog carlosazaustre.es

Other recently published books

Instant Zurb Foundation 4

Get up and running in an instant with Zurb Foundation 4 Framework

• ISBN : 9781782164029 (September 2013)
• Pages : 56
• Language : English
• Authors : Jorge Arvalo y Carlos Azaustre
• Buy on Amazon

2. Basic Concepts

Note
This book is intended for those who have basic knowledge of programming, web development, JavaScript and are familiar with the Angular.js framework even at a very basic level. Note
This book follows the development of an example of a simple web application (blog), which consumes data from an external API that we will not develop, therefore it is beyond the scope of this book. Angular.js is much more than this; this book merely provides the basis for the implementation of scalable and maintainable web applications and the use of task managers like Gulp.js to be more agile.

2.1 Structure of a Modern Web Application

A web application, currently, is usually composed of three main parts:

• The public or client part, also known as the front end
• The server part, known as the back end
• The data storage, or database

The database is responsible for storing all of our applications information. Users, data related to our application, etc... This database communicates with the back end , which is responsible for monitoring security, data processing, authorization, etc... Finally the front end is the part that runs on the end users browser, and is responsible for displaying information in an appealing manner and communicating with the back end to create and display data. In a modern web application, communication is achieved asynchronously with JavaScript (AJAX) using the document format JSON to send and receive data from the back end through a REST API.

In summary, to create a complete web application we need:

• A database so that the information can be stored persistently.
• A back end that is responsible for security, authorizations and data processing through a REST API.
• And a front end that lays out the data, presents it and communicates with the API using AJAX and JSON . In this example we are going to deal with the front end .

2.2 Technologies

Throughout this example we will program what is known as a single page application , a web application of a single page that does not reload with each server request we make, since it will communicate asynchronously thanks to JavaScript.

JavaScript was the language used on the web to add effects and animations to pages. But this language has evolved significantly in the present day, to the point of being taken to the server with Node.js . Node.js is a programming environment driven by events, meaning that the user defines the programs flow through the user interface, in this case the web page. Following a non-blocking input and output model, this allows us to do asynchronous programming, similar to AJAX in the client JavaScript. At present there are numerous frameworks that make programming easier on the server-side. The most known and widespread is Express , although others exist, depending on your needs, such as: Meteor , Restify , Sails , Koa , Hapi ,...

JavaScript has evolved to the point that it is also found in databases, as in the case of MongoDB , a non-relational database ( NoSQL ) whose entries are stored as documents in the BSON format: Binary JSON that allows for the reading and writing of data to be done very quickly and in an atomic manner, as long as we organize our data model following a non-relational structure. It is a different way of thinking from the classic SQL.

Of course JavaScript has also evolved on the front end , where it has always resided, though its implementation has improved thanks to the emergence of MVC frameworks that allow us to modularize code and avoid the famous spaghetti code that is generated when we are not careful. Within this family of frameworks we can find Backbone.js , Ember.js and the one that we will use which is Angular.js , a project developed at Google in 2009 that is now achieving widespread popularity.

By combining these technologies in all of the parts that form a web application, the same programming language (JavaScript) is used throughout the entire technology stack from beginning to end, which is known as JavaScript end-to-end or also MEAN Stack , which refers to its use of ( M )ongoDB, ( E )xpressJS, ( A )ngularJS and ( N )odeJS.

3. Configuration of the Work Environment

Our work environment must have the appropriate tools that allow us to be agile and check errors without wasting time on repetitive tasks.

We need a modern web browser, which supports new standards and includes a console and development tools. Today, one of those that provides the best results, in terms of development, is the Google browser, Chrome.

We also need a text editor. There are developers who prefer an IDE like Eclipse, WebStorm, NetBeans, etc... I personally find myself to be most comfortable with minimalist editors like Sublime Text or the recent Atom.io.

Although we are front ends and the terminal seems more related to the back end or server management, we need to use it too. We need one that is simple to use and efficient. If you have a MacOS X system, I recommend iTerm2.

Note The next steps are for installing the programs on a MacOS X system. For other operating systems consult the documentation available on their respective websites.

3.1 Installing Google Chrome

Next page