Skip to content
Search

AngularJS

lastmod 2020-02-13created 2014-05-0115 edits

AngularJS is an open-source web application framework, maintained by Google and community, that assists with creating single-page applications, one-page web applications that only require HTML, CSS, and JavaScript on the client side. Its goal is to augment web applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

The library reads in HTML that contains additional custom tag attributes; it then obeys the directives in those custom attributes, and binds input or output parts of the page to a model represented by standard JavaScript variables. The values of those JavaScript variables can be manually set, or retrieved from static or dynamic JSON resources.

About

AngularJS is a lightweight MVC Framework that makes building a Web App very simple. One of the parts that really holds back Web App development is probably the interaction using the DOM when rendering HTML. To set a value with JavaScript you have to manipulate the DOM, and here the dependency between HTML and JavaScript becomes quite deep. For this reason the code often ends up as spaghetti code (though this depends on the developer's skill), which degrades the readability, security, and extensibility of the source. Using jQuery, template engines, or various MVC Frameworks solves this problem to some extent, but the Controller / Model and View are never completely separated, and it is very common for things to become even more complicated.

AngularJS is a Framework that can solve this problem by adopting the approach of treating HTML as the template engine and making active use of it. Because it automatically performs the DOM handling between HTML and JavaScript, the code becomes quite simple and intuitive. Since separating the View from the Controller / Model becomes easy, readability also improves, and Unit Tests should become simpler too.

Simple example 

<!DOCTYPE html>
<html>
<head>
    <title>Test AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.carname = "Volvo";
        });
    </script>
</head>

<body>
    <div ng-app="myApp" ng-init="qty=1;cost=2">
        <h1 ng-controller="myCtrl">{{carname}}</h1>

        <b>Invoice:</b>
        <div>
            Quantity: <input type="number" min="0" ng-model="qty">
        </div>
        <div>
            Costs: <input type="number" min="0" ng-model="cost">
        </div>
        <div>
            <b>Total:</b> {{qty}} * {{cost}} = {{qty * cost | currency}}
        </div>
    </div>
</body>
</html>

See also

Favorite site

Tutorials

Article

References

  1. Meetup_TOAST_Cloud_-Introduction_to_the_JavaScript_Framework_2-_Angular2.pdf ↩

  2. WebFrameworks_-_Learn_the_AngularJS_Router_for_Single_Page.pdf ↩

author Zer0 sitemap