Thursday, July 2, 2015

My first angular app

As Hello word program there are few basic things to know in angular.

  • What is angular
  • How to use
  • When to use
  • Basic structure or tags

Misko Hevery, of Google, is the founding co-author of AngularJS. There's couple of things in Angular make it special. First of all, we have dependency injection, which is very unique. Nobody else has that. But I think that the thing that really hits it home for people is that we have this idea of a directive. Rather than writing everything inside of JavaScript and then having a bunch of templates to generate the UI, you write a lot of it in HTML and HTML drives the assembly of the application. It's kind of the reverse thing. It's very unique. No other Jframework had it till Angular brought it. Want to know more..http://www.infoworld.com/article/2612801/javascript/what-s-so-special-about-google-s-angularjs.html

How to use angular in your application? Just add ""to the html file.Else download Angular.js or Angular.min.js add the path with "script" as similar to the above. But make sure you do it before you call any Angular directive in the code.

When to use angular? Angular enable two way binding. Fast scripting. Support for lot of functions you want to add in to the website.

Let's see how it works. It starts with adding "" directive to the html structure elements as "", "div" etc..It defines the angular application. inside that we can add all the other directives. Remember !!! Per page there can be only one "ng-app" directive, also if you use google api to add Angular then you will have to use "data-ng-app" directive.

Basic directives need to know in Angular are "ng-controller" defines the controller function to handle the DOM."ng-bind" It's really easy way of binding dynamic data.

We are good to go now. The first angular application.

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> </head> <body> <div ng-app="HelloWorldApp" ng-controller="HelloWorldController"> <h1> Hello <text ng-bind="who"> </h1> </div> <script> var HWApp = angular.module('HelloWorldApp', []); HWApp.controller( 'HelloWorldController', ['$scope', function ($greet) { $greet.who = 'World!'; } ] ); </script> </body> </html

Hello

No comments:

Post a Comment