AngularJS: Superheroic Javascript Framework
For all those who have worked with HTML and CSS, you know very well that HTML is great for declaring static documents. It doesn’t do so well for declaring dynamic views in web-applications. Angular lets us create expressive, readable, quick to develop dynamic web pages. AngularJS framework is written in Javascript. In this article, I’m going to be introducing you to very basic AngularJS, essentially talking about directives, expressions, controllers, data binding and filters.
Prerequisites
- Elementary knowledge about HTML, CSS and Javascript.
- Desire to develop responsive and dynamic web pages.
Angular Directives
Let us begin now. We’ll start with a website, albeit a simple one, that IITK’s alumni have made. The purpose of this website is for Y12 batch to stay in touch with batch mates and know the whereabouts of Y12 junta. A brilliant idea. We won’t be talking about the backend that is how the data is added and how the website fetches the data.
Now if you right click anywhere on the site and chose inspect element, a small window opens in your browser. Find the body tag and you would find something like:
<body ng-app='iitky12App' ng-init='loadSettings()' ng-controller='AppCtrl' class='ng-scope'>
So what exactly is ng-app, ng-init and ng-controller? These are the angular directives. Directives are markers on a DOM (Document Object Model) element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children. Some common directives:
- The ng-app directive tells AngularJS that the
<body>element is the “owner” of an AngularJS application. - The ng-init directive initializes AngularJS application variables.
- The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-model directive provides a two-way binding between the model and the view.
- The ng-repeat directive actually clones HTML elements once for each item in a collection. Consider this like a loop for HTML elements.
Angular Expressions
AngularJS binds data to HTML using Expressions.AngularJS expressions can be written inside double braces:
{{ expression }}
If you remove the ng-app directive, HTML will display the expression as it is, without solving it.
Two Way Data binding
Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the modelis updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times. ng-model directive mentioned earlier, is used for two way data binding.
Angular Controllers
AngularJS controllers control the data of AngularJS applications. AngularJS controllers are regular JavaScript Objects. AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller. Like in the site mentioned in the beginning, in the body tag ng-controller='AppCtrl' has been used. This means AppCtrl is defined as the application controller.
Angular Filters
Perhaps again we should visit the site I mentioned earlier. Let us type CSE in the search bar ( :P ). Without taking any time, we get the results which have CSE linked to them. How does this happen?
Angular Filters!! They give us the ability to format and filter the output according to our needs. So by using two way data binding we are able to use the search text entered and then filter the database using Angular Filters. We can also use filters to Order the results. Here is the link to the documentation.
Supporting Links
So I guess this is enough for a start. There is much to learn, but perhaps that would be covered in another article. I present to you a few useful links:
