Getting Started
It is extremely easy to get started with Angular. That is, the element with the buybutton id tag must not change. The confusion of how elements work is shrunk significantly as the interactivity is written into the web application itself. For instance, when we want to run a function on an element with the id of buybutton , we add a click event listener with a handler function to an event. —
With that, our Angular application is ready to go. We can rewrite the above example within the HTML file:
button ng-click=»buyFn()»Buy now/button
Rather than concerning ourselves with how the element is found in the page, we can let Angular worry about attaching events to the elements while we figure out the business logic of our application. This allows Angular to play nicely with other web frameworks. In this short introduction to AngularJS, I’ll examine how the framework is altering the face of web development today. Web development is on the verge of a huge shift. Instead of studying on how the browser works and what CSS selectors are, we focus upon expanding knowledge of the functionality of the application. Even with this simple example, there is a tight coupling between the document structure and the JavaScript. An adding calculator might be written like so:
button ng-click=’total = total + 1’+1/button
Total: {{ total }}
button ng-click=’total = total — 1′-1/button
Building bi-directional data bindings in Angular is as easy and natural as it should be. The community is growing larger every day and open source components are appearing in the community faster than ever. We write our interactivity by targeting DOM elements in our HTML using JavaScript selector functions, and adding event listeners to the element. AngularJS enables developers to combine these two equally important components, taking advantage of the fact that web browsers are becoming more intelligent and widely distributed, and we no longer need to be as sensitive to less advanced browsers. ng-click, for instance, adds the ability to run a function when the element is clicked. Our HTML might look like this:
button id=»buybutton»Buy now/button
To add event handling, our JavaScript might look something like so:
document.findElementById(‘buybutton’)
.addEventListener(‘click’, function(event) {
// The button with the id of buybutton
// has been clicked
});
While effective for simple applications, this method can prove troublesome in more complex applications. When we want our Angular application to control the entire page, we can place it on the root element:
html ng-app
!— … It frees us developers from worrying about the work it takes to apply the JavaScript, and build our application. Traditional web application development
Fundamentally, browsers are event-driven applications. With the new emphasis on web technologies from companies such as Google and Facebook, and the maturing Node.js framework, web technologies have taken centre stage and are maturing rapidly. We simply describe the data and functional interactivity as we want it to appear and Angular takes care of the rest. In fact, the growth of Angular is showing similarities with Ruby on Rails between 2004 through 2006. When the browser loads the library, it will hook into the onready event fired by the browser, start parsing the DOM tree and automatically start our app. Words: Ari Lerner
Ari Lerner is a distributed computing and advanced frontend developer. A directive is a function that is run on an element to give it superpowers – for example, augmenting that element’s functionality. Angular strips away the work required to build boilerplate functionality, and makes it easy to build engaging web experiences in a fraction of the time it might usually take. When design changes, or the name or DOM structure of the button changes, our brittle JavaScript is likely to stop working. We can add an attribute to an element on the page called ng-app. Once it is running, we have a fully functional Angular environment to interact with. We can bind both data and functions to our HTML document by using simple directives.
