– DEMO I – DEMO II

View Github Repository Open presentation in a new window

maruthip25

See all presentation from maruthip25

– DEMO I – DEMO II

0 0

ngs

Technical Seminar Slides for AngularJS

On Github maruthip25 / ngs

 

By P. Maruthi Sharma - 10261A0547

What is AngularJS

  • Open-source JavaScript framework.
  • Browser based Applications with MVC capability.
  • Single Page Applications.

MVC

  • A software pattern for implementing user interfaces
  • Divides a software application into 3 components
    • Model
      • The central component
      • Contains  data and business logic
    • View
      • The presentation component
      • Output representation such as charts, diagrams, etc
    • Controller
      • The I/O component
  • Although originally developed for desktop computing, Model View Controller has been widely adopted as an architecture for World Wide Web applications in all major programming languages.

MVC

     

MVC

  • A controller can send commands to the model to update the model's state (e.g., editing a document).
  • A model notifies its associated views and controllers when there has been a change in its state. This notification allows views to update their presentation, and the controllers to change the available set of commands.
  • A view is told by the controller all the information it needs for generating an output representation to the user. 

SPA

  • A web application that fits on a single web page with the goal of providing a more fluid user experience similar to a desktop application.
  • It consists of a Shell Page and a collection of views.

Advantages of SPA

  • No need to reload everything, everytime.
  • Consumes less bandwidth
  • High compatibility with mobile devices.

Challenges of SPA

  • Complex Routing
  • Caching
  • Traditional AJAX/jQuery Approach is complex
  • Lack of proper data binding features
  • Loads of libraries

Why AngularJS

  • HTML is great for Static Documents. But, fails to support development of Dynamic Web Based Applications.
  • There are several MVC frameworks available today. But, most of them require the knowledge of an additional programming language.
    • Zend - PHP
    • Ruby on Rails - Ruby
    • Django - Python
  • AngularJS lets you extend HTML vocabulary for your application using Javascript. 
  • Its not a library, it is one core framework providing the functionality of many libraries

Features of AngularJS

  • Two way Data Binding
  • Dependency Injection
  • Templates
  • MVC-like functionality (MVVM)
  • Directives to extend the vocabulary of HTML
  • Filters to customize the output

Advantages

  • Active Developer/Support Community
  • Write Less. Do More.
  • Highly extensible
  • Simple routing
  • Highly compatible with pre-existing web libraries like jQuery

Basic Angular Directives

  • ng-app : Declares an element as a root element of the application.
  • ng-model : Provides two Way binding between view and scope.
  • ng-class : Allows class attributes to be dynamically loaded.
  • ng-controller : Specifies a JavaScript controller class that evaluates HTML expressions.
  • ng-show & ng-hide : Conditionally show or hide an element, depending on the value of a boolean expression.
  • ng-view : The base directive responsible for handling routes.
 

DEMO I

A simple exampleusing Directives and Data Binding

Without Angular

 <!DOCTYPE html>
<html>
	<head>
		<title>Angular JS Demo 1</title>
	</head>
    <body>
        <input type="text" id="input" onchange="onCh()"/>
        <button onclick="onCh()">Go!</button>
        <br />
        <span id="output"></span>
        <script type="text/javascript">
            function onCh() {
               document.getElementById("output").innerHTML=document.getElementById("input").value;
            }
        </script>
    </body>
</html>

With Angular

<!DOCTYPE html>
<html ng-app>
	<head>
		<title>Angular JS Demo 1</title>
	</head>
    <body>
        <input type="text" ng-model="input" />
        <br />
        {{ input }}
        <!-- Angular JS File -->
        <script src="angular.min.js" type="text/javascript"></script>
    </body>
</html>
 

DEMO II

A simple exampleusing Iterations

 Listing without AngularJS

 
<!DOCTYPE html>
    <html>	
        <head>		
            <title>Angular JS Demo 2</title>	
        </head>    
        <body>         
            <ul>            
                <li> Arun </li>            
                <li> Sunny </li>            
                <li> Raghu </li>          
                <li> Sameer </li>      
            </ul>    
        </body>
    </html>

 Listing with AngularJS(ng-repeat) 

 
<!DOCTYPE html>
    <html ng-app>
        <head>
            <title>Angular JS Demo 2</title>
        </head>
        <body ng-init="students=['Arun','Sunny','Raghu','Sameer'];">
            <ul> 
                <li ng-repeat="name in students">{{name}} </li> 
            </ul>       
        <!-- Angular JS File -->       
        <script src="angular.min.js" type="text/javascript"></script>    
        </body>
    </html>
 

DEMO III

A simple exampleusing Filters and Controllers

Using Filters and controllers

<!DOCTYPE html>
    <html ng-app>
        <head>	
        <title>Angular JS Demo 3</title>
        </head>    
        <body>        
            <div ng-controller="StudentsController">            
            <input tye="text" ng-model="key">           
            <ul>                
                <li ng-repeat="person in students | filter:key | orderBy: 'city' ">{{person.name}} - {{person.city}}</li>            
            </ul>        
            </div>        
        <!-- Angular JS File -->        
        <script src="angular.min.js" type="text/javascript"></script>        
        <script  type="text/javascript">            
        function StudentsController($scope) {                $scope.students = [                    {name:"Adam", city:"Chicago"},                    {name:"Daniel", city:"New York"},                    {name:"Charles", city:"London"},                    {name:"Brock", city:"Seattle"},                    {name:"Fred", city:"Mumbai"},                    {name:"Evans", city:"Los Angeles"},                    {name:"Ivan", city:"Paris"},                    {name:"Kevin", city:"Moscow"},                    {name:"George", city:"Amsterdam"},                    {name:"James", city:"Dubai"},                    {name:"Sarah", city:"Hyderabad"},                    {name:"Oswald", city:"Dublin"},                    {name:"Martin", city:"Chennai"},                    {name:"Perry", city:"Tokyo"},                    {name:"Natalie", city:"New Delhi"},                    {name:"Luther", city:"Berlin"}                ];            }        
        </script>    
        </body>
</html>

Thank You