Introduction to AngularJS

Introduction to AngularJS
www.collaborationtech.co.in
Bengaluru INDIA
Presentation By
Ramananda M.S Rao

Content
Content
Overview
AngularJS - MVC Architecture
Angular.js Building Blocks
Directives
Data Binding
Scope
Model
Views
Routing
Filters
Services
Project
About Us

Overview
AngularJS is a JavaScript framework made by Google for building
complex client-side applications.
Angular.js is a MVW (Model-View-Whatever) open-source JavaScript web framework
that facilitates the creation of single-page applications (SPA) and data-driven apps.
 Angular projects have a somewhat different structure than other JavaScript
MVC frameworks, but it can be highly modular and easy to maintain once
you understand the structure.
AngularJS is a JavaScript MVC framework developed by Google that lets
you build well structured, easily testable, and maintainable front-end
applications
AngularJS is an open source web application framework. It was originally
developed in 2009 by Misko Hevery and Adam Abrons.
AngularJS is a structural framework for dynamic web apps. It lets you use
HTML as your template language and lets you extend HTML's syntax to
express your application's components clearly and succinctly.
Angular's data binding and dependency injection eliminate much of the
code you currently have to write. And it all happens within the browser,
making it an ideal partner with any server technology.

Overview
Why AngularJS?
 AngularJS is a MVC framework that defines numerous
concepts to properly organize your web application. Your
application is defined with modules that can depend from
one to the others.
 It enhances HTML by attaching directives to your pages with
new attributes or tags and expressions in order to define
very powerful templates directly in your HTML.
 It also encapsulates the behavior of your application in
controllers which are instantiated thanks to dependency
injection.
 AngularJS helps you structure and test your JavaScript code
very easily.
 Finally, utility code can easily be factorized into services that
can be injected in your controllers. Now let’s have a closer
look at all those features.

First Hello World Example
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app ng-init="name = 'World AngularJS'">
<h1>Hello {{name}}!</h1>
</body>
</html>

Example
<html><head>
<title>Angular JS Controller</title>
</head><body><h2>First Controller </h2>
<div ng-app="mainApp" ng-controller="employeeController">
Enter first name: <input type="text" ng-model="employee.firstName"><br><br>
Enter last name: <input type="text" ng-model="employee.lastName"><br>
You are entering: {{employee.fullName()}}
</div><script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('employeeController', function($scope) {
$scope.employee = { firstName: "Raju", lastName: "Dodamani", fullName: function() {
var employeeObject; employeeObject = $scope.employee;
return employeeObject.firstName + " " + employeeObject.lastName;
} };});
</script>
</body>
</html>

AngularJS - Controller
<html>
<head>
<title>Angular JS Custom Directives</title>
</head>
<body>
<h2> Student Custom Directives</h2>
<div ng-app="mainApp" ng-controller="StudentController">
<student name="Ramesh"></student><br/>
<student name="Sunil"></student> </div>
<script src="angular.min.js"></script> <script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.directive('student', function()
{ var directive = {}; directive.restrict = 'E';
directive.template = "Student: <b>{{student.name}}</b> , Roll No:
<b>{{student.rollno}}</b>";
directive.scope = { student : "=name" }

AngularJS - Controller
directive.compile = function(element, attributes)
{
element.css("border", "1px solid #cccccc");
var linkFunction = function($scope, element, attributes) {
element.html("Student: <b>"+$scope.student.name +"</b> , Roll No:
<b>"+$scope.student.rollno+"</b><br/>");
element.css("background-color", "lightblue"); }
return linkFunction; }
return directive;
});
mainApp.controller('StudentController', function($scope) {
$scope.Ramesh = {};
$scope.Ramesh.name = "Ramesh K";
$scope.Ramesh.rollno = 100;
$scope.Sunil = {};
$scope.Sunil.name = "Sunil P";
$scope.Sunil.rollno = 101; });
</script>
</body>
</html>

Introduction to AngularJS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to Introduction to AngularJS

Similar to Introduction to AngularJS (20)

More from Collaboration Technologies

More from Collaboration Technologies (16)

Recently uploaded

Recently uploaded (20)

Introduction to AngularJS