Angular JS Introduction



Angular JS

Today I'm going to give introduction to world's most popular web framework Angular JS. Actually its complete client side framework. Where it can design UI, client side programming, Connecting with Server with http services. So this is very important JavaScript based framework. And also it is developed by Google. As to date which i'm writing this blog, There is a new version of Angular JS named Angular 2. Its based on TypeScript which a supertype of JavaScript where developed by Microsoft. However, I will focus on angular JS 1.x

Lets get into angular JS.

Angular JS is stick in MVC (Model View Controler) architecture. That is one of reason to becoming it's popularity. So, In angular JS, There are 3 main parts.
Module
Views
Controlers

Module

Just forget about angular Js and think about module In MVC architecture. Its represent an entity, a database. So the concept is data handling. Thats the thing doing in Angular JS too. In html forms like things, there are some values. They might be user entered or can be even auto generated. Module will grab (bind) that data into variables created in Angular JS so that we can manipulate (handle) that values.

we can specify module by this way

var myModule = angular.module('myModule', []);

[] means, this is new module. If we need some dependencies, we will inject into that. In example, To handle angular routing, We need to use angular-route. So to work our module with that, we will inject angular route into our module like below.

var myModule = angular.module('myModule', ['ngRoute']);

to use angular module in our html page, we use ng-app directive like below

<!DOCTYPE html>
<html>
        <head>
             <title>
             </title>
        </head>
        <body ng-app="myModule">
        </body>
</html>

Controller

This will handle business logic part of Angular module. We will inject a variable named $scope to controller to communicate between html page and controller.


I will demonstrate small example to how controller work. This is the application which I going to implement. The things in textbox will automatically show above <h2> tag. With preposition of Welcome.

first of all, we need to create a module.





Then create controller
Now Implement html page to work with above things
So the whole code will look like below





Views

Angular views are used to make SPA (Single Page Applications) using Angular JS. Basic idea of view is there is a div in html page and that div is working as a place holder for another web pages. We can load any web page into that div. That is view. We have given a directive by angular js to define that placeholder div. its ng-view. And also we need to use angular route to manage routes to pages that loads into view.

I'm not going to describe much about angular view because, I think its better to describe angular view in another tutorial with more details.

More than Module, Controller and View, There are many more things in Angular JS like services, Directives etc... I will go detailed about them in a next tutorial.

Meanwhile, You can read this references.

https://www.w3schools.com/angular/default.asp

https://docs.angularjs.org/api


I hope you were got some thing from this tutorial. Thank you for reading this.


Good Bye!!

Comments

Post a Comment

Popular posts from this blog

CSRF Defence - Synchronizer Token Pattern Demo

Image
I have wrote some theoretical background of CSRF and CSRF prevention mechanisms in previous posts. If you don't have much idea about what CSRF and how prevention mechanisms works, please go back and read them first. These are the links for them. Cross Site Request Forgery (CSRF) CSRF Defence - Synchronizer Token Pattern From here onword, I assume you have the basic idea of concept of CSRF attack and prevention mechanisms. So, lets get started. This post is fully practical based one. At them end of this, There will be fully functioning web based application to demonstrate how CSRF attack works and how to prevent it using synchronizer token pattern. So, in order to follow this, you will need to setup your development environment first. These are the technologies I used to develop this demonstration application. Technologies Java 8 Spring Boot Framework Spring Security Maven Bootstrap 4 (Optional, Just for enhance the look and feel) Integrated Development Environmen
Read more

Lets read emails in gmail using oAuth 2.0 (Application demo)

Image
Today I will create a oAuth application using java programming language. The application will access google's gmail api and read emails in user's gmail inbox. To access user's gmail account, application will use oAuth access token obtained by gmail authentication server. Don't worry. I will demonstrate each step by clearly. So lets start computing from basics! To use gmail api, we need to obtain app id and app secret from google api console. To do so, you will need a google account. If you are using a gmail account or any other google product (Ex. google drive, youtube), then you already have a google account. If you don't have a google account, you can create it from here. So then you will need to access into the google cloud api console. It has very clear and clean user interface. Google api console will provide various kinds of apis from each of google products. Since we are going to develop for Gmail, lets log into gmail api section. In google itself there are
Read more

How to view queries executed in MySQL?

Hi all, This is a small post which I would like to share my finding with you. In one of my software project, There was a small peace of software which frequently dealing with database. (I got that clue from MySQL workbench dashboard) I was so curious about that because I wanted to know what does that do and what does it read/write from/to the database.  Finally I found a solution which helps me to find out that ! The solution was MySQL log. First you will have to enable the log. If you are using a version below 5.1.12, you will have to go to configuration level (my.cnf). But fortunately, If you are using MySQL >= 5.1.12 you can do that on the fly with MySQL global variables and does not need to restart the server as well. This is how I did (in MySQL >= 5.1.12), There are two options which can be done. Writing log to a table Writing log to a file. By default, MySQL logging is disabled, because of the performance reasons.  So we have to enable it first.   Writing log to a table Exe
Read more