AngularJS is a javascript framework based on open-source released by Google in 2009. Referring to the official website AngularJS (  http://angularjs.org, We would refer below Tag Line:

Enhanced HTML for Web apps!

 

The purpose of this tagline AngularJS HTML enhanced the functionality to build a web apps. Looking at the history of appearance of HTML, HTML initially only used to create a static document (website) is not to create a web app. Well, now imagine that since the beginning of HTML was developed to create a web app, that’s the concept AngularJS.

AngularJS is not a library (library) javascript but a solid framework to build a web app, such as javascript framework generally AngularJS adopt the concept of MVC (Model, View, Controller), although it uses a different implementation with the original concept of MVC. For the purpose of MVC is achieved, namely the separation of duties of each component, AngularJS own Model, View and Controller interacting. Here are some philosophy in AngularJS:

View should be declarative
The elements on the View need to provide clear and clean sense of logic code.

Controller is imperative (logic)
Processing code and logic is handled and poured in Controller before sending the result to View.

AngularJS What makes it special?

Two-way data binding

Two-way data binding is a mechanism of automatic synchronization between Controller and View. Simply put, when there is a change in the Model originating from View, Angular automatically make changes in Controller. Vice versa. This happens automatically, so we do not need to write the code manually to achieve this mechanism.

Teach new browser HTML syntax

HTML5 offers a number of new elements such as

,

,, etc. Now with AngularJS, We can even add more new elements that will be understood by the browser, for example, make the element can be dragged, making elements such as accordions, or even use Indonesian as if clicked will hide elements (examples only, in practice use English as an international language). This function is called by the term Directive. It is we who are responsible to make Directive can be interpreted by the browser by writing code on the declaration Directive itself. Or in other words, we teach new browser HTML syntax. It is not even limited to the elements, we can make Directive use attribute, HTML comment or class.

 

HTML Template

The template used AngularJS HTML is just plain with the addition of the expression ( expression), so we do not need to use a special template engine.

Dependency Injection (DI)

Dependency Injection allows developers to write some code components are separated from each other. When require one component, developers can call the required components and can use the functions available. This feature allows developers to create components that can be used repeatedly (reusable component)
Key Concept AngularJS

Model

In the MVC pattern, Model representing a set of data used by Controller and View. Model can detect changes in the data and provide notification of the change to Controller and View. In a passive implementation, a notification of change can be ignored. To make Model in some AngularJS framework required in addition to a special constructor. While Model on AngularJS does not have its own constructor and does not require inheritance of certain Class Object. The model does not require special setter or a getter method. Models can be primitive, object hash, or full object. In other words javascript object model is simply outstanding.

Scope ($scope)

Scope an adhesive (glue) or intermediary between Controller the View. Each controller has its own scope or scope.

Controller

Controller is the code behind View. Processing and logic code is placed on the controller that will result Model to be displayed on View.

View

View is what is seen by the user. Starting from a template is then combined with Model the browser do the rendering process and the results are displayed to the user. The template used only HTML syntax (not HTML interspersed with special markup as the template engine in general).

Expression

Expression is a code snippet that we can write on View. Expression relating to the binding mechanism on AngularJS, the format is as follows {{ expression }} Example:

{{ 1+2 }} , Will display the number 3 to the user.
{{ user.name }} , Will show the value of the property ‘name’ model ‘user’
{{ 1000 | currency }}, Will display the number 1000 in the format of the currency (currency), keyword after a pipe (|) is filter.
Filter

Filter perform data transformation on Model. Can be used to customize the format to your liking, or perform sorting, etc. AngularJS also have some filter innate, such as the examples we have seen in the discussion points that currency Expression, such as number, filter, limitTo, sortBy, lowercase, upercase, etc. You can also write custom filters if necessary.

Directive

Directiveis a way to create a new HTML syntax that will be understood by the browser. Directive may be elemen, attribute, HTML commentor Class. Angular have provided some innate important directive in web development app. Beberepa directive congenital Angular including ng-controller, ng-model, ng-repeat, ng-clicketc. We can also create a custom directive to the behavior (behavior) such as that described in the discussion of what makes special AngularJS

To find out how the components interact with each other above, see the following example:

// file: index.html –> View

 




Angular Hello

 

 



Hello {{ nama | lowercase }}

 

 

 

Talk to an Expert

Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within a matter of hours to help you.

Insights


Related articles

Know your browser type - custom function
Know your browser type - custom function

October 30, 2019