Tutorial regarding Angular Js. Learn new javascript language in easy steps.

1. ANGULAR JS
Anisha

2. INTRODUCTION
• Angular JS is a JavaScript.
• Added to an HTML page with a <script> tag.
• Extends HTML attributes with Directives.
• Binds data with Expressions.
• Used in Single Page Application (SPA) projects.


3. CORE FEATURES

4. WHY USE ANGULAR JS???
 Data-binding
 Dependency Injection
 MVC Framework
 Two-way data binding
 SPA(Single Page Application)

5. Example of Two Way Data Binding:

6. TWO WAY DATA BINDING

7. DIRECTIVE
Today’s HTML Component

8. ANGULARJS COMPONENTS/ DIRECTIVE
• ng-app − This directive initializes an AngularJS
application.
<div ng-app="">
• ng-model − This directive binds the values of AngularJS
application data to HTML input controls (input, select,
textarea) of our application .
ng-model="name"
• ng-bind − This directive binds the AngularJS
Application data to HTML tags.
ng-bind="name"

9. MODEL
The structure of your Application

10. NG-MODEL DIRECTIVE
 ng-model directive you can bind the value of an
input field to a variable created in AngularJS.
 Example:
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
</div>

11. NG-BIND DIRECTIVE
 ng-bind directive, which will bind the innerHTML of
the element to the specified model property
 Example:
<p ng-bind="firstname"></p>
</div>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="name"></p>
</div>

12. NG-REPEAT DIRECTIVE
 The ng-repeat directive repeats a set of HTML, a given
number of times.
 Syntax:
<element ng-repeat="expression"></element>
 Legal Expression examples:
x in records
(key, value) in myObj
Example:

13. <TR NG-REPEAT="X IN RECORDS">
<TD>{{X.NAME}}</TD>
<TD>{{X.COUNTRY}}</TD>
</TR>
<SCRIPT>
VAR APP = ANGULAR.MODULE("MYAPP", []);
APP.CONTROLLER("MYCTRL", FUNCTION($SCOPE) {
$SCOPE.RECORDS = [
{
"NAME" : "ALFREDS FUTTERKISTE",
"COUNTRY" : "GERMANY"
}, {
"NAME" : "BERGLUNDS SNABBKÖP",
"COUNTRY" : "SWEDEN"
} ]
});
</SCRIPT>

14. <TABLE NG-CONTROLLER="MYCTRL" BORDER="1">
<TR NG-REPEAT="(X, Y) IN MYOBJ">
<TD>{{X}}</TD>
<TD>{{Y}}</TD>
</TR>
</TABLE>
<SCRIPT>
VAR APP = ANGULAR.MODULE("MYAPP", []);
APP.CONTROLLER("MYCTRL", FUNCTION($SCOPE) {
$SCOPE.MYOBJ = {
"NAME" : "ALFREDS FUTTERKISTE",
"COUNTRY" : "GERMANY",
"CITY" : "BERLIN"
}
});
</SCRIPT>

15. EXPRESSIONS
Bind your Data anywhere in the page

16. ANGULARJS EXPRESSIONS
 AngularJS binds data to HTML
using Expressions.
 AngularJS expressions can be written inside
double braces: {{ expression }}.
 AngularJS expressions can also be written
inside a directive: ng-bind="expression".
My first expression: {{ 5 + 5 }}

17. ANGULARJS MODULES
 An AngularJS module defines an application.
 The module is a container for the application
controllers.
 A module is created by using the AngularJS
function angular.module
 Example:
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>

18. CONTROLLERS
Data provider for our view

19. ANGULARJS CONTROLLERS
 AngularJS applications are controlled by controllers. They act as
containers.
 The ng-controller directive defines the application controller.
 Example:
<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>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe"; });
</script>
<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>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe"; });
</script>

20. CONTROLLERS IN EXTERNAL FILES
 In larger applications, it is common to store
controllers in external files.
 Example:
<div ng-app="myApp" ng-
controller="personCtrl">
First Name: <input type="text" ng-
model="firstName"><br>
Last Name: <input type="text" ng-
model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script src="personController.js"></script>
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-
model="firstName"><br>
Last Name: <input type="text" ng-
model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script src="personController.js"></script>

21. PERSONCONTROLLER.JS
 app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " +
$scope.lastName;
};
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " +
$scope.lastName;
};

22. ANGULARJS SCOPE
 The scope is the binding part between the HTML (view)
and the JavaScript (controller).
 Example:
<div ng-app="myApp" ng-
controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>

23. SERVICES
Utility component of our Application

24. ANGULARJS SERVICES
 $http Service
 The service makes a request to the server, and lets your
application handle the response.
 Example:
$http.get("welcome.htm").then(function (resp
onse) {
$scope.myWelcome = response.data;
});
});
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http)
{
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});

25. $TIMEOUT SERVICE
 $timeout Service
o The $timeout service is AngularJS' version of
the window.setTimeout function.
o Example:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,
$timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,
$timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});

26. FILTERS
Change the way your expressions are displayed

27. UPPERCASE FILTER
 Syntax:
{{student.fullName() | uppercase}}
LOWERCASE FILTER
 Syntax:
{{student.fullName() | lowercase}}
ORDERBY FILTER
 Syntax:
<li ng-repeat = "subject in student.subjects |
orderBy:'marks'">

28. DEMO LOGIN FORM

29. PROJECT STRUCTURE

30. SPA WITH CRUD OPERATION

33. THANK YOU