Getting Started With AngularJS

Contents

Chapter 1: Getting started

• Introduction
• MVC (Model-View-Controller)
• Angular Architecture
• AngularJS advantages
• Comparison with jQuery
• Modules
• Pre-requisites
• Angular movie app review
• Angular skeleton project
• Download code
• Summary

Chapter 2: Controllers & Markups

• Introduction
• Controllers & Scope
• Writing first controller
• Displaying Repeating information
• Handling events
• Built-in directives
• Event directives
• Other directives
• Expressions
• Filters
• Custom filters
• Two way binding
• Validation
• Summary

Chapter 3: SERVICES

• Introduction
• Creating Custom service
• Creating user page
• Built-in services
• Using $http & $q service
• Angular js graph
• Using $resource service
• Using cache factory service
• Using compile service
• Using parse service
• Using locale service
• Exception handler service
• Filter service
• Creating auth service
• Summary

Chapter 4: Routing

• Introduction
• Adding first route
• Adding more routes
• Parameterized routes
• Default route
• Using location service
• Summary

Chapter 5: CREATING CUSTOM DIRECTIVES

• Introduction
• Creating first directive
• Encapsulating elements
• Isolating directive scope
• Handling events
• Using controllers
• Using require
• Directive priority
• Nested directives
• Summary

Chapter 6: TESTING Angular

• Introduction
• Installing karma
• Webstorm settings
• Testing controllers
• Testing service
• Writing ajax test
• Writing filter tests
• Writing end-to-end tests
• Debugging tips
• Yeoman
• Summary

Chapter 7: GETTING STARTED WITH Angular2 & TYPESCRIPT

• Introduction
• Features
• Creating New Project
• Creating Components
• Embedding Components
• Using Babel
• Using TypeScript
• Using TypeScript With Angular
• Configuring TypeScript in WebStorm
• Configuring File-Watcher
• Creating Angular App
• Visual Studio Code Glimpse
• Summary
• About the author

Preface

Hello and welcome to Getting Started with Angular JS. JavaScript has come a long way since its inception. It is used to be client-side validation language than full featured web framework. jQuery has done many changes on the top of JavaScript in order to stabilize the cross browser issues especially. However, jQuery has been written with a different intention. It has been crafted for DOM manipulation. However, jQuery was unable to provide key concepts such as modularity, testability, reusability and other basic stuffs which developers need on day-to-day basis. Each jQuery project looks very different from each other, as there has not been any mandate to stick to the conventions.

AngularJS fills this gap very nicely by providing a wrapper around jQuery on the top of DOM especially in the areas of writing boilerplate code and making application more maintainable, reusable and testable. AngularJS been written by keeping testing in mind. Hence, it ensures that each and every piece of AngularJS is testable. AngularJS fits in all the scenarios where in basic stuffs such as Data-Driven programming, Declarative programming, and Modular programming is required. AngularJS is evolving rapidly. Their development team and community are adding tons of useful features to this library to make the same more robust and useful.

Who This Book Is For

This book is for anyone who wants to get started with AngularJS development. However, I do expect from readers that they should have basic knowledge of JavaScript before getting started with AngularJS. This book will be starting from Angular introduction to advanced topics such as directives, services, testing and many more things. Hence, sit back, take a deep breathe, relax and then start systematically. Skipping any Chapter in between is not advisable for beginners.

From the Manager's Desk

Today, no web developer worth his salt can afford to ignore learning concepts and tools required to develop SPA applications. There is a need today more than ever before to develop applications faster, modular, so large distributed teams with diverse skill sets can work in parallel to create an application that can provide the best of user experience and yet be performant, maintainable, extendable and testable. AngularJS is the framework to go for achieving all the above goals.

This book is an excellent resource for anyone beginning to learn Angular. Rahul has been extremely diligent in coming up with examples that are real world like and yet do not take away the reader's attention from Angular concepts he is trying to explain. The concepts are first clearly explained followed by code for building a moderately complex application. Each area of Angular is thoroughly dealt with including the tools in Angular eco system such as WebStorm, Visual Studio Code, Karma, and Yeoman. Overall, it is an enjoyable and informative read.

