Html and Angular js

GUJARAT TECHNOLOGICAL UNIVERSITY
Chandkheda, Ahmedabad
Affiliated
GOVERNMENT ENGINEERING COLLEGE

BHAVNAGAR
DEPARTMENT OF INFORMATION TECHNOLOGY
Advanced Web Programming (3161611 )

B. E. III, Semester –VI (Information Technology)
CHAPTER-1I
Introduction to Angular JS
Subject Coordinator
Prof.Bharat Vainsh
Academic year
2023-24
Content
 Basics and Syntax of Angular JS
 Features
 Advantages
 Application Structure
 Basics of routes and navigation
 MVC with Angular JS
 Services
Bharat Vainsh-IT-GECBhavnagar 2
Framework
 It is facilitate the development of web application
that use web Services, Resources and APIs.
 To build client side applications.
 Great for SPAs.
 Reusable code
 Development quicker and easier
 Unit testable
 Google-Microsoft
 JS is multi-paradigm language that support even
driven, function and imperative(including Object
oriented and prototype based) programming
language.
Basics and Syntax of Angular JS
What is AngularJS?
 AngularJS is a client side JavaScript MVC
framework to develop a dynamic web
application. AngularJS was originally started
as a project in Google but now, it is open
source framework.
 AngularJS changes static HTML to dynamic
HTML. It extends the ability of HTML by
adding built-in attributes and components
and also provides an ability to create custom
attributes using simple JavaScript.
What is AngularJS?
 It is open source front end enabled web
application framework.
 It extends HTML.DOM with additional
features.
 More responsive
 AngularJS is a JavaScript framework used for
creating single web page applications
 Angular Js is developed by Google.
 It is an excellent framework for building
single phase applications and line of business
applications.
 AngularJS makes it easier to develop web
apps by reducing the amount of code you
need at any given point in the development
process.
 Create dynamic web applications.
 Angulatjs provide direct output without
refresh the web page(we can call it DATA
Binding)
 Angularjs provides functionality to handle
user input in the browser, manipulate data
on the client side and control how
elements are displayed in the browser
view.
 AJS to provide a framework that makes it
