Skip to content

AngularJS

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는 아주 간단하게 Web App을 만들 수 있는 가벼운 MVC Framework다. Web App개발에 꽤 발목을 잡는 부분중에 하나가 HTML을 랜더링할 때 DOM을 사용한 인터렉션부분일 것이다. JavaScript로 값을 지정하기 위해서 DOM조작을 하여 지정해야 하는데 이 부분에서 HTML과 JavaScript 사이의 의존성이 상당히 깊어지게 된다. 이런 이유로 스파게티소스가 되어 버리는(개발자 실력에 따른 부분이겠지만) 경우가 많아지고, 소스의 가시성, 보안성, 연장성을 저하시키게 된다. jQuery나 템플릿엔진, 각종 MVC Framework를 사용하면 이런 문제가 다소 해결되기는 하지만 Controller / Model과 View가 완전하게 분리되는 경우는 없고 오히려 더 복잡해지는 경우가 허다하다.

AngularJS는 HTML을 템플릿엔진으로 두고 적극적으로 활용하는 방향을 체택하여 이런 문제를 해결할 수 있는 Framework이다. HTML과 JavaScript의 DOM 핸들링을 자동으로 수행하기 때문에 상당히 간단하며 직관적인 코드가 된다. View와 Controller / Model의 분리가 용이해지기 때문에 가시성또한 높아지며 Unit Test도 간단해 지리라 생각된다.

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 ↩