AngularJS : Developing your first application – Part 1

Its been more than a month since I started with AngularJS and based on what I have learnt so far I am planning to write couple of blog posts on how to get started with writing your first angular application.For the purpose of these post I’ll be developing a very basic application (nothing fancy) which would display current and historical weather information for a place.So lets get started…

What is AngularJS

AngularJS is basically a frontend development framework for web applications developed and maintained by google along with a vast community.It is primarily used for developing Single page web applications or SPA.

As per Wikipedia:

AngularJS is an open-source web application framework, maintained by Google and community, that assists with creating single-page applications, one-page web applications that only require HTML, CSS, and JavaScript on the client side. Its goal is to augment web applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

As per AngularJS.org

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Angular is what HTML would have been had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in what do I have to do to trick the browser into doing what I want?

Development Environment

To get started with AngularJS you need basic knowledge of HTML,JavaScript and CSS.If you are already using JavaScript or JQuery as part of your earlier web applications it will be helpful and also using angular you would end up writing much more structured JavaScript.

As far as development environment or IDE is concerned most probably you would be able to use your existing web application development environment as almost all IDE (which i know) support  HTML,JavaScript and CSS.As i am from .NET background I have been using Microsoft visual studio and it is very easy to develop AngularJS based application using it.

But more interestingly there are large number of web based /online  development environments which can be used to develop these  applications.Few notable ones which i tried are Codenvy,Plunker and jsFiddle.Here is list of few development environments.

You can either download angularJS locally or include the scripts from CDN.We will be using the CDN approach.Below is the code snippet for including the CDN for version 1.2.21.

<script src="https://code.angularjs.org/1.2.21/angular.js"></script>

Angular Directives

Before starting angularJS development we need to be aware of few fundamental concepts of AngularJS.One of them is directives. Directives are markup on DOM elements (attribute,element name,CSS class etc) which attach some dynamic behavior to those elements or transform those elements.We will get into more details on how it works in future posts but for now just understand that basic html is static and if you want to attach some behavior e.g. event handling,data binding,looping etc to these elements you need use directives.

ngApp Directive

First directive that you will be using in any angular application is ng-app directive.ng-app directive specifies the root element of application from angular perspective and essentially tells that everything inside this root element comes under angular scope.

Angular compiler assumes that no other framework will be doing any manipulation under this root node.Angular considers everything under the root node (i.e. node marked with ngApp directive) as a template which angular’s DOM compiler can manipulate.You can use this on any html element e.g. <HTML> or <BODY>.

For our weather information application we will add ng-app directive to body element and also add text box and a button.On the click of the button we will retrieve the weather information of the place specified in textbox.Thing to notice here is how we are going to bind event handler for the click button.Here we will use another directive called ng-click  which will take the JavaScript function for event handling.

<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
</head>
 <body ng-app>
 <div>
 <label for="Name">Name of the Place :</label>
 <input required="" name="Name" type="text"/>
 <input type="submit" ng-click="getWeatherData()" value="Get Weather Info" />
 </div>
 </body>
</html>

Lets hold it here for some time and we will define this function once we get into Controllers in next section.Point to understand here is that whatever angular “stuff” you need to use has to be placed below the root element (i.e. element marked with ng-app)

Controllers,Scope and Data binding

Few more important concepts for getting started.

Scope

In very simple terms if you are familiar with MVC pattern ,scope is similar to application model(“M” in MVC).You can have variables defined on scope which can be bound to DOM elements using directives enabling two way data binding e.g. values for labels and textbox.Also you can have functions defining behavior which can be attached to DOM elements e.g. click event handlers.Scope variables can be initialized and manipulated in Controllers.

Controllers

As per AngularJS documentation.

In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope.

Basically controller is a JavaScript function in which angular scope variable can be injected,initialized ,manipulated .Again controller is similar in nature to MVC controller(“C” in MVC).Controllers can be attached to DOM elements using ng-controller  directive.

Lets define Controller for our sample application.

<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
</head>
 <body ng-app>
 <div ng-controller="WeatherController">
 <label for="Name">Name of the Place :</label>
 <input required="" name="Name" type="text"/>
 <input type="submit" ng-click="getWeatherData()" value="Get Weather Info" />
 </div>
 </body>
</html>

Now at this point we will have to introduce JavaScript code in our application.If you see the code above I already have a script.js file included in my html where I would be writing code for my controller as shown below.

  var WeatherController = function($scope){
   //Nothing as of now
    };

So WeatherController is just a javascript function which takes $scope  variable as argument.Every controller function has an associated scope object.This is the scope we talked about in earlier section.Whichever property or behavior you want to be propagated to DOM has to be defined in this Controller function as part of this $scope object.Lets see how to this binding in next section.

Data binding

For achieving basic one way data binding we use angular expressions.For specifying angular expression we use double curly brace notation {{ <expression> }}. Expression could be a arithmetic statement like 1+2 or a scope variable or a complex expression involving various scope variables.This is a short notation for using ng-bind directive i.e. below two code snippets are same but the first one is more prevalent.

<h1>{{title}}</h1>

<h1 ng-bind="title"></h1>

One way data binding means that any changes from controllers will be propagated to View (which is the html) but not the other way round.

There are other scenarios where you would require two way data binding like for input fields.In case of two way  binding values from controllers get updated to Views and vice versa.We achieve two way binding using ng-model  directive.Below is the code for our sample application where we are using one way binding to display a title and Info and two way binding to take input for place for which weather information has to be shown.

<head>
<script data-require="angular.js@*" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
</head>
 <body ng-app>
 <div ng-controller="WeatherController">
 <h1 ng-bind="title"></h1>
 <label for="Name">Name of the Place :</label>
 <input required="" name="Name" type="text" ng-model="place" />
 <input type="submit" ng-click="getWeatherData()" value="Get Weather Info" />
 <div><h3>{{info}}</h3></div>
 </div>
 </body>
</html>

Below we are adding corresponding logic to Controller function.Basically we are defining the title and place variable and some dummy code in getWeatherData() function which will display a text in the info variable of the scope.

var WeatherController = function($scope) {
  $scope.title = "Weather Information";

  $scope.getWeatherData = function() {
    $scope.info = "Fetching weather information for "
    + $scope.place +"...";
  };

};

Now we are ready with our bare bone application which we can run and interact with.

In next post we will explore some more angular concepts ,few more directives and will try to make our application little “useful” by calling external REST based services for getting weather information.

Click here to play with the current application and checkout the code.

Also here is a link to excellent pluralsight course on getting started with Angular JS by Scott Allen.