Last night, I attended the Microsoft DevBoston meetup which featured a deep dive look into Google’s new Angular-JS which allows you to transform static markup files into clean, concise dynamic web-applications without much effort or even bulky includes. The meetup was led by Phil Denoncourt (@pd31415), a .NET consultant and a seemingly great dad. A big shout out to his daughter who was helping him move the slides along in the presentation; A code monkey in the making!
It is encouraged that when using Angular, the use of Model/View/Controller design pattern be used, making for a pretty easy transition to use Angular if you are already familiar with that concept. HTML documents are considered the module with simple functions to create the controller and other Angular specific processes such as filters and directives.
Here’s an extremely simple example:
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="../bower_components/angular/angular.js"></script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
This is a simple bootstrap where in the html markup tag, we have a new attribute which initializes the angular application/module and alerts the bootstrap that this is a page that contains Angular code. The rest of the markup is just a simple HTML page with some css linked to it and a paragraph tag with nothing there yet. The curly braces are Angular’s way of embedding dynamic code for evaluation, akin to ASP’s <% %>’s or PHP’s <? ?>.
Anyways, this is just an example on how to get started with Angular. For me, what I found most intriguing from the meetup was the discussion on how to create directives in Angular. Phil showed us a simple example on how to create a template that displays the YouTube player by referencing a simple markup tag:
<youtube code="r1TK_crUbBY"></youtube>
Like Phil said, imagine telling your designers that if they need a youtube video (or any component for that matter) it can be as simple as calling this markup. For a full test drive into this particular directive, visit this Plunk
I can see more and more front end developers switching to this and away from Backbone.js!
Thanks Phil!
Sitecore Hacker 
Leave a Reply