easy way to implements well designed and
structured framework.
 Compatibility(Jquery,Ajajx)
 Cross Platform
 Code splitting
 Universal(view of NodeJS,.NET,PHP and
others servers for near instant rendering in
just HTML and CSS.
 Speed and performance
 Template(UI View)
 Productivity
 Angular CLI
 IDES
 Animation,Accessibility(API)
Advantages of AngularJS
 Builtby Google engineers.
 MVC Support
 Rich Features(testing, data binding
,di)
 Less Code and more functionality
 Reusable code(component)
 Comprehensive(no need any other
plugins or framework).
Advantages of AngularJS
 Open source JavaScript MVC framework.
 Supported by Google
 No need to learn another scripting language. It's just
pure JavaScript and HTML.
 Supports separation of concerns by using MVC design
pattern.
 Built-in attributes (directives) makes HTML dynamic.
 Easy to extend and customize.
 Supports Single Page Application.
 Uses Dependency Injection.
 Easy to Unit test.
 REST friendly.
Disadvantages of AngularJS
 AngularJS is based on JS Framwork,its not
secure.
 There are multiple ways to do the same
thing with angularJS. Sometimes it can be
hard for novices to say which way is
better for a task.
Features of AngularJS
 Scope
 Controller
 Model
 View
 Services
 Data Binding
 Directives
 Filters
 Testable
 Data Binding-allowing synchronization
between model and view component.
 Scope-objects from model that can be
correlated to controller and view.
 Controller-these are basically js functions
that are bound to particular scope.
 Directives-it is designed to give HTML
new functionality.
 Filters-allows to select subset from array
of items.
 Routing-allows to switch between
multiple views.
 Services-Support many in built functions
for AngularJS.
 Dependency Injections-s/w design
pattern that helps the developers to
develop and understand applications
easily.
MVC – The framework is built on the famous concept of MVC
(Model-View-Controller). This is a design pattern used in all
modern day web applications. This pattern is based on splitting the
business logic layer, the data layer, and presentation layer into
separate sections.
Data Model Binding – You don’t need to write special code to bind
data to the HTML controls.
Writing less code – When carrying out DOM manipulation a lot
of JavaScript was required to be written to design any application.
But with Angular, you will be amazed with the lesser amount of
code you need to write for DOM manipulation.
Unit Testing ready – The designers at Google not only developed
Angular but also developed a testing framework called “Karma”
which helps in designing unit tests for AngularJS applications.
MVC with Angular JS
AngularJS MVC Architecture
 Reusability
 Development Code-Easily
access without affect another
module
 Parallel Development
 Multiple View Support
AngularJS MVC Architecture
Model: It is responsible for managing application data.
It responds to the requests from view and to the instructions
from controller to update itself.
View: It is responsible for displaying all data or only a portion of

data to the users.
It also specifies the data in a particular format triggered by the
controller's decision to present the data.
They are script-based template systems such as JSP, ASP, PHP and
very easy to integrate with AJAX technology.
Controller: It is responsible to control the relation between

models and views. It responds to user input and performs
interactions on the data model objects.
The controller receives input, validates it, and then performs
business operations that modify the state of the data model.
Setup AngularJS Development
Environment
 We need the following tools to setup a
development environment for AngularJS:
 AngularJS Library
 Editor/IDE
 Browser
 Web server
Environment
 AngularJS Library
 To download AngularJS library, go
to angularjs.org -> click download button,
which will open the following popup.
Environment
Editor
AngularJS is eventually HTML and JavaScript code. So you can install any good editor/IDE as per your
choice.
The following editors are recommended:
Sublime Text
Aptana Studio 3
Eclipse
Visual Studio
Online Editor
You can also use the following online editors for learning purpose.
plnkr.co
jsbin.com
We are using our own online code editor for all the AngularJS examples in these tutorials.
Web server
Use any web server such as IIS, apache etc., locally for development purpose.
Browser
You can install any browser of your choice as AngularJS supports cross-browser compatibility. However, it is
recommended to use Google Chrome while developing an application.
Application Structure
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.2.5/angular.min.js"></script>
</head>
<body>
.
.
</body>
</html>
AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML
controls (input, select, textarea) to application data.
The ng-bind directive binds application data to the
HTML view.
AngularJS starts automatically when the web page has
loaded.
The ng-app directive tells AngularJS that the <div>
element is the "owner" of an AngularJS application.
The ng-model directive binds the value of the input field
to the application variable name.
The ng-bind directive binds the content of the <p>
element to the application variable name.
Directives
AngularJS extends HTML with ng-directives.
ng-app
It is basically defines the root element.
The ng-app directive defines an AngularJS
application.
This directives is used for initialization of
AngularJS.
Its initializes the application automatically when
the web page containing angularjs code is
loaded.
Example
<div ng-app=“”>
</div> Bharat Vainsh-IT-GECBhavnagar 25
Directives
ng-init
The ng-init is used for initialization of

AngularJS data.
Example
<body>
<div ng-app=“” ng-init=“msg=‘’Hello World”>
<h3>{{msg}}</h3>
</div>
</body>
Directives
ng-model
The ng-model directive binds the value of
HTML controls (input, select, textarea) to
application data.
<div>
<p>enter your name<input type=“text” ng-
model=“name”>
</p>
<p>welcome <span ng-bind=“name”>
</span>
</div> Bharat Vainsh-IT-GECBhavnagar 27
Directives
ng-repeat
The ng-repeat element directive repeats the

HTML elements.
<div ng-app=“” ng-init=“nums=[10,20,30,40]”>
<p>the elements are</p>
<ul>
<li ng-repeat=i in nums”>
{{i}}
</ul>
</div>
 AngularJS Expressions
 Can be written inside double braces
 {{Expression}}
 Are much like js expression they can
contain literals, operators and
variables.
 AngularJS framework evaluates the
expression and produces a result.
 Unlike JS,AJS exp.can written inside
HTML.
 AJS exp. support filters while JS
exp.do not
 AJS exp. Don’t support Condtions,
Loops and exceptions while JS exp. do
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script></head>
<body ng-app="">
<div>
<p>Name : <input type="text" ng-
model="msg"></p>
<p ng-bind="msg"></p>
<p>Hello {{msg}}</p>
<p>adding two no.:{{2+2}}</p>
</div>
<div ng-app="" ng-
init="[firstname='James',lastname='Poll']">
<p> Name is {{firstname+""+lastname}} </p>
</p> <span ng-
bind="firstname+''+lastname"></span>
<br>
</div>
<div ng-
init="person={firstname:'James',lastname:'Poll'}">
<p> Name is {{person.firstname}} </p>
</p> <span ng-
bind="person.firstname+''+person.lastname"></span>
<br>
</div>
<div ng-app="" ng-init="points=[1,2,3,4,5]">
<p> Result is {{points[2]}} </p>
</p> <span ng-bind="points[2]"></span>
<br>
</div>
<div ng-app="" ng-init="height=100;width=200">
Total:{{height*width}}
<p><span ng-bind="height*width"></span></p>
</div>
</body>
</html>
Experiments
 Write JavaScript code to know which
mouse button was clicked, number of
elements in form, and write hello world
on the document.
 Write an HTML & CSS code to create
Horizontal and Vertical Menu.
 Write JavaScript code for loop that will
iterate from 0 to 15 for each iteration, it
will check if the current number is odd or
even, and display a message to the screen.
Experiments
 Write an AngularJS code to implement
create your resume.
 Create a HTML form using bootstrap
controls that will accept Enrollment No.,
Name, Semester, Branch, Mobile Number,
Email, Address etc. from the student,
combine and display them on the page
when button is clicked also validate an
Email address using Javascript.
Experiments
 Write an AngularJS code which takes
number as an input and display that
number is odd or even.
 Design Order Form with a total price

updated in real time, which contains name
of five products and their prices. Create a
bill amount for all the products and
calculate GST on the billing amount and
display total amount.
Experiments
 Create a webpage using Angular JS that
displays details of students' objects (such
as Enrollment No., Name, Semester,
Branch, Mobile Number, Email Address,
Address etc.) in a tabular format with
appropriate CSS effects.
 Write JavaScript code for loop that will