SITA, T
Senior Manager
Dell

Foreword

AngularJS has come a long way since its inception in 2009. Its initial success was spectacular when it helped to reduce 17,000 lines of code to 1,500 lines of code at Google in the Google Feedback project. Hevery, a developer in the Google Feedback project, could rewrite the code that was written over 6 months in flat 3 weeks using the AngularJS framework. Moreover, the product that was built in 3 weeks was also of a better quality in terms of ease of testing. This initial success of this platform made many Googlers support continuous development of this open source framework.

This book has done an excellent job in introducing this platform to software developers. Rahul Sahay, the author has built an example web application, which has helped to reinforce the concepts of the project through practical implementation. The book will serve as a good tutorial and a good reference for all the developers who want to leverage the enormous capability of the AngularJS framework. With Single Page Applications and other associated frameworks such as Node.js getting popular and popular, this book is being released at an apt time. Enjoy the technical feast!

Piram (Senior Dell)
Manickam (Architect)

How this book is structured

Chapter 1, Getting Started

Starts by explaining what is Angular, why it is needed? How it fits in web application. You will also learn the overview of AngularJS, then you will understand how to build Single Page App.

Chapter 2, Controllers & Markups

In this Chapter, you will learn scope and controller, which is the nerve of any ng app. Then, writing your first controller. Here, you will be using different ng pieces to display the info on the page via controller. You will also see directives, filters, and expressions in action. Then, in the end, you will be able to do client side validation for the page.

Chapter 3, Services

Services are very important ingredient in Angular application. You will begin this section, by learning what are services, how do you create them and then how to register the same with Angular app. After that, you will be using some built-in Angular services and writing custom services for specific scenarios. Here, I have also introduced AngularJS Graph to visualize the app in console.

Chapter 4, Routing

Routing is the place, where you actually convert your Angular app into Single Page App. You will learn how to configure the routes. Then, you will also learn how to configure Parameterized routes. Last but not the least you will be using location service with routes.

Chapter 5, Creating Custom Directives

In this section, you will learn how to get started with custom directives design. Why do you need them in any Angular app? How it enhances the reusability and maintainability of the code? You will also learn how to encapsulate elements. Then, you will learn how to isolate the scope from the parent scope and many things that are more relevant which is required on day-to-day basis for any Angular app.

Chapter 6, Testing Angular

In this section, you will learn how to get started with Angular Testing. First, you will learn how to setup the dev environment to launch the Karma Test runner. Then, you begin this section by writing simple controller tests. Afterwards, you will be learning how to write different kinds of tests and in the end, there will be a bonus section, wherein you will learn how to inspect and troubleshoot your Angular app.

Chapter 7, Getting Started With Angular 2 & TypeScript

This is the last Chapter of the book where you will get the feel of upcoming Angular 2.0 version. Here, you will get started with new Angular features. Then, we will see how to get started with Angular 2.0 with simple demos using Typescript, ES6 and ES5 as well. After understanding TypeScript basics, we will build one small Movie-Review version with TypeScript & Angular.

Acknowledgements

Again, this book would not have been possible without the loving support of my wife Nivi, who had to take over much of the household responsibility apart from her teaching activities. Appreciation also goes out to my Mom and Dad for believing in me and always keeps on encouraging me to complete the book in the best possible way. Moreover, I would also like to thank Sita and Piram for sharing their views on the book. In addition, I would also like to thank Arun and Mayank for doing the technical review and suggested few changes around it.

