While researching AngularJS for the final project, I came across a really useful blog post written by Todd Motto, owner of Ultimate Angular, entitled “Ultimate guide to learning AngularJS in one day”. I was intrigued by this post because it contains a section solely devoted to defining the terminology that is commonly-used in AngularJS development, which I found to be incredibly helpful. In this blog post, I will reiterate the definitions of the most important terms, in hopes that it will aid me in the development of my team’s application.
The article begins by defining what exactly AngularJS is and what it is used for. Motto defines AngularJS as a “client-side MVC/MVVM framework built in JavaScript, essential for modern single page web applications (and even websites)”. MVC is short for Model-View-Controller, and MVCs are used in many programming languages as a means of structuring software. Model refers to the data structure behind a specific portion of an application, usually ported in JSON; View refers to the HTML and/or rendered output of an application. By using an MVC, you’ll pull down Model data which updates your View and displays the relevant data in the HTML; Controller refers to a mechanism, within an application, that provides direct access from the server to the view so that data can be updated on the fly via communication between the server and client(s).
Motto then explains how to set up an AngularJS project with the bare essentials. The essential elements that make up an AngularJS application are a definition, controllers, and binding and inclusion of AngularJS within an HTML file.
Controllers, as defined by Motto, are the direct access points between the server and view that are used to update data on-the-fly . The HTML of an AngularJS application should contain little to no physical text or hard coded values – this is because all of that data should be pushed into the view from a controller. Web-applications should be as dynamic as possible and, by pushing values to the view from a controller in the back-end, we can achieve this. Motto then emphasizes that Controllers are to be used for data only, and creating functions that are used in communication between the server and JSON.
Directives, as defined by Motto, are small pieces of templated HTML that should be used multiple times throughout an application’s development. Directives are the easiest way to push data into the view. Directives consist of a list of properties, including: restrict (restriction of element’s usage), replace (replaces markup in view that defines directive), transclude, template (allows declaration of markup to be injected into the view), templateURL (similar to template but kept in its own file).
Services, as defined by Motto, are stylistic design patterns. Services are used for singletons, and Factories are used for functions. Filters are used in conjunction with arrays to loop through data and filter specific findings.
Two-way data-binding, is a full-circle of synhronized data; update the Model and it updates the View, update the View and it updates the Model. This implies that data is kept in sync without issue.
A lot of the results of my research into AngularJS, at first, were of no use because I had little understanding of the terminology and concepts described in them. I believe that this post gave me a good understanding of the fundamental concepts of AngularJS and I now feel more confident as I continue development of my own application. I will likely refer back to this article as I make progress in my project and, inevitably, conduct more research.
From the blog CS@Worcester – by Ryan Marcelonis and used with permission of the author. All other rights reserved by the author.