Angularjs tutorials for beginners

Posted on Posted in Angularjs

What is Angularjs?

Angularjs is one of the most wanted framework, most loved framework these days… Angular js is a front end  single app web framework. It allow you to extends your exiting HTML tags and let you use HTML as your template language.

Angularjs is a MV* that is ideal for use while build single page web apps. It’s not a library, but a framework for building dynamic web pages. It focus on extending HTML and providing dynamic data binding. Gmail, Google docs etc are all fit into the Angularjs sweet spot.

Let’s start with our first app

We will start with angularjs 1st version to get the basic idea.

  1. Very first we need angularjs (file), as dependency so that when we run the app, page boots it tells that page is using angular application and execute the respective.
  2. write a basic example like mentioned below, save it and run.
  3. <!DOCTYPE html>
    <html ng-app>
    	<title>First Angular example</title>
    		<script src=''></script>
    		<div class='container'>
    			<input type='text' ng-model='yourName' placeholder='Enter your name here'>
    			<h3>Welcome, {{ yourName }}!</h3>

    Now this will show you the two-way binding, yes bi-directional binding means if you change something from back-end your changes reflects at view part/front-end automatically. Similarly if you change something from front-end it will reflects at back-end too.

  4. So what we have in our first app
    • ng-app :- defines our app
    • ng-model = “yourName” :-we set up bi-directional data binding on “yourName” model on the page.
    • {{ yourName }} :- display data, user entered value using expressions in view part.

So this is very first, hope this help to boost basic with Angularjs… next will coming soon.