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

Object Oriented Programming (OOP)

Object Object is an entity that has state and behavior Class Collection of objects is known as class. There are four main types of OOP concepts Inheritance Object acquire all the properties and behavior of parent object Improve code re-usability Polymorphism One task is performed by different ways Use method overload and override Abstraction Hiding internal details and showing functionality Use abstract class and interfaces Encapsulation Binding code and data into a single unit
Post a Comment
Read more

Maven

Maven is a software project management and comprehension tool, based on the concept of project object model. Maven Usages Build the code in the development environment (compile the source code, run the test cases and packaging the project) Project management tool Generate reports Dependency management Installation Steps You can install Maven by following below steps .  Manual Installation Download Maven binary file Create some environment variables M2_HOME = environment point to maven directory PATH = append Maven path until bin to path variable Using Ubuntu Terminal sudo apt-get install maven To check Maven is successfully installed, issue the following command mvn --version To create a Maven project using Terminal use following steps mkdir myApp cd myApp/ mvn archetype:generate : choose archetype for the project  groupId: org.amali.myProject (like package name) artifactId: MavenTestApp (like class name) The...
Post a Comment
Read more

Model-View-Controller (MVC)

MVC(Model-View-Controller) is a software design pattern.It divided your applications into three components Model: Contain business rules and application Data View: Presentation layer (user interface) Controller: Handles the communication between view and model  Objectives of MVC Promote code usability Implement separation of concerns  Separate user interface and software logic Web Frameworks That Use MVC There are several web frameworks that use MVC design pattern.  Ruby On Rails (Ruby) Angular (JS) Django (Python) Express (JS) Flask (Python) Codeigniter (PHP) Simple UseCase for MVC In this use case scenario, Browser sends information that needs to create Employee Object, and Controller save that information in Model and Update the Employee View. Following Image shows the class diagram for above Scenario. Implementation:  https://github.com/kaosadi17/MVC
Post a Comment
Read more