Scribd Logo
Upload

Welcome to Scribd!

  • Angular JS

    Uploaded by

    Mayur Panchal
    20 views6 pages

    Original Title

    AngularJS

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    20 views6 pages

    Angular JS

    Uploaded by

    Mayur Panchal

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    AngularJS

     Angular JS is an JavaScript-based open-source front-end web application framework


    mainly maintained by Google.
     AngularJS is based on the MVC pattern (Model View Control).
     it's mainly used in Single Page Application (SPA) projects. 
     Angular JS was developed by Misko Heveryand Adam Abrons in 2009.
     The Angular is a Command Line Interface (CLI ) tool that can create a project, add files,
    and perform a variety of ongoing development tasks such as testing, bundling, and
    deployment.
     It is a very powerful JavaScript Framework.

    Set up the Development Environment

    First you go to angularjs.org website click here to DOWNLOAD ANGULARJS button afetr open
    the following popup.
    Include AngularJS

     Included the AngularJS JavaScript file in the HTML page


    Offline AngularJS
    <head>
    <script type="text/javascript" src="js/angular.min.js"></script>
    </head>
    AngularJS MVC

    The AngularJS MVC stands for (Model View Controller).  This is a software design pattern used
    in all modern web applications. The views are specified using HTML + AngularJS's own template
    language. The models and controllers are specified via JavaScript objects and JavaScript
    functions. 

    In the MVC pattern, the different aspects of the application are broken into components to
    separate responsibilities. The Model contains the data and logic, the View contains the visual
    layout and presentation is following :

    Model :
    o The AngularJS model is responsible for managing application data.
    o It responds to the requests from view and to the instructions from controller to update
    itself.

    Controller :
    o Speaking the concept of controller under MVC pattern applications. In angular,
    controller is simply formed by javascript classes.
    o The controller responds to user input and performs interactions on the data model
    objects.
    o The controller receives input, validates it, and then performs business operations that
    modify the state of the data model.

    View :
    o The AngularJS view is the Document Object Model (DOM), as a web developer, this fact
    will make you easier to understand angular view.
    o To display the data from controller, you can put angular expression in your view.
    o This expression binds data from model inside your controller.
    o Since angular is two-way data binding the view will update automatically if there’s a
    model changes from your controller.

    AngularJS First App

     AngularJS is a JavaScript framework. It can be added to an HTML page with a <script>


    tag.
     AngularJS extends HTML attributes with Directives, and binds data to HTML
    with Expressions.
     The AngularJS application consists of following three  ng-directives. 

    1.  ng-app :  The ng-app directive defines an AngularJS application.

    2.  ng-model : The ng-model directive binds the value of HTML controls (input, select,
    textarea) to application data.

    3.  ng-bind : The ng-bind directive binds application data to the HTML view.

    4. Expression:  An expression is like JavaScript code which is usually wrapped inside
    double curly braces such as {{ expression }}.

    Syntax: {{expression}}

    Steps by Step create AngularJS Application


    Step 1 : Include Javascript Framework
    Include javascript framework in <head> ..... </head> head part.

    <script type="text/javascript" src=


    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.mi
    n.js"> </script>

    Step 2 : ng-app directive

    <div ng-app="">
    ...
    ...
    </div>

    Step 3 : ng-model directive

    <input type="text" ng-model="name" placeholder="Your Name">


    Step 4 : ng-bind directive

    <h1>Hello <span ng-bind="name"></span>.</h1>

    <!DOCTYPE html>
    <html>
    <head>
    <title>AngularJS First Application</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body>

    <div ng-app="">

    <label>Name : </label>
    <input type="text" ng-model="name" placeholder="Your Name">
    <h1>Hello <span ng-bind="name"></span>.</h1>

    </div>

    </body>
    </html>

    Features:

     Cross Platform.
     Progressive Web Apps.
     Use modern web platform capabilities to deliver app-like experiences.
     Speed and Performance.
     Code Generation.
     Productivity.
     Templates.
     Full Development Story.
     Testing.
     MVC
     Data model biding
     Write less code.

    You might also like