My Experience Learning AngularJS

The internet has evolved and by extension web browsers have also modernized. Web applications are replacing the soon to be primitive static website. There is no longer a fear of having to process too much JavaScript on a web page as some modern web applications are completely driven by JavasScript and AJAX. Browsers such as Internet Explorer 6 are being retired completely as Microsoft themselves have relinquished any further support for it. Front-end frameworks facilitate better control, code organization and ease of use for modern web applications. I decided to plunge right in to learn AngularJS and give an account of my experience. I prefer written tutorials over video courses and found the following tutorials most helpful:

AngularJS Tutorial
W3Schools Tutorial
A Step-by-Step Guide to Your First AngularJS App
10 Top Mistakes AngularJS Developers Make

The AngularJS framework is incredibly easy to learn for those who already have HTML and JavaScript or jQuery experience! Like jQuery all you need is to include the AngularJS JavaScript library file and you have full functionality:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>

It extends the capabilities of HTML by adding directives to static HTML tags. All the front-end templates (views) are written primarily in HTML so if you know HTML you already have a head start! In fact it was so easy that at first look I didn’t think too much of the framework and didn’t see the fuss. It just reminded me of Smarty templates with an AJAX flair. But as I dove in further, I began to see that it was so much more!

Directives and Expressions

AngularJS interacts with HTML documents by utilizing directives. Directives are added HTML markers such as a custom attribute or extra class added to HTML tags extending its traditional static capabilities. You can even define your own custom tag with directives but I will save that for another tutorial. Directives in the form of tag attributes are most commonly used and denoted by the ng- prefix (or data-ng prefix if you wish to have valid HTML). Here are some basic common directives that I learned:

<div ng-app="testapp" ng-init="myname='Peter';beatles=['John','Paul','Ringo','George']">
<p>Name: <input type="text" ng-model="myname"></p>
<p>Your name is {{ myname }}</p>
<ul>
	<li ng-repeat="beatle in beatles">{{ beatle }}</li>
</ul>
</div>

ng-app: Initializes the AngularJS application
ng-init: Declaration of variables and data for the application at initialization
ng-model: Connects application data with front-end controls such as form inputs
ng-repeat: Loops through an array of data for output
{{ }}: Double braces signify expressions which are used for the output of a variable or an operation like a mathematical formula

In a nutshell this shows how AngularJS is able to extend HTML functionality in a powerful way. Even HTML5 and CSS3 with new tags and selectors do not provide this kind of interactiveness.

MVC Architecture

Architecture is an important aspect to creating an effective and organized application. AngularJS intuitively follows MVC architecture. The views are HTML templates with added directives and expressions as I have shown in the above example. Controllers are written in JavaScript code to interact with the views. Data from the models are retrieved through AJAX calls and presented in JSON format so it can easily be integrated with any back-end language:

Model:

/* data.json */
[
    {"member": "John"},
    {"member": "Paul"},
    {"member": "Ringo"},
    {"member": "George"}
]

Controller:

/* beatlesController.js */
function beatlesController ($scope, $http) {
    $http.get("data.json")
    .success( function(response) { $scope.beatles = response; } );
}

View:

<!-- beatles.html -->
<div ng-app="testapp" ng-controller="beatlesController">
<ul>
	<li ng-repeat="beatle in beatles">{{ beatle.member }}</li>
</ul>
</div>

This feature is phenomenal as controllers have traditionally been handled with the back-end server language. With AJAX applications it just makes more sense that controllers are written in JavaScript itself.

Includes

It is hard to have dynamic templates (views) without reusable code and the ability to include files and code snippets. You can do so easily with the ng-include directive:

<div ng-include src="'footer.html'"></div>

Drawbacks to AngularJS

One glaring omission from AngularJS is the full capability for conditional if-then-else statements which is quite standard amongst programming languages. The ngIf directive was not added into the framework until recent versions after community request:

<div ng-if="x == 'y'"></div>

Even so there is still currently no true support for else and elseif statements.

AngularJS was constructed for rich internet applications and single-page AJAX-based applications. Its very nature contradicts current best practices for SEO. SEO suggests that HTML code should be simplified and content be easy for search engines to find. Directives and expressions add extra code as well as dynamic data to HTML making it much harder for search engines to parse and index the actual website text. Although I imagine this will probably change as this framework is maintained by Google and they are full aware of the situation. However until Google finds a solution for this new challenge, it is currently not recommended to use AngularJS as a front-end framework if search engine visibility is your main concern.

Conclusion

I found learning AngularJS to be an easy and wonderful experience. In my opinion the framework is still in its early stages with much more room for added features and improvement. And a collaboration between Google and Microsoft will achieve just that! I hope to utilize everything I’ve learned so far for future applications when I come across a use case that is best served by this framework.

You may also be interested in: