I started my career by working on JavaScript. Eventually I moved on to node.js. Playing around this technology has always been a busy yet pleasant experience.

One time I received a project with UI elements to generate html content. Primarily I chose Jade (a template engine) for simplicity. But it turned out quite incapable in terms of serving data repeatedly over time. While looking for alternatives I developed a familiarity with Angularjs. As I researched more I got to learn about the tremendous potential of this framework. It makes modular integration an easy job. I also got to experience lots of extraordinary features which returned some unique out of the box solutions.

What is Angularjs?

Now when we start working on a new technology the first thing to do is to know what it has to offer. Here’s what I learnt about Angularjs so far –

1. Strong JavaScript framework
2. Built for Client side
3. Supports MVC
4. Offers several out of the box solutions such as:
   • Two Way Data Bindings
   • Dependency Injection
   • Template
   • Ajax
   • Directives
   • Factories and Services
   • Modularization
   • and many more

Can I start with Angular?

Anyone having a basic knowledge of HTML, CSS and JavaScript can start working on it. But if you want to write good code and test it efficiently then you need to keep drinking the angular juice. Only then can you be a good angular developer.

Now lets reflect on some of the key features

Two Way Data Bindings

One of the most exciting features of Angularjs is two-way data binding. In general MVC architecture, we can update the model or dynamically update the data that is stored in the page. Doing the reverse is quite a tedious job. But Angular makes it possible. So when we change any model or data dynamically it automatically changes the view or static data that is visible to the user.

Dependency Injection

Dependency Injection is another cool feature found in Angularjs. If we separate the module functionally, we can also separate our business logic, presentation logic and template/ view. In Angularjs you can actually inject what you want into the controller. For example, we want the presentation logic and data, which is later going to be processed in the template. In this scenario your only requirement is the logic function and data handler function. Just pass the name of the function in the dependency injection and it will be available for processing.

Template

Template is the most powerful feature of Angularjs. We can use a complex arithmetic operation or logical expression in the template. Moreover we can also inject other controller filters or directives. In other ways we can even call the functions that are not directly connected to the controller/ model. This makes it easier to modularize the code.

Ajax

For practical purposes we always use API calls to process the data. Typically a backbone project needs jQuery. Angularjs has a built-in AJAX handler $HTTP. It is quite similar to $.ajax but handles all response with the help of promise method syntax.

Directives

Another most powerful component of Angularjs is directive. For me it is the most useful resource within the framework and helps create reusable components. This is the only available way to communicate with the html element. It can manipulate various kind of functions like controller, filter or other directives to create an actual illusion. It can also handle html operations like form validation, theme customization, animation, CSS, data hiding and many more.

Factories and Services

Factories and Services are the helpers that bind several functionalities in Angularjs. They can be used as a common data store or common functionality. Even though they both serve the same purpose, there is a significant difference. Every time a service is invoked within a controller, it creates a new instance of that service. Factories are more like singleton class. They only have one instance.

Modularization

Modularization makes a developer’s life simpler. It helps create reusable code and components. It also opens the door on your code and components to perform differently under unlike scenarios or new interfaces. To make your code and components reusable you need to separate the logics, dividing your app into several independent components that can be reused throughout your application (and in others as well).

The list doesn’t end here. After reading this I hope you can unleash the features, behavior and full power of Angularjs. If you want to know more or have a genuine query regarding the article, you can ask me below.

Other Resources

• Angularjs
• Documentation of Angularjs