July 26, 2020 /   AngularJS   directive   views   controller   service   $scope

AngularJS Cookbook

AngularJS as a MV* framework

A MV* framework can be categorized into different design patterns like –

AngularJS Architecture

AngularJs Architecture

AngularJS Module

Module in AngularJS is like a container. It can contain different parts of your application like – Controllers, Services, Filters, and Directives etc. You can have one or more than one module depending on how complex your application is. There are a couple of advantages of using Modules in AngularJS –

Create a module named myModule1 that depends on myModule2 and myModule2:

 angular.module("myModule1",["myModule2", "myModule2"]) 

 

Configuration – needed to inject the constants and providers into configuration blocks. Config block is executed as soon as the module loads. The routing configuration is done in the configuration. It can also be used to configure modules and add HTTP interceptors.

Routing – When you design a large application, you cannot build the entire application using a single controller or a single view. You will need multiple controllers and multiple views. In such situations, you will have to do a navigation between different views using routing.

Unqork form builder uses ui-router

Controller – Controllers contains the logic and share state. Controllers are in-charge of your application and build the models for the views and directives. You can create multiple controllers for your application. Controller also provide commands for the view to act upon using number of events.

 
angular.module("myModule").controller("SampleController", function($scope,){
    //Members to be used on view for binding
    $scope.city="Hyderabad";
});

 

Views – View is nothing but the information you want to render to the end users browser. A view is also called as AngularJS compiled DOM.

 

<div ng-controller=""SampleController"">

<!-- Template of the view with binding expressions using members of $scope -->    

<div>{{city}}</div>

</div>

 

Directives - Directives are extensions to HTML. They extend HTML instead of manipulating HTML. AngularJS provides a number of directives out-of-box. For example - ng-app, ng-controller, ng-view, ng-repeat etc. You can also build your own custom directives.

$Scope – A $scope is the glue between a Controller and a View. The controller generates the Model on $scope. It acts as a ViewModel for the view

Services – Services play a vital role in AngularJS. It is a component in AngularJS to perform a specific job like –

 
angular.module("myModule").service("sampleService", function(){
    var svc = this;
    var cities=["New Delhi", "Mumbai", "Kolkata", "Chennai"];
    svc.addCity = function(city){
        cities.push(city);
    };
    svc.getCities = function(){
        return cities;
    }
});
 

 

Two-Way Binding - AngularJS provides two-way data binding out-of-the-box. When model changes, the view reflects the changes without waiting for any specific event to be fired. Also, when view updates the model, the model gets updated automatically.

            @        Text

            =          Two Way

            &         Functions

Dependency Injection:

AngularJS has a built-in dependency injector that keeps track of all components (services, values, etc.) and returns instances of needed components using dependency injection. Angular’s dependency injector works based on names of the components.

 
myModule.controller("MyController", ["$scope", "$window", "myService", 
    function($scope, $window, myService){
}]);
 

 

Create and register our own Services – using Factory, Service, and Provider. They are all used for the same purpose. Here’s the syntax for all three ways:

Service: module.service( 'serviceName', function );

Factory: module.factory( 'factoryName', function );

Provider: module.provider( 'providerName', function );

The basic difference between a service and a factory is that service uses the constructor function instead of returning a factory function. This is similar to using the new operator. So you add properties to ‘this’ and the service returns ‘this’.

With Factories, you create an object, add properties to it and then return the same object. This is the most common way of creating Services.

If you want to create module-wide configurable services which can be configured before being injected inside other components, use Provider. The provider uses the $get function to expose its behavior and is made available via dependency injection.

Providers are the only service you can pass into your .config() function. Use a provider when you want to provide module-wide configuration for your service object before making it available.

AngularJS Cheat Sheet for Beginners

  1. Important AngularJS Components and their usage:
  1. Most used built-in directives: