Skip to main content

AngularJS


AngularJS is a JavaScript framework that can be added to HTML page using <script> tag.

AngularJS Usages

  • Client side JavaScript Framework.
  • Extend HTML so you can create more dynamic contents

Declarative vs Imperative 

There are two main programming paradigms used in programming as imperative programming and declarative programming.
  • Declarative: Tells you what to do 
    • You use the declared functions by someone for your needs
  • Imperative: Tells you how to do
    • You develop the functionalities for your needs
AngularJS is both declarative and imperative language. 

Scope

A scope is an object and it stores all the variables and their values.
Each time you create a new controller, Angular automatically create new scope object.

Module

A module is a collection of directives, controllers and other stuff.

  • Create a module
    • var myModule = angular.module("myMod",[]);
    • array contain list of other modules that the defined module depend upon
  • Use the module
    • <html ng-app="myMod">
  • Register the module
    • myMod.controller("myCtrl",main)
      • myCtrl: controller name
      • main: defined function for that controller
  • Use the controller
    • <ng-controller = "myCtrl">

Dependency Injection 

Dependency injection is a software design pattern which enable components to fetch their dependencies instead of hardcoding them inside the component.

Angular Directives

  • ng-app
    • Use to indicate that this is an Angular application
    • Indicate the root of the Angular application (added element is considered as the root element)
  • ng-init
    • Use to write initialization codes
    • But actually, this is not the best way to write initialization codes
  • ng-if
    • Use to check conditions 
  • ng-bind
    • bind the variable values into html elements 
    • one way binding method (data to view)
    • shorthand : {{varaiblename}} = ng-bind="variablename"
  • ng-controller
    • Use to execute functions and initialization code 
  • ng-click
    • Use to execute defined function when defined button click 
  • ng-model
    • Use to fetch the data from the view and update the scope variables
  • ng-hide/ ng-show
    • Use to hide and show some html contents 
  • ng-repeat
    • Use to iterate through loops. 
    • For each iteration, Angular automatically create new scope object
    • Properties : 
      • $index: Return index no of the element
      • $first: Return true if it's the first element
      • $last: Return true if it's the last element

Services 

Services are a reusable component that can use in multiple controllers. 
  • To share the same variable in different controllers
    • ues value service
      • ex : app.value("varName","varValue");
    • Then access in controller function
      • function myctrl(varName){this.variable = varName}
  • To share constant values in different controllers
    • use constant service
      • ex : app.constant("constName","constVal")
  • If you want to get the shared variable value from some complex logic 
    • use factory service
      • app.factory("varName","function")
  • If you want to use constructor functions as variable
    • use service service
      • app.service("varName","constructorFunction")

Promises 

Promises is an alternative way to deal with asynchronous callback functions. Promise represent an operation that hasn't completed yet but is expected in the future.




Comments

Post a Comment