Need basic understanding of:

• HTML

• CSS

• JavaScript

What is angular JS?

• It is a JavaScript framework.

• Can be added to an HTML page with a <script> tag.

• An MVW Framework (Model-View-Whatever)

• Can call it as a MVC or MVVM.

• Starts automatically when the web page has loaded.

Development History

• AngularJS was originally developed in 2009 by Misko Hevery at Brat Tech LLC as the software behind an online JSON storage service

• Then he release it as an Open-Source library

• There are two major releases: Anguar JS 1 & Angular JS 2

Browser Support

• Versions 1.2 and later of AngularJS do not support Internet Explorer versions 6 or 7

• Versions 1.3 and later of AngularJS dropped support for Internet Explorer 8

• It is a complete JavaScript-based open-source client and server-side web application framework 

Deep into it

• Maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications 

• The AngularJS framework works by first reading the HTML page, which has embedded into it additional custom tag attributes.

•  Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables.

• The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

• According to JavaScript analytics service Libscore, AngularJS is used on the websites of Wolfram Alpha, NBC, Walgreens, Intel, Sprint, ABC News, and approximately 8,400 other sites out of 1 million tested in July 2015.

• AngularJS is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js runtime environment.

• MEAN is a free and open-source JavaScript software stack for building dynamic web sites and web applications.

<div ng-app="myApp" ng-controller="myCtrl">
 

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>
 

Full Name: {{firstName + " " + lastName}}

<script>

</div>

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

app.controller('myCtrl', function($scope)

{

  $scope.firstName = "John";

  $scope.lastName = "Doe";

});

</script>

Model,View,Controller

Angular extends HTML attributes with Directives and binds data to HTML page with expressions.

Directives

• Extended HTML attributes with the prefix ng-

• Some of the directives are

The ng-app directive initializes an AngularJS application.

The ng-init directive initializes application data.

Angular Expressions

• AngularJS expressions can be written inside double braces: {{ expression }}

<div ng-app="">

<p>My first expression: {{ 5 + 5 }}</p>

</div>

• Example

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_expression

Two-way Binding

• Data binding in AngularJS is the synchronization between the model and the view.

• When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.

• This happens immediately and automatically, which makes sure that the model and the view is updated at all times.

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_databinding_two-way

• Example

Thank You