In the end, you know how it is, you pick a book and flip to Acknowledgement’s page and find that author has once again dedicated the book someone close to him, not to you. Not this time. I would like to thank all the readers whole-heartedly for choosing the book. Finally, I would like to thank readers of my blog (http://myview.rahulnivi.net). Many of you have contributed by asking questions, providing feedback, and inspiring and encouraging me in everything, I do.

Chapter 1: Getting Started

WHAT DO you find in this Chapter?

• Introduction
• MVC (Model-View-Controller)
• Angular Architecture
• Angular JS Advantages
• Comparison with JQuery
• Modules
• Pre-requisites
• Angular Movie App Overview
• Angular Skeleton Project
• Download Code
• Summary

Introduction

Hello and welcome to AngularJS world. In this section, we will get started with AngularJS. As per google, Angular JS is a superheroic JavaScript framework. They say this because AngularJS does so much heavy lifting for us, which we need in any web app on day-to-day basis. It provides a consistent scalable architecture that makes it easy to develop large web application out of the box. The best part of AngularJS is, everything done in the AngularJS library itself. Hence, it does not mandate to learn any other programming language. However, AngularJS is derived from certain basic programming standards that is MVC or MVVM, which we will be discussing next.

MVC (model-view-controller)

The core concept behind AngularJS is MVC Architectural Pattern. MVC stands for Model-View-Controller. MVVM (Model-View-ViewModel) also similar to MVC is just a design pattern to separate the units of responsibility in different containers. This kind of design pattern gives developers a sense of architectural thinking that how they want to separate the different layers of their web application. MVC design pattern splits the app into three distinct pieces. They are:

• Model: Model is nothing but data repository for the application usually fetched from the server and served on the web page via controller. Hence, any web application that is not static, which is getting data is coming via model only.
  
  
• View: View is nothing but the presentation layer of web application. You can also think view as generated HTML. Views are basically dynamic in nature as it entirely depends on the data being fetched from the server and how it is finally presented.
  
  
• Controller: Controller is the central processing unit of any app that is based on MVC design pattern. Once user requests the page, that is getting intercepted by controller and then controller decides where to pick the data from and finally pick which template.

As a result, each unit is responsible for one and only thing. Model means data, View means UI and controller is the business logic. Moreover, each unit is independent of each other, which makes Angular more robust, unique and easy to maintain.

Angular Architecture

In this section, we will learn more about AngularJS architecture. However, before discussing Angular architecture, let us discuss conventional web application architecture in brief. As you can see in the following diagram, whenever you make a request it is going to server and fetching the entire asset time and again which is very resource intensive, hence puts pressure on the bandwidth, on the server and end result shows the site response time as slow.



However, in case of Angular, it loads all the assets and required components in the first load only. Then, whenever next request comes for any different link on the page, it only replaces JSON there. This way, Angular makes any app lightweight and fit for any device.



One more point to note here that modern day apps needs that universal architecture support which means you write once and use everywhere as in the following:



AngularJS advantages

In this section, we are going to discuss AngularJS benefits. However, from the previous section, you might have got the glimpse of benefits of Angular.

• AngularJS is SPA (Single-Page-Application) framework with client side templating and heavy usage of JavaScript throughout the app. As I said initially, AngularJS does all the heavy lifting required to make a web app up and running, so that we can focus on core functionality.
  
  
• Since, there are many things already built in AngularJS framework, hence it needs only proper API implementation to get the functionality running rather than using jQuery.
  
  
• As I said, Angular is built on the top of MVC design pattern. Hence, it helps keep your code modular, maintainable, reusable and testable.
  
  
• AngularJS declarative nature gives a snapshot to developer by just looking at the code that what would have been the intention behind writing this code.
  
  
• AngularJS supports many third party libraries, which people need as to style the app, notify the users and many other use cases that people need on day-to-day basis.

Comparison with jQuery

In this section, we will do a brief comparison between jQuery and AngularJS. I have mentioned detailed side-by-side comparison between the two in the following table:

Features	jQuery	AngularJS
Abstract The DOM	Y	Y
Animation Support	Y	Y
AJAX/JSONP	Y	Y
Cross Module Communication	Y	Y
Deferred Promises	Y	Y
Form Validation	N	Y
Integration Test Runner	N	Y
Unit Test Runner	Y	Y
Localization	N	Y
MVC Pattern	N	Y
Template	N	Y
Two-way Binding	N	Y
One-way Binding	N	Y
Dependency Injection	N	Y
RoutingRestful	N	Y

However, JQLite is already built-in Angular. Hence, you do not need to explicitly use jQuery for any DOM manipulation. You can use jQuery stuffs by calling like Angular.element().

Modules

Modules in AngularJS are one of the key reasons for keeping application modular. The following is the simple diagram of modules briefly.



As you can see in the above screen shot, modules let you create all underlying pieces. All these pieces we will understand one by one in coming Chapter. One more point to understand is that an Angular application can have as many modules as required and all of these are dependent on each other like the following screenshot:



Hence, if your app module is dependent on some other module, then that dependent module can be injected before executing the actual app module. We will see all these things in detail in coming Chapters.

Pre-Requisites

As far as pre-requisites are concerned, there are actually no pre-requisites except basic knowledge of JavaScript. However, few things that I would like to tell here; I am means which I have used while writing the app.

Editor

My choice for writing JavaScript app is WebStorm. You can get the same from here. This is the best JavaScript editor, I have used so far. However, there is no such mandate to use the same. You can use any of the editors listed below:

• Visual Studio
• Eclipse
• Visual Studio Code
• Brackets
• Sublime and many more

Angular movie app review

I always like talking about the application, which you will be building here, with app snapshots, first. The following is the home page of the application.





Now, when you click on any of these movies, it will take you to the corresponding pages as in the following screenshot:







Similarly, you can post new movie like shown below.



You will also learn how to write client side validation like shown below.



Moreover, when everything goes well, then Post Movie button will enable as in the following screenshot:



As you can see that, once image URL pasted there, it produced the relevant image. This is called data binding, which you will learn in coming Chapters. Then, when you click Edit profile, it will produce the following screen.



Here, you will learn the power dynamic data binding on the fly using AngularJS. Like, when I type my email id in email address box, it will fetch my image as in the following screenshot:



Similarly, when you click on the last link, then this will produce the following page.



Hence, let us suppose if we enter values as in the following screenshot, respective cache size value is also changing.



Then, you can retrieve the same by providing key as in the following screenshot:



Similarly, you can delete the same based on key or flush entire set. We will discuss all these terminologies in coming Chapter. We will go through complete list of directives we generally use on day-to-day basis. However, one directive that I used recently in one demo wanted to show here. This directive is used for embedding YouTube videos in your Angular application, Angular way. The following is the glimpse for the same.



I have also explained normal authentication service by enabling user to do registration on the site and then login accordingly as in the following screenshot:











Apart from this, I have also explained how to get started with yeoman scaffolding template generators for Angular and other required dependency. You will learn the same in coming Chapters. However, the following is a short glimpse for the same.







After doing improvisation on the generated code, app will look like the following:









I have also discussed Angular2 features in the last Chapter. Then how to start with TypeScript and write the Angular app using that. The following is the glimpse of the same.







The following is the corresponding JavaScript generated code.



This also produced me the required output at the bottom of the screen in JSON format.



Then, how to get started with TypeScript with simple TypeScript workflow discussion.



I hope you have enjoyed the app glimpse. Hence, without wasting time let us get started.

Angular skeleton project

In order to get started with AngularJS, you can download the skeleton project from here, if you want to code along with me in the same flow. However, it is not necessary to follow this convention. You can surely apply the Angular techniques in any Angular project that you want.

Download Code

You can also download the full finished version from here.

Summary

In this Chapter, we have started with AngularJS overview. We started with basic understanding of Angular then we also had a glimpse of MVC structure on which Angular is laid upon. Then, we discussed Angular architecture in detail by comparing the same with conventional web-app architecture. We have also done concise comparison with jQuery, in order to understand how AngularJS fits in modern day web architecture. Then, we summarized this Chapter by giving brief overview of the application, which you will be building along.

Buy Here: http://bit.ly/ng-kindle
PaperBack: http://bit.ly/ng-paperback