Scribd
Upload
136 views

Angular JS

Angular JS is a JavaScript framework for developing single-page applications. It aims to simplify development and testing through MVC and MVVM architectures. The document discusses key Angular JS concepts like directives, scopes, controllers and provides examples of how to use directives like ng-app, ng-bind, ng-model, ng-repeat. It also compares Angular JS to jQuery and shows how Angular JS only processes DOM elements within a controller's scope.

Uploaded by

Tech Scho
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
136 views

Angular JS

Angular JS is a JavaScript framework for developing single-page applications. It aims to simplify development and testing through MVC and MVVM architectures. The document discusses key Angular JS concepts like directives, scopes, controllers and provides examples of how to use directives like ng-app, ng-bind, ng-model, ng-repeat. It also compares Angular JS to jQuery and shows how Angular JS only processes DOM elements within a controller's scope.

Uploaded by

Tech Scho
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Angular JS

By
Dr. Muhammad Furqan
Assistant Professor, BSE, CUST
Introduction
• AngularJS is a discontinued free open source Javascript based web
framework for developing single page application. It was maintained
mainly by Google and a community of individuals and corporations. It
aimed to simplify both the development and the testing of such
applications by providing a framework for client-side model-view-
controller (MVC) and Model-view-viewmodel (MVVM)
architectures, along with components commonly used in web
application and progressive web applications.
Introduction
– AngularJS is client side JavaScript MVC framework to develop a dynamic
web application.

– It is entirely based on HTML and JavaScript, so there is no need to learn


another syntax or language.

– AngularJS changes static HTML syntax to dynamic HTML.


Introduction
Use the following URLs to download AngularJS
https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
For Previous Versions URL
https://code.angularjs.org/
ng-app
Tags of Angular JS
Declares the root element of an AngularJS application, under which directives can be used to
declare bindings and define behavior.

ng-bind
Sets the text of a DOM element to the value of an expression. For example, <span ng-
bind="name"></span> displays the value of ‘name’ inside the span element. Any change to the
variable ‘name’ in the application's scope reflect instantly in the DOM

ng-model
Similar to ng-bind, but establishes a two-way data binding between the view and the scope.
Other Tags
ng-aria, ng-class, ng-controller, ng-if, ng-init, ng-model, ng-model-options, ng-repeat, ng-
show & ng-hide,
ng-switch, ng-view.
Example of Angular JS
Output
Angular JS verses JQuery
• The same task can be accomplished using jQuery with more lines of code, such as:
Example of Multiplication through Angular JS

Output
Angular JS Example of Multiplication

Template

Directives

Expression
Angular JS will only Process DOM and Child
Elements

Output
Angular JS
• Directives
– Most of the directives in AngularJS are starting with ng- where ng stands for
Angular. AngularJS includes various built-in directives such as:
Angular JS ng-init
• Directives
– ng-init
• The ng-init directive can be used to initialize variables in AngularJS application.
– The following example demonstrates ng-init directive that initializes variable
of string, number, array, and object.
Angular JS ng-init Example

Output
Ng-Model
• Directives
– ng-model:
• The ng-model directive is used for data binding. It binds HTML controls such as: <input>,
<select> or <textarea> elements to a specified property.
– Example
Ng-bind
• Directives
– ng-bind:
• The ng-bind directive binds the model property declared via ng-model directive to the
HTML element.
• It also updates an element if the value of an expression changes.
• Example
Ng-repeat
• Directives
– ng-repeat:
• The ng-repeat directive repeats HTML once per each item in the specified array
collection.
Ng-Repeat

Output
Angular JS
• Scope
– Scope in AngularJS is property that acts like a communicator
Between HTML and javascript (or Jquery) functions.
• Why we need Scope directive?
– One reason is to send AJAX call (which is javascript function) from
– Angular code to server and display result
Scope
• Scope object communicates data between javascript (which will be
called controller) and view (HTML code) and thus acts like a glue to
bind together view and controller.

View Scope Controller


Controller in JS
• AngularJS applications are controlled by controllers. The ng-controller
directive defines the application controller. A controller is a JavaScript
Object, created by a standard JavaScript object constructor.
• A controller is a function you write to control your data. With a self-
written controller, you can modify data anyway you want: Convert to
upper case. Convert currencies. Calculate and Summarize.
Controller in Angular JS
Controller example Angular JS

Output
• In previous example
– properties and methods attached to the scope object inside a particular
controller is only available to the HTML elements and its child elements
where ng-controller directive is applied.
Nested Example Angular JS

You might also like