AngularJs Image

Start with AngularJs Program – Learn the Basics

AngularJs is a javascript library framework widely used for Single page application projects. it extends HTML dom with extra attributes which makes its more flexible to user end. It is a opensource library .

For learn AngularJs you should prerequisite with html,Javascript,css, and Ajax technologies . It is similiar like JQuery (another very popular javascript library). But AngularJs Comparatively More faster and optimized to rest of the javascript libraries.

More Interesting thing is that AngularJs is Promoted and Sponcered and developed by Google team. A google Engineer Started this project in 2009 , and google announced AngularJs Project in 2012.
AngularJs Extends the Html Elements with ng-directives. Some Important are following:
a) ng-app : Defines AngularJs Application
b) ng-model : Bind the value of HTML Input Controlls(Input,Select,textarea) to Application data.
c) ng-bind : binds application data to html view.
For running any angularjs program we have to add following script in html <head> section
Adding a Script from google cdn.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Now We are showing you a full Program to print name in a label or any place which we type in a textbox.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
<p>Name: <input type="text" ng-model="cityname"></p>
<p ng-bind="cityname"></p>
</div>

</body>
</html>

 

Explanation for above program:
1.AngularJs Inclusion using script tag.
2.Start ng-app in div
3.create a text input and Define its ng-model as cityname
4. bind the value of ng-model application data with p tag by defining the model name in ng-bind attribute.

Now if you Run this html then it renders a Input box ,As you will type anything then the data will be shown immediately in p tag just below the textbox. for see it in action please copy and paste this program in any blank html file and run it.

Published by

Jeetendra Singh

Jeetendra Singh is a Full Stack Architect who has 12+ Years of Experience into Software Development. He is a Microsoft certified technology Specialist and AWS Certified Associate Architect. His Major Interests are in Mongo Db, Express Js, React Js, Node Js (MERN STACK), Python, DJango, Redis, Mysql, Dynamo DB , Devops, Jenkins, Cloud/Lamda , Fast Api. He build variety of applications using Python, Mern, Mean, Node, JavaScript, jQuery & PHP