Angular JS is the one of the frameworks I wanted to get
started from a long time. Angular, being a
product by Google is the reason that got me interested.
So I am going to keep this very simple and write a mail
client application. I am not going to lie, I’ve been reading a book on angular.
This post is going to be part 1 of “How to build a Gmail killer”. Ha ha. If you
find any mistakes, let me know.
To start off, I am going to get started with a simple html
page, index.html
What you see below is a standard html5 page. I am dropping
angular.min.js and bootstrap.css into the body and head sections respectively. Don’t
bother about the file hierarchy for now. The folks
over at Google recommend using Yeoman. Its a long process, so I am going to skip this for now. But worth the effort.
Now the ng-app directive signals angular to kick in at this
point. I have placed ng-app on the root node, that is <html>.
Everything else you see on the page is not related to
AngularJS. I’ve just added a fancy navbar to our application using Twitter
bootstrap.
Stay tuned.
The screen below shows the actual code for our application. "ng-controller" is assigned a controller name which will
manage the div. Note the usage of “ng-repeat” directive by the <tr> tag.
It’s now time to define EmailCtrl, which is our controller.
For now, this controller maintains a hardcoded copy of our email messages.
And that’s it. Open this up and we have our very own email client.
Key points to note:
- The function “EmailCtrl” is currently defined in the global scope. We’ll rectify that once we start with modules. Also it is recommended to move this script into its own file, say controllers.js.
- $scope is a very important variable. Look up the Angular docs for a thorough reading. It is injected by the angular framework. Dependency injection brought to you by Angular.
- The {{ }} are angular’s way to indicate the variable which is bound to a particular tag. So <td>{{ mail.sender }}<td> means that the value of “mail.sender” will be substituted in its place. An alternative to this is this,<td ng-bind=”mail.sender”></td>.
What’s an email client without asynchronous loading? I will
bring in ajax support using $http.
Stay tuned.
No comments:
Post a Comment