Scribd Logo
Carica

Benvenuto in Scribd!

  • Angular JS

    Caricato da

    Shaikh Bilal
    79 visualizzazioni4 pagine
    This document tells about a brief introduction of angular js and some code example

    Titolo originale

    AngularJS

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    This document tells about a brief introduction of angular js and some code example

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    79 visualizzazioni4 pagine

    Angular JS

    Caricato da

    Shaikh Bilal
    This document tells about a brief introduction of angular js and some code example

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 4

    AngularJS

    AngularJS is a open source MVC framework for client-side application development written in JavaScript
    that promotes a high-productivity web development enxperience .Before angularJS the web
    applications are too complex to develop.AngularJS reduce this complexity to amazingly low level.The
    goal of Angular is to reduce the amount of code required to make an MVC based applications
    functional.An application that required about 17000s line of code can be develop by merely 1500 lines o
    code.AngularJS runs in a browser and helps developer to develop single page, modern,AJAX style
    applications.The purpose of the framework is general but specialized to write CRUD (Create Read
    Update Delete) type of web applications.
    AngularJS templates are unique it uses HTML as templating language.AngularJS tracks events,models
    actions to find out when and which template have to refresh. It also provides Dependency Injection(DI)
    which understand the need for collaborator expressed by objects and also find the needed collaborator,
    has strong focus on testablity , modularity and flexibility.
    AngularJS is a part of this new generation of libraries and frameworks that came to support the
    development of more productive, flexible, maintainable, and testable web applications. The name
    AngularJS to the framework was given to it by Adam Abrons, and it was inspired by the angle brackets
    of the HTML elements.

    Model View Controller(MVC)


    MVC structure was first used in 1970s as a part of small talk.Since then it has been used with different
    languages like C#, Java, Objective it became popular in almost every application where user interface is
    involve.
    MVC is used to separate the code in 3 different parts, managaing the data (Model) ,displaying the data
    to user (view) and the application logic (Controller) . When user use an application the controller
    responds by changing data. View get this data from model and make the changes where ever is needed.
    In AngularJS the model data is stored in object properties , controllers are javascript functions and View
    is Document object model (DOM). Since view (template) is completely written in HTML it helps designer
    and javascript programmers to work side by side. Besides MVC Angular applications have some other
    important components like services , directives and filters.

    Directives
    The special html attributes and tags that can understand by framework are called as directives. The
    directives are the extension of HTML vocabulary that allow developers to create new behaviours.
    Angular comes up with a lot of directives that help developer to define the view of application beside
    this developer can also write their own directive to extend HTML template abilities to perform any task
    he wants to. The directive can be applied as a class, attribute, element and can be used even as a

    comment using camel case syntax. Some of the important directives are ng-app, ng-controller, ng-bind,
    ng-repeat,ng-click.
    The most important directive is ng-app because it is the root of an AngularJS application. Ng-app is used
    to boot strap the framework. This directive tells the browser in which part of HTML angularJS is use. If
    you are using angular in the whole HTML you can apply it into the body tags.
    After using ng-controller the controller and view begins to share the same scope and get ready to work
    together.A scope onbject in angularJS is used to expose domain model to a view. A scope is actually a
    bridge between the view and the controller any property with scope instance can be use in the HTML
    template as long as it is in the same controller. By assigning properties to scope instance we can use
    new values of these properties available to template for rendering. Below is an example of it.
    <body ng-app>
    <div ng-controller=ctrl1>
    <h1>Hello {{text}} <h1>
    </div>
    <div ng-controller=ctrl2>
    <h1>Hello {{text}} <h1>
    </div>
    </body>
    <script src=angularjs>
    var ctrl1=function($scope)
    {
    $scope.text=World;
    }
    Var ctrl2=function($scope)
    {
    $scope.text=reader;
    }
    </script>

    When the above code will execute it will display Hello World and Hello Reader . The ng-app attribute in
    body bootstrapped the angular and tell the browser the scope of angular. The directives have the same
    scope as of the HTML tags if a directive is declared in an div tag it will be visible only inside that div tags
    and not out side that div. The text in double bracket shows that it is a javascript property and it will get
    its value from the respective controller.
    Ng-repeat is used for iteration purpose it is just like a foreach loop in c#. It is so useful that It could
    probably win a contest for most useful directive.below is an example of ng-repeat.

    var WorldCtrl = function ($scope) {


    $scope.population = 7000000;
    $scope.countries = [
    {name: 'France', population: 63.1},
    {name: 'United Kingdom', population: 61.8}
    ];
    };
    And the markup fragment:
    <ul ng-controller="WorldCtrl">
    <li ng-repeat="country in countries">
    {{country.name}} has population of {{country.population}}
    </li>
    </ul>

    MODULES
    Modules in angularJS are just like namespaces and packages in C# and java to organize the code. In
    angularJS modules can be created by two methods that are given below.
    var module = angular.module("dummymodule1", []);
    module.controller(ctrl,function($scope){

    });
    Second way is
    Angular.module(dummymodule2,[])
    .controller(ctrl,function($scope){
    });
    When using modules you have to specify which module you are using for example <body ngapp=dummymodule1> </body>

    Services
    In angularJS services are singleton objects or functions that has its life cyle controlled by framework and
    use to perform specific tasks it is used to share and organize code across the application. Services can be
    shared across any directive, filter, controller and other services that needs them. AngularJS provides
    useful services likes $http but most of the time you have to make your own service to perform specific
    tasks.

    CONCLUSION
    This article shows how interesting angular is well t (Green & Seshadri, AngularJS, 2013)here is a lot more
    exciting things about angularJS all of which cannot be written in this article. You can learn more from the
    references given below.

    Bibliography
    Branas, R. (2014). AngularJS Essentials. Birmingham: Packt Publishing.
    Darwin, P. B., & Kozlowski, P. (2013). Mastering Web Application Development with AngulaJS.
    Birmingham: Packt Publishing.
    Green, B., & Seshadri, S. (2013). AngularJS. California: O'Reilly.

    Potrebbero piacerti anche