Scribd Logo
Upload

Welcome to Scribd!

  • Angular Notesday1

    Uploaded by

    prosenjitdas.its
    2 views4 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    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 PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    2 views4 pages

    Angular Notesday1

    Uploaded by

    prosenjitdas.its

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 4

    Introduction of AngularJS

    AngularJS is a JavaScript open source front end framework mainly use to make
    Single Page Applications (SPAs) developed by Google. A framework means “an
    essential supporting structure of programming. This framework based on MVC
    (Model View Controller).

    All modern web browsers support AngularJS. This list includes Safari, Chrome,
    Firefox, Opera, IE9 and later versions and mobile browsers, including Android,
    Chrome Mobile, and IOS Safari.

    It can be added to an HTML page with a <script> tag. Angular JS based on model
    view controller(MVC) framework. The MVC pattern is an architectural pattern,
    which is realized through a number of other design patterns.

    In MVC, there are three components: the Model is the data source, View is the
    rendered webpage, and the Controller handles the interaction between the two. A
    major purpose of MVC is to separate out responsibilities in the JavaScript code to
    keep it clean and easy to follow.

    AngularJS is one of the best MVC frameworks available because it makes it very
    easy to implement MVC.

    Model
    The model represents the underlying, logical structure of data in a software
    application.
    View
    A view is the body of code that represents the user interface. All of the things that
    the user can see and to which the user can respond on the screen, such as buttons,
    dialog boxes, and so on. An application generally has multiple views, and each
    view often represents some portion of your model.
    Controller
    In AngulaJS the controller as the intermediary for the view and the model.
    AngularJS application mainly consist with module, directives, expression , scope.

    1
     AngularJS extends HTML attributes with Directives
     Binds data to HTML with Expressions
    End users benefit from MVC because it leads to a applications that are far less
    prone to bugs and much easier to maintain.

    Module : It representing components an application of AngularJS. The module


    provides a namespace that enables you to reference directives, scopes, and other
    components based on model name. This makes it easier to package and reuse parts
    of an application. It is controller of MVC. This makes it easier to package and
    reuse parts of an application.
    Expression : A great feature of AngularJS is the capability to add expressions
    inside the HTML template. AngularJS evaluates expressions and then dynamically
    adds the result to a web page. Because expressions are linked to the scope. An
    expression that utilizes values in the scope and as the model changes so does the
    value of the expression.
    Directive : This is a convenient way to declaratively call JavaScript functions.
    AngularJS uses directives to enhance HTML with extra functionality. AngularJS
    directives are HTML attributes with an ng prefix. AngularJS extends HTML
    with ng-directives.

    Example of directive :
     ng-app directive defines an AngularJS application.

     ng-model directive binds the value of HTML controls (input, select, text
    area) to application data.
     ng-bind directive binds application data to the HTML view.
     The ng-init directive initializes AngularJS application variables
    Example :
    AngularJS Expressions

    AngularJS expressions are written inside double braces: {{ expression }}.

    <!DOCTYPE html>
    <html>
    <script src="C:\Users\User\Desktop\practice\Angular Resource\lib\angular-
    1.7.8\angular.min.js"></script>
    <body>
    <div ng-app="">
    <p>My first expression: {{ 5 + 5 }}</p>
    </div>

    2
    </body>
    </html>

    Output :

    Note :

    The ng-app directive defines in <div> so it is effective within the <div> to


    </div> .
    Here ng-app has no name.
    {{ 5+5}} is expression, it evaluate the 10.

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

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <body>
    <div ng-app=" ">
    <p>Input something in the input box:</p>
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
    </div>
    </body>
    </html>

    3
    Output :

    Note :
    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.

    You might also like