×

Html & Html5

The World's best Software Development Study Portal

INTRODUCTION TO ANGULAR JS


Angular JS is a client side javascript framework for adding interactivity to your HTML.
It can be added to an html page with a <script> tag and show when to call a particular piece of javascript code.

Prerequisite for ANGULAR JS


1.Moderate knowledge of HTML,CSS and JavaScript

2.Basic Model-View-Concept(MVC)concepts

3.The Document Object Model(DOM)

4.JavaScript Functions



Now,Why would you learn and use Angular JS?


  • You can use AngularJS to create single page applications.

  • You can use it to create dynamic responsive websites.

  • You can use it to organise javascript code.

  • AngularJS's data binding and dependency injection eliminates much of the code you would otherwise have to write.



  • Points to be remember:


    AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

    AngularJS is a JavaScript framework written in JavaScript.

    AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    AngularJS Extends 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, text area) to application data.

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


    Angular JS Example:



    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>

    <div ng-app="">
     <p>Name: <input type="text" ng-model="name"></p>
     <p ng-bind="name"></p>
    </div>

    </body>
    </html>


    Here you will learn everything about directives, expressions, filters, modules,controllers,Events, DOM, Forms, Input, Validation, Http, and more.




    # What is Dependency Injection in Angular?
    It is a coding pattern in which a class receives its dependency from an external source rather than creating them itself.


    # What is Two-way data binding?

    Two-way data binding means any data-related changes affecting the model are immediately propagated to the matching view and that any changes made in the view are immediately reflected in the underlying model.