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

Popular posts from this blog

Sorting Algorithms

Bubble Sort Named as sinking sort. Compare each pair of the adjacent items and swap them if they are in the wrong order. Worst case and average case time complexity both O(n^2)  and best case time complexity is O(n).
Post a Comment
Read more

JavaScript Objects and Prototypes

Create Objects Using function Create Objects without duplication code: use functions Using constructors To indicate a function is a constructor:  append new keyword in front of the function name when executing it Call Property of function object foo.call() = foo() Call can bind different objects and can execute functions __proto__ Copy of prototype object If some property is not in the object itself, it then looks it in the prototype. If it finds it returns the value of that property All the new object instances of function point to same prototype object prototype.constructor: property that points to function  GitHub repo:  https://github.com/kaosadi17/JavaScript/blob/master/objects%26prototypes.js
Post a Comment
Read more

Introduction to JQuery

JQuery Open source JavaScript library. Cross browser compatibility Include the JQuery code inside this function       $(document).ready(function(){             your code is here             }); Creating CSS element : nothing added (body{}) class name : added fullstop (.clzname{}) id : added slash (#idname{}) JQuery Methods  click(): can include actions when after clicking defined button $("button").click mouseover: can include actions when over the mouse on defined element $(button').mouseover hover : can include tow functions when the mouse is over it and not $("img").hover load : execute when complete page is fully loaded  $("img").load JQuery Actions hide() : hide the defined content $("#right").hide() html() : change the html element with defined content $("p").html("<p>My content<p>") text() :  change the content as define...
Post a Comment
Read more