iterate from 0 to 15 for each iteration, it
will check if the current number is odd or
even, and display a message to the screen.
Bibliography
E-Books:
1. Angularjs in Action ISBN 9789351198383 Ruebbelke, Wiley Publication

2. Node.js in Action ISBN 9789386052049 Alex Young, Bradley Meck, Mike
Cantelon, Tim Oxley, Marc Harter, T.J. Holowaychuk, Nathan Rajlich, Wiley
Publication
Website :
• https://www.bharatvainsh.in/
• https://smarteportal.blogspot.com/
• https://www.w3schools.com/angular/
• https://www.javatpoint.com/nodejs-tutorial
• https://nodejs.org/en/download/
• https://www.mongodb.com/
Faculty Guide : Prof. Bharat Vainsh


Html and Angular js

Uploaded by

Html and Angular js

Uploaded by

GUJARAT TECHNOLOGICAL UNIVERSITY

GOVERNMENT ENGINEERING COLLEGE

Advanced Web Programming (3161611 )

View: It is responsible for displaying all data or only a portion of

Controller: It is responsible to control the relation between

The ng-init is used for initialization of

The ng-repeat element directive repeats the

 Design Order Form with a total price

1. Angularjs in Action ISBN 9789351198383 Ruebbelke, Wiley Publication

Faculty Guide : Prof. Bharat Vainsh

You might also like