Introduction
Recently, I started learning AngularJS as my new project demands it. The reason for starting this series is to share my learnings so that some other learners may find it useful.
Meet Angular
AngularJS is a superheroic, open source, client-side JavaScript web application framework with a promise to provide high-productivity web development experience, super-powered by Google and the community. Described as a "a structural framework for dynamic web apps" by the development team, AngularJS is called superheroic because it left nothing for the developers to think about but the core business and logic of the application.
Angular was developed at Brat Tech LLC by Miško Hevery and Adam Abrons back in 2009 as a framework to connect a JSON storage in the cloud with applications written with HTML and JavaScript. Aborns named the framework Angular being inspired by the angle brackets of the HTML tags. Later, the Angular Duo released Angular as an open-source library. After Abrons left the project, Hevery, continued working on the library with other Google employees.
"Declarative code is better than imperative when it comes to building UIs and wiring software components together, while imperative code is excellent for expressing business logic" - being developed around this belief, Angular empowers traditional HTML by extending its current vocabulary to serve dynamic content through a technique named two-way data-binding that allows the automatic synchronization of models and views. Focusing completely on the goal of improving testability and performance, AngularJS de-emphasizes previously trending DOM manipulations with JavaScript.
MVW: The Architectural Concept
AngularJS was built on top of the concept of the Model-View-Controller pattern. The MVC pattern was introduced to separate the software applications' concerns. By concern, we understand the logical units of an application that have similar roles or purposes. MVC divides an application into three parts as the name implies: Model, View and Controller.
- Models hold the knowledge about the business domains.
- Views are the UI that the users interacts with.
- Controllers stick the models and the views together. They form the business logic and the presentation layer of the application. Basically, controllers are the ones responsible for controlling the flow of the application.
These concepts are a bit abstract these days. Depending on the language, platform, and purpose of the application, they are implemented in various ways. As the controller is responsible for basically deciding which parts of the model to display in the view, depending on the implementation, it can also be visualised as a viewmodel, or a presenter. Though conceptually, a typical AngularJS application consists of views, models, and controllers, but also other important components, such as services, directives, and filters are there to support so it would provide facility to design an application with Models, Views and Controllers, Viewmodels or whatever seems to fit best . So, its authors decided to say AngularJS Model-View-Whatever (MVW).
The Design Philosophy
What makes Angular different form others is its design philosophy. We must need to look into them to have a proper understanding of what is in offer for us.
Data-driven
One of Angular’s core features is its data-binding. In an Angular application, it does not need to combine data from models and put it together with HTML templates to deliver a view to the user. What we need to do is to bind the data in the HTML Angular takes the responsibility to get the value from Model and show it in the View.
Declarative
Angular has a declarative approach to extend the vocubulary of HTML through the capability of creating reusable components named directives. Directives basically custom HTML tags or attributes which Angular resolves when rendering them to browsers.
Separation of Concerns
As AngularJS evolved around MVC pattern, it does divide the application into three parts with designated responsibilities.
Dependency Injection
Angular is one of the rare breed of JavaScript frameworks with a fully equipped built in Dependency Injection system. Dependency Injection is a concept of providing the dependencies of a particular module or class from their caller as parameters or in any other form, rather than instantiating them inline.
Extensibility
AngularJS is able to extend HTML with unlimited new things. Along with the built in directives, it provides an API that allows the developers to do anything they can imagine to create declarative, reusable components.
Testability
AngularJS is designed to be testable, from its nuts of controllers, services, and directives to its bolts of views and routes. This one feature makes an Angular application scalable and manageable over time and helps to maintain the confidence on the application.
Why Angular?
Now, extracting the juice, why should we choose Angular over others, what are the benefits.
- As the superheroic framework, Angular takes care of everything while the developers can focus entirely on the application core.
- An AngularJS allows the developers to do less coding to build an application than other JavaScript solutions. In fact, Miško made a bet with his manager and reduced a project of 17,000 lines of codes to just 1,500 lines using AngularJS.
- AngularJS applications are easier to understand because of its declarative design philosophy.
- Like any other MVC application, the UI layout and design of an AngularJS applications can be changed regardless of their business logic and functionality. It also makes the application modular, flexible, and testable.
- AngularJS application templates are written in pure HTML, which provides a great opportunity to see web designers and JavaScript developers working parallely.
- Unit tests in AngularJS applications is easy.
- AngularJS allows us the opportunity to integrate other JavaScript libraries.
Getting Started with Angular
It is always better to learn as you work. So, I will start with a small project and discuss things as we go. This will not be an enterprise application. Rather I will try to cover the basics, perhaps a bit more than the basics and the standard practices (no practice is the best practice) in a test driven way.
We will develop a store application. We will build the requirements as we go. If that does not sound so planned, the purpose of the project is learning AngularJS not delivering the project. So, our project requirements will evolve around our needs in regards of learning Angular.
First Thing is First: The Setup
Get Angular
It is obvious that we will need the AngularJS library to get started. If you already do not have it, download it from its official website https://angularjs.org. Hit the "Download" button. I would like to have the stable version with the "zip" option selected. That will give me whole lot of the library, which I may or may not need. But I have enough disk-space to store them.
Twitter Bootstrap(?)
It is totally out of context. Angular has nothing to do with it. But I liked to have it for beautification in a later point of time.
IDE
Check that your favourite IDE is still there. If you don't have any, I will recommend Sublime Text. It is text editor, light weight and has project feature. Also, Angular package can be installed from https://github.com/angular-ui/AngularJS-sublime-package.
Web Server
To serve the files, we need a server. I used the Node.JS http-server. It is very light weight. To set up the server:
- Go to the download page of Node.JS website (http://nodejs.org/download/) and download as per your operating system.
- Install Node.JS
- Open Node.JS Command Prompt from your start menu and type:
npm install http-server -g
Test Runner
As it will be a test driven approach, we need to run the tests. And to run the test, we need a test runner. To have the "spectacular Test Runner for JavaScript" you just have to type the following in the same Node.JS Command Prompt:
npm install karma -g
npm install karma-ng-scenario -g
Yes, Karma (http://karma-runner.github.io/) is also a Node.JS module and yes, probably it is the best test running tool that fits with Angular.
Project Environment
If you have done up to this point, you have installed everything to start the project. Now it is time to set up the project environment.
So, create two folders inside "NGProducts" folder named "app" and "test".
-
Let's create a workspace folder. I named my project "NGProducts", so I named the folder the same.
- All test driven projects has two parts:
- The main application
- The tests
-
In the "app" folder, create a file and name it "index.html". Put the following HTML in the file:
<!DOCTYPE html>
<html>
<head>
<title>NGProducts</title>
</head>
<body>
<h1>Hello World!!!</h1>
</body>
</html>
-
We need to start the web server now to check our magnificent work. To do that, type:
http-server [path/to/app]
By default, it starts the server at localhost:8080. To access advanced options, feel free to check https://www.npmjs.com/package/http-server.
- Hit the browser and go to localhost:8080.
If you are seeing what I am seeing, congratulations! You have successfully configured the http-server. We can now say Hello to Angular.
Hello Angular!!!
To start developing an Angular app, the first thing we will need is to include the Angular library to the project. To do this:
- In the "app" folder, create "lib" folder and in "lib" folder create "angular" folder. We will add more libraries as we need them.
- Unzip the AngularJS package that we have already downloaded. Copy the "angular.min.js" file to "NGProducts/app/lib/angular" folder.
- Add the following line just before the end of the
<body> tag:
<script src="lib/angular/angular.min.js"></script>
- We are just about to create our first Angular App. Open the "index.html" file in your editor and change it to:
<!DOCTYPE html>
<html ng-app>
<head>
<title>NG Store</title>
</head>
<body>
<h1>Hello {{'A' + 'ng' + 'ular' + '!!!'}}</h1>
<script src="lib/angular/angular.min.js"></script>
</body>
</html>
Save and hit the refresh on your browser. If you are seeing what I am seeing, you have successfully said hello to Angular.
What the 'Hello' was That?
If we look back to our codes, it is pure HTML so far except for some unfamiliar symbols and notations like "ng-app" and curly braces ('{').
Angular teaches HTML new tricks with something they call "Directives". Angular comes with a number of predefined directives loaded in the library and that is not the limit. We can create our own directives which opens unlimited possibilities just with HTML and Angular. We will have a deeper discussion about directives later. But to start with, directives are something (could be inform of attributes, elements, classes or comments) while found in the DOM, Angular knows that it has to do something with those directives.
ng-app is a directive that tells Angular which part of the DOM it has to manage. In our case, we declared it in the <html> tag that is we wanted the whole page to be managed by Angular. It can also be declared with smaller parts of the page like in <div> tags. This becomes really handy if we want to implement Angular in an existing system which is developed with some other technologies but we want new things to be developed in Angular.
Angular adopted the double curly braces ('{{') notation from mustache.js (https://mustache.github.io/). It says Angular to resolve the things described in between '{{' and '}}'.
Now let us look at what really happened in our application. Angular does not kick in until the DOM is loaded. When it found ng-app in the DOM, it knew which part of the of the DOM it needs to manage and started looking for things that it needed to do. As soon as it found the '{{', it started interpreting the codes written within the double curlies updated that part in the DOM with the resolved values.
Conclusion
That is all for now. Hope it gives a pretty good base to get started with Angular. I will be back with the next part of the tutorial soon enough. Till then, adios.
