While we embrace the culture of learning and sharing within the organization, I was eager to spread it on a larger forefront with help of communities and informal gatherings. It always feels good to connect with like minded people, exchange your ideas and collaboratively grow as a community.
Meet Up on Introduction to AngularJS was born out of such idea. This Meet Up is an initiative to help all tech enthusiasts in the town to get hands on the top notch technologies and grow in the rapidly evolving world of mobility. Let me share few important discussions and take aways here.
The Agenda of the Meet Up was
Introduction of AngularJS
Why it is important in glut of all other technologies
Who should use AngularJS
What are the benefits
What is AngularJS? AngularJS is built around the belief that declarative programming should be used for building user interfaces and wiring software components, while imperative programming is excellent for expressing business logic.
Below mentioned are the few highlights of AngularJS
HTML enhanced for web apps.
MVW Architecture(Model View Whatever)
Framework supporting Web Components and MDV(Model Driven Views)
The framework adapts and extends traditional HTML to better serve dynamic content through two-way data-binding that allows the automatic synchronization of models and views. As a result, AngularJS de-emphasizes DOM manipulation and improves testability & performance.
Angular follows the MVW pattern of software engineering and encourages loose coupling between presentation, data, and logic components. Using dependency injection, Angular brings traditional server-side services, such as view-dependent controllers, to client-side web applications. Consequently, much of the burden on the backend is reduced, leading to much lighter web applications.
MVW Architecture (Model View Whatever)
A basic concept of MVW is that all definitions are associated with a named Module. Modules can then be aggregated to form complete web applications. Modules can depend on one another, so that including a single Module in your Web Application may bring along additional functionality on which that Module depends.
I hope the kick off is good enough to arouse the interest about history behind AngularJS!
AngularJS was originally developed in 2009 by Miško Hevery and Adam Abrons at Brat Tech LLC as the software behind an online JSON storage service.
Their software has been priced by the megabyte, for easy-to-make applications for the enterprise. This venture was located at the web domain “GetAngular.com”.
Before the two decided to abandon the business idea and release Angular as an open-source library, Abrons left the project, but Hevery, who works at Google, continues to develop and maintain the library with fellow Google employees Igor Minár and Volta Jína.
What should be the design goals of AngularJS? Decouple DOM manipulation from application logic. This improves the test-ability of the code.
Application testing holds equal importance as to application writing. Testing difficulty is dramatically affected by the way the code is structured.
Decouple the client side of an application from the server side. This allows development work to progress in parallel, and allows for reuse of both sides.
Guide developers through the entire journey of building an application: from designing the UI, to writing the business logic and testing.
Features of Angular JS
Data Binding Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. This is awesome because it eliminates DOM manipulation from the list of things you have to worry about.
Controller Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks or watching model changes.
Deep Linking A deep link reflects where the user is in the app, this is useful so users can bookmark and email links to locations within apps. Round trip apps get this automatically, but AJAX apps by their nature do not. AngularJS combines the benefits of deep link with desktop app-like behavior.
Server Communication AngularJS provides built-in services on top of XHR as well as various other back-ends using third party libraries. Promises further simplify your code by handling asynchronous return of data.
Directives Directives is a unique and powerful feature available only in Angular. Directives lets you invent new HTML syntax, specific to your application.
Reusable Components We use directives to create reusable components. A component allows you to hide complex DOM structure, CSS, and behavior. This lets you focus either on what the application does or how the application looks separately.
Localization An important part of serious apps is localization. Angular’s locale aware filters and stemming directives give you building blocks to make your application available in all locales.
Embeddable AngularJS works great with other technologies. Add as much as or as little of Angular JS to an existing page as you like. Many other frameworks require full commitment. This page has multiple AngularS applications embedded in it. Because AngularJS has no global state multiple apps can run on a single page without the use of iframes, we encourage you to view-source and look around.
Injectable The dependency injection in AngularJS allows you to declaratively describe how your application is wired. This means that your application needs no primary method which is usually an unmanageable mess. Dependency injection is also a core to AngularJS. This means that any component which does not fit your needs can easily be replaced.
Testable AngularJS was designed from ground up to be testable. It encourages behavior-view separation, comes pre-bundled with mocks, and takes full advantage of dependency injection. It also comes with end-to-end scenario runner which eliminates test flakiness by understanding the inner workings of AngularJS.
Now let’s jump on to understand: Why AngularJS?
Proper MVW Angular implements MVC by asking you to divide your app into components and then Angular manages rest for you along with server as the pipeline that connects them. As compared to other frameworks which ask you to divide app into components and at same time requires you to write code to string them up together again. As Angular acts as the mediator, developers also won’t feel tempted to write shortcuts between components that break abstractions just to make them fit easier.
AngularJS bounds all the properties of data model to the associated view, and quietly watches the change to these properties and updates the view automatically when it sense any change in the property. All the data in scope are feed by controllers according to business logic need.
Directives & Reusable components Directives are the features provided by Angular to create Reusable components and bring additional functionality to HTML. Once directive has been created you need to just use it as regular HTML tag and provide appropriate attributes to it, without worrying about DOM manipulation to render them.
Directives are designed to be standalone reusable elements separate from your app. In fact, if a particular element becomes adopted by the HTML5 standard, it should be as simple as removing your custom directive, and your app should behave exactly the same without needing to change your app.
Filters providing flexibility Filters are standalone functions separate from the application like directives but the main functionality of filters is transformation of data from one format to other format. There are various types of filters that allow you to perform simple task like formatting-decimal place, formatting dates, sorting array, reversing the order of array, etc.
Filter just filters the data using the transformation function before it is rendered in view.
Cross Browser Support Basically when it comes to cross browser support, main problem comes with IE. While AngularJS works well with all the browsers, there are some criteria and steps listed by AngularJS to take into consideration for IE.
We don’t have to write own MVC Pipeline
Data models are simple
Data binding means you don’t have to worry about the DOM manipulation.
Directives are separate from main application, which allows parallel development and gets integrated with minimal issues and code
Filters allow you to transform data from one format to another without changing anything in controller and using it directly in view.
In Place DOM Manipulation In general terms view manipulates the DOM to present the data and to add behavior. All the DOM manipulation in AngularJS occurs in directives rather than in view. AngularJS interprets view as a separate HTML page with placeholders for data, this makes the UI designers to work well in application.
As DOM manipulation is taken care by AngularJS, UI Designer can focus on view without worrying about DOM manipulation logic to be written at backend.
It becomes great fun in developing web application by making app purely about presenting data into views, and not having to worry about DOM manipulation.
In Place Service Providers (SP) Service Provider is the functionality provided by AngularJS which does not get involved in main Web App, it just provides an API to expose the functionality you need to expose to main Web App. Primary use of SP is to
Create resource sharing service which allows data sharing between multiple controllers.
To expose functions that interact with Server to push and pull the data and provide offline data.
Primary task of Controller in AngularJS is to focus on View and Scope to which it is assigned. Controllers in AngularJS is a simple POJO functional that manipulates the scope, perform validation, pre fill form using data from server. Hence controller uses the SP to get the data without worrying about backend logic or stuff involved.
This is the Services that help AngularJS to make controller light weight and perform all the heavy Data manipulation in Services.
Good Unit Testing Support The whole of AngularJS is linked together by Dependency Injection (DI). It’s what it uses to manage your controllers and scopes. Because all your controllers depend on DI to pass its information, AngularJS’s unit tests are able to usurp DI to perform unit testing by injecting mock data into your controller and measuring the output and behavior. In fact, AngularJS already has a mock HTTP provider to inject fake server responses into controllers.
This beats the more traditional way of testing web apps by creating individual test pages that invoke one component and then interacting with it to see if it works.
Supports better routing When you want to develop a web app using JS and HTML, the main problem lies in processing URLs and passing parameters to URLs like we pass to any backend in form of POST data or Query Params. AngularJS solves this problem by providing good support for Deep Linking of routes (URL) to Controllers and View. This will make task of developers very easy to get Query params in Controller. It provides support for routes similar to that provided in RoR, but in slight different manner by binding URL to View and controller.
Post your questions or doubts as blog comments below. I would love to help initiate an engaging conversation. Participate in our next meet up on “Building Directives” on 31st October and keep watching this space for its informative blog post.
Being a chief technology officer, most of my time goes into R&D of progressive technologies. Learning and experimenting on new technologies is my passion. And I live my passion by working on challenging and disruptive projects and products. Apart from being a geek, I love spending quality time with family and pets.