Month: September 2013

AngularJS – Up and Running In Minutes

So I have written about Single-Page-Applications (SPA) frameworks like Ember before.  I have even mentioned that there were others like Backbone and AngularJS.  Recently, I have been doing more and more AngularJS, and I have to say, I love it. I know, I said that too about Ember too.  🙂 Color me silly.

But what I thought was so easy with Ember, that remains true, is even easier in AngularJS.

Take for example, the dependencies you need for Backbone or Ember, there is none, absolutely none for AngularJS.

And there is more, quite more.  With AngularJS, you get 2-way binding automatically can easily defined your won directives (elements, attributes, classes, and comments).  None of the other SPA frameworks offers 2-way binding or directives like AngularJS.  To see how useful those things are and why they are so awesome, I will show two every simple examples.

One key concept in AngularJS is a “directive”.  A directive is what you use in your HTML just like you would an element, attribute, class, or comment.  One of the easiest to use ‘directive’ that comes with angular is the ‘ng-model’ directive.  This directive is used to create 2-way bindings, so let’s see how it is used.

<input type=”text” ng-model=”myVar” />

<h1>{{ myVar }} </h1>

That is it, you now have an input textbox, into which anything you type will show up between h1 tags.  How easy was that?  Why is this 2-way binding? If you change ‘myVar’ anywhere in code, then the UI will also update in as many places as you are using ‘myVar’.  Similarly, if the UI change, that is the input textbox, the ‘myVar’ is updated.  So your UI and model is always in sync automatically by AngularJS.

He is a full example you can put in a text editor and load up in your browser:

<html ng-app="">
  <body>
    <input type="text" ng-model="myVar" />
    <h1>{{ myVar }}</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" />
  </body>
</html>

If this is exciting to you, then come back soon for my next post on creating your own directives.  You will see just how easy it is and may be start to see why AngularJS is different from the rest.

Ember JS – Round Two – Adding A Route

In the last post Ember JS – Single Web Application, we jumped right in. We downloaded Ember JS and fired up our own modified version of the application.  So let’s go a bit deeper.

Ember JS take a lot, a whole lot, from Ruby on Rails and other Convention Over Configuration (CoC) Web Application frameworks.  It is important to note just how important CoC is.  For one thing, you code faster and less, because you dont’ have to think about configuration and since you use a convention over and over, you don’t even have to think about what to name certain things.  All of that, mean you save time, and can be more productive.

In the last post on Ember JS, we saw one of the most minimalist application.  We have a .js file (app.js) which created our Ember JS application and added a Route (more on route later). That file looked like this:

App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [‘red’, ‘yellow’, ‘blue’];
}
});

The function ‘model’ in the IndexRoute is there from the original Ember Starter Kit code.  We didn’t change that.

Then we had our .html file which included the app.js file and several other js files before it.  Those other js files are a constant in your Ember JS application, because they are the dependencies (jQuery and Handlebars) and Ember JS itself.  This was all we had in the HTML file, index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Ember Starter Kit</title>
<link rel=”stylesheet” href=”css/normalize.css”>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>

<script type=”text/x-handlebars”>
<p>{{input type=”text” value=name}}</p>
This is my name: {{name}}
</script>

<script src=”js/libs/jquery-1.9.1.js”></script>
<script src=”js/libs/handlebars-1.0.0-rc.3.js”></script>
<script src=”js/libs/ember-1.0.0-rc.3.js”></script>
<script src=”js/app.js”></script>
</body>
</html>