AngularJS : Setup and Basics

AngularJS is a JavaScript framework that makes it easier to implement RIA web applications. It is not a library, but a framework for building dynamic web pages. It focuses on extending HTML and providing dynamic data binding, and it plays well with other frameworks (e.g., jQuery).

There are 2 types of javascript libraries:

  • DOM manipulation libraries
  • MVC frameworks

The problem with the old style traditional way was that you spend a lot of time trying to update the DOM using normal javascript or jquery etc. This is what angular Js and libraries like it try to solve. They connect data and the html so if data gets updated, html get updated automatically and vice versa without having to do it manually.  Instead of manipulating the DOM directly, you annotate your DOM with metadata (directives), and Angular manipulates the DOM for you.

The most famous pattern that is used widely today is MVC or Model-View-Controller. Similar to MVC, there is another pattern called MVP or Model-View-Presenter. AngularJS is an MV*  or MVW (model view whatever) framework.  The Model is that define your data. In case of javascript its some variable. the view is your html. The model and the view are bound to each other via controller/model view etc. Angular doesnt care what you call them. We will see how angular bound these in later post. Angular gives you a lot of flexibility to nicely separate presentation logic from business logic and presentation state. Angular can use jQuery if it’s present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite. If you are building a single-page app (where page doesn’t loads every-time user clicks something or interacts.) or the you do a heavy DOM manipulation when new data comes in , AngularJS will be perfect for you.

Before we go any further, lets first take a look into custom attributes in html. You can add new attributes to your html elements which may not be standard html. It wont effect your view but it will be there in the memory. Lets see this with an example:


<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
<body>
<h1 my-attribute="qwerty" id="heading">Custom attributes</h1>
</body>
<script >
console.log(document.getElementsByTagName("h1")[0].getAttribute("my-attribute"));
</script>
</html>

So we had an custom attribute that browser doesnt knows about still we are able to access that from our javascript code. Angular utilizes this to have custom attributes (ng-) to the standard html tags and searches this in your html.. HTML5 has an official version of this called the data attribute. So you can add ‘data-‘ to any of your custom attributes and its an valid html. If you want to be html5 compliant you can use data-ng- something  and angular will also search for it.

Lets write our first program :


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body ng-app="">
<div>
<input type="text" ng-model="name" placeholder="Enter a name here">
<h1>Hello, {{ name }}!</h1>
</div>

<script
src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
</body>
</html>

Notice that we are loading angularjs via CDN. Its a good practice to load them at the end. Remember to check AngularJS’s website for the latest version of AngularJS.

angular_post1_firstapp

AngularJS extends HTML with ng-directives.

The ng-app directive defines an AngularJS application. Without this tag, the AngularJS process does not start. It could be on any element – <html>,<body>, <div> etc. The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.

The ng-model directive binds element values (like the value of an input field) to the application, to set up bi-directional data binding on the ‘name’ model on the page. Bi-directional data binding means that if you change data on the back end, your changes will show up in your view automagically.

We used angularJS expressions  to display the data ‘name’ in the directive template called {{ name }}. AngularJS expressions are written inside double braces: {{ expression }}. AngularJS expressions binds data to HTML the same way as the ng-bind directive (<p ng-bind=”name”></p>).  AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables, ex. {{ 5 + 5 }} or {{ firstName + ” ” + lastName }}

The ng-init directive initialize application data. Normally, you will not use ng-init. You will use a controller or module instead.


<div ng-init="x=10;y=5">
X: <input type="number" ng-model="x"> Y: <input type="number"
ng-model="y"> X*Y: {{ x * y }}
</div>

angular_post1_ngInit

 

The ng-repeat directive repeats an HTML element, objects etc.


<div ng-init="names=[{name:'Dhananjay1',skills:'Javascript'},
{name:'Dhananjay2',skills:'Java'},
{name:'Dhananjay3',skills:'SQL'}
]">

<ul>
<li ng-repeat="x in names">{{ x.name + '=>' + x.skills }}</li>
</ul>

</div>

angular_post1_ngRepeat

The ng-disabled directive binds application data directly to the HTML disabled attribute.  The ng-show directive hides or shows an HTML element.


<div ng-init="checkBox=true">

<p>
<input type="checkbox" ng-model="checkBox" />Button
</p>

<p>
<button ng-disabled="checkBox">Click Me!</button>
</p>

<p ng-show="checkBox">Disable :{{ checkBox}}</p>
</div>

angular_post1_ngDisableShow

The ng-click directive defines an AngularJS click event.


<div ng-init="count=0">

<button ng-click="count = count + 1">Click Me!</button>

<p>ButtonClicked : {{ count }} </p>

</div>

angular_post1_ngclick

Play around with it more to get a feel of angular. Refer to official site and youtube, codeschool etc. Next we will see how to structure your app in the recommended manner.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: