Pankaj Anupam – Techkiz

To start with AngularJS what should you already know

To start with AngularJS you should have a basic understanding of JavaScript, HTML and CSS. As you are going to develop web applications it will be great if you have understanding of other web technologies like Ajax, jQlite etc.

Lets know the basic of AngularJS and create a Hello World App

This is a basic example. In this we will initialize the AngularJS app which takes user input and shows the message on real time. For this we need to follow below steps :-

1) Loading Framework

First we need AngularJS library. As AngularJS is a pure javascript framework, we can embed it using script tag. We can either use a CDN or download it from angularjs.org. Here I am using CDN link.

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

2) Bootstrap the AngularJS app using ng-app directive

Now it’s time to bootstrap AngularJS app. We can auto-bootstrap an AngularJS application using ng-app directive. It’s root element of the application and is typically placed near the root element of the page e.g. on the <body> or <html> tags.

<html ng-app="myFirstApp"> ... </html>

Note: Only one AngularJS application can be auto-bootstrapped per HTML document. You must manually bootstrap multiple app in a HTML document using angular.bootstrap . Check out ng-app Reference

3) Get user input using ng-model directive

We will create a input field to get user name. To bind input field value into the model we use ng-model directive.

<input type="text" ng-model="yourName" placeholder="Enter a name here">

The ngModel directive creates two way binding between a form control and a property on the scope. ngModel provides validation behavior, state of the control, and more. Check out ng-model Reference

4) Show user name using AngularJS expressions

In AngularJS we can print a property value using expression. AngularJS resolve the expression and replace property value in place of expression. Angular expressions can be written inside double braces: {{ expression }}. We can also print value using ng-bind directive.

<h1>Hello {{yourName}}!</h1>

Now we are done. Check out the Code Ground

See in Action

Enter the user name in input filed and see how things work.

Source Code

The final code we build in above example.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Author: Pankaj Anupam

create a todo app angularjs

how to start with angularjs