Introduction to Angular 101

AngularJS is a modern JavaScript framework from Google commonly used to work with Single Page Applications (SPAs). AngularJS is open sourced under MIT license, and the development progress of AngularJS can be followed on its GitHub repository.

What is Angular?

Angular is a JavaScript framework – a higher-level abstraction of JavaScript functions designed to make writing JavaScript simpler and easier. It’s also its own development pattern, and can change the way you shape and build your applications. While Angular has many abstractions to lower level JavaScript methods, it does not have the sheer number of functions that jQuery does, so you will frequently see them side by side, jQuery within Angular. Instead of being a multipurpose collection of lower-level JavaScript functions, Angular provides a new way of organizing and running your JavaScript by allowing your HTML to be dynamic and react to data.

Comparing the workflow environments of vanilla JavaScript (JavaScript with no framework) or a jQuery environment to that of Angular could be described as the difference between carrying water with a bucket or building an irrigation system. Using vanilla JavaScript or jQuery, data and states are carried through from databases or user inputs to be represented by the view. The view is then modified directly with specific, action-based thinking.

Angular, by contrast, functions more like building channels by which your data can flow to the view, and the view reacts to the data that it is given instead of needing to be influenced by direct command-based lines of code. So thinking about the root components of Angular can be more easily related to plumbing.

  • Services are like the initial valves that lead to the water source. They exist primarily to feed data into the pipeline.
  • Controllers are like the pipes that control the water flow to and from the Services.
  • View Templates are like the faucets, they exist to consume the data and react accordingly.

angular-js-training-in-kolkata.jpg

Why Angular?

There are many choices available to you for application development, so you ask yourself – “Do I use MVC (model-view-controller) or MVVM (model-view-viewmodel)? Server-side or client-side rendering?” Even in JavaScript, there are numerous methods of developing applications available, from vanilla JavaScript (JavaScript with no framework) and jQuery to Knockout and React. So why choose Angular?

Let’s consider a common use case. You have an application with a database. You want to be able to send updates to the database, and search the database for content. If you use vanilla JavaScript or jQuery, you will have to bind events to send the data, bind the outputs to the DOM, and update the DOM every time the data changes.

Angular is essentially a whole new paradigm of JavaScript programming. In the past, DOM updates were performed manually, and data contracts were managed manually. Angular does all of that heavy lifting for you, checking and updating the DOM with each $digest cycle. The $digest cycle is the function to update the DOM that Angular calls whenever the data is updated. This function enables you to construct your application without considering the DOM. For more information, refer to the $digest() section within the documentation for $rootScope.Scope located at, https://docs.angularjs.org/api/ng/type/rootScope.Scope.

Think of Angular as HTML on steroids. With Angular, you can create your HTML with the data components built in. Once you hook the data components up to controllers and services, the DOM adjusts according to the data (without the need for cumbersome manual updates) as the user interacts with your application.

In addition, Angular code is constructed with modules that can be easily injected into each other, so that you can build independently functioning, reusable components. It takes a bit to get used to the Angular way of thinking. If you are a traditional JavaScript programmer, you are used to the workflow of “Get data; change the DOM.” Instead, consider what you want your views to look like, and build them that way, before hooking up the data. It’s a bit different, but in time, many developers have found they prefer this way of working. The Angular workflow separates the data and the views, even though, in essence, Angular completely entwines them.

Angularjs-Overview-SPLessons.png

Angular Modules

In the most simple terms, an Angular module is nothing more than a container for various parts of your app. Since an Angular app does not have a single point of entry like some environments (such as a Main method in a C application), modules provide the means for defining how the application can be started.

Note: Angular uses a Declarative Programming approach to define user interfaces and connect components.

In Angular, the word module refers to either an entire Angular application or independent components within that application, such as controllers, services, filters, and directives. The components of Angular modules provide specific functionality via self-contained sections of code. Through the process called Dependency Injection, modules can share variables between one another without having to reuse code.

Angular modules are organized by function rather than type. This modular concept helps you better understand the context of the different components, enables more direct access to the modules, and provides more streamlined testing of the modules.

Modules provide a number of benefits including:

  • They may be reused in multiple applications
  • They can be loaded in any order (or in parallel)
  • Unit testing need only load the relevant modules, keeping the tests fast
Make-the-Switch-to-Angular-JS-App-Developer-Magazine_nkcqjdmt.jpg
Make the switch!

Creating Angular Modules

This is an example of defining a module in Angular.

var myApp = angular.module("myApp", []);

In this example, the module is assigned to the variable myApp on the left side of the assignment statement. The right side of the assignment is where the module is created, and in this example, is assigned the name "myApp". The empty array [] is where we can inject other modules as necessary. To bootstrap the module, you can use the HTML attribute ng-app='myApp' to bootstrap your app, or you can use the angular.bootstrap('myApp') syntax. You specify the variable name when you bootstrap a module.

Note: “Bootstrap” is just a fancy way of saying “configure and start.”

To add controllers or other components to the module, reference the variable that you had defined for the module (var myApp in this instance), and then add additional method calls, like so:

var myApp = angular.module("myApp", []);
myApp.controller("myController", [function() {}]);

Sometimes in applications, you will see a different following syntax:

var myApp = angular.module("myApp", [])
.controller("myController", [function() {}]);

This syntax is also valid and is often more succinct as you are defining the module rather than chaining that together with the definition of the controller.

Dependency Injection

Dependency Injection (DI) is a software design pattern that manages how components in a system obtain their dependencies. In Angular, Dependency Injection is responsible for:

  • Creating components
  • Maintaining a component’s state
  • Providing components to other components, as required

In Angular, DI allows us to share variables and functions between self-contained modules without having to reuse code, and maintains the state of each component.

DI employs the injector, the service object(s) to be used, the client object that is depending on the services it uses, and the interfaces.

Note: The Angular injector is used for retrieving services as well as creating the necessary objects for us.

The injector introduces the services to the client. Often, it also constructs the client. An injector may connect together a very complex object graph by treating an object like a client, and later, as a service for another client. The injector may actually be many objects working together, but may not be the client.

4.png

When Angular compiles the HTML, it processes the ng-controller directive, which, in turn, asks the injector to create an instance of the controller and its dependencies. The application code simply declares the dependencies it needs without having to deal with the injector. Angular invokes certain functions, such as service factories and controllers, via the injector. You annotate these functions so that the injector knows what services to inject into the function.

These functions are injectable with dependencies, just like the factory functions. The factory methods are registered with the modules. Components such as services, directives, filters, and animations are defined by an injectable factory method or constructor function. These components can be injected with service and value components as dependencies.

DI allows a client the flexibility of being configurable. Only the client’s behavior is fixed. The client may act on anything that supports the intrinsic interface the client expects.

The client only needs to know about the intrinsic interfaces of the services since these define how the client may use the services. This separates the responsibilities of use and construction. The interfaces are the dependency types that the client expects.

You use DI (Dependency Injection) when defining components or when specifying functions to run at configuration and run time for a module by calling the config and run methods. The run method accepts a function, which can be injected with service, value, and constant components as dependencies.

Note that you cannot inject providers into run blocks. The config method accepts a function, which can be injected with provider and constant components as dependencies.

Note that you cannot inject service or value components into configuration.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.