AngularJS Demo Application

Rajendra Kumar Sahu

Rate me:

4.33/5 (4 votes)

14 Oct 2014CPOL4 min read

26K

1.1K

The article is about how to use AngularJS framework to write a MVC pattern client side application.

Download plunk.zip - 2.4 KB

Introduction

The article is about how to create a demo MVC pattern client side components using AngularJS framework using Plunker and see how is Angular helpful.

Background

AngularJS Demo Application

Here is my first scoop from Angular with the open source tool plunker.

Open any browser of your choice and paste http://plnkr.co/edit/?p=catalogue.
This opens a nice editor using which you can begin building blocks for application. Plunker is open source and handy to use.

Check out the index.html found in attached zip file plunk-Op1pfy7lVSvI9UGt83ly.zip. I thought how could I evaluate the value of 569 divided by 14 since the plunker was open I tried using it along with a sample demo code too.

In the editor search for list of packages for angular and add the latest version of javascript bundle and it adds automatically. Check out the src of the js file https://code.angularjs.org/1.2.25/angular.js. Currently, it points to Angular CDN. This is not mandatory to have that from CDN. What is CDN? We will come up what CDN is in another tip sometimes. However, angular.js can be used as is or can be downloaded to local box or hosting server where the application code is hosted.

DataBinding

The data binding syntax in Angular is couple of curly braces, so look at what we did in the html page.
{{569/14}}, but in preview window nothing happened. Why that happened because we have not provided the range on which the Angular would check its attribute to work on. In the example if we put ng-app now everything inside of the begin and end of <html> tag is in charge and it would now evaluate the value of the above division. You can notice that even if the attribute is made a mix of upper and lower case that works fine and Angular resolves it. This can be placed any where in the html page with a DOM element example is a div or other as per requirement.

Controller

The ng-controller is the attribute used for defining a controller and needs a name like MainController as is used for the <body> element look at the code in index.html. Also check the declaration of the controller with $scope. The controller does not invoke by itself in upper version of angular. However it can be invoked in different way.

In typical JavaScript if there would be any typographical error the function breaks and does not work, however the same is not the case with Angular. In case it does have any typo it skip and moves forward to execute other lines of code.

Service

Most of time application require to fetch data from database or from any xml file to bind data. In that case request need to be made to server to fetch data. $http is the object that is used to get, put, post, delete etc.

var PersonController = function($scope, $http) {
    $scope.user = $http.get("/users/1783");
};

As one can notice a get request is sent to the server and the return values are assigned to a user object. This won't work as get request to server is asynchronous one has to check for the response and once successfully pulled then assign to the person object else if there is any error write log to console window of browser.

When a request is sent to server is returns a promise to send data back so then is used in the script.js file.

It is a good learning of above from source http://www.pluralsight.com/

Model: Check out the ng-model directive from the index.html to have an idea how does a model defined and works.

Things to remember:

Many browsers comes with Developer Tools and one should make use of those to check the code client side during development.
More on the remaining features would be uploaded next time. The zip file is attached having code to try out. I am using Chrome. Once can find this Tools > Developer Tools click or press control F12, firbug from Mozilla is also a good tool.

The plunk-Op1pfy7lVSvI9UGt83ly.zip file contains some demo code and can be copied on to inetpub\wwwroot\demo

Where demo is a virtual directory created and inside that paste all the file after extracting from zip file and check in browser.

Thanks,
Rajendra Kumar Sahu
Minfire Solutions.

Using the code

A brief description of how to use the article or code. The class names, the methods and properties, any tricks or tips.

Blocks of code should be set as style "Formatted" like this:

HTML

<script data-require="angular.js@*" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script> <link href="style.css" rel="stylesheet" /><script src="script.js"></script>

<!DOCTYPE html>
<!--
Look at the ng-app attribute to html tag. This is 
-->
<html ng-app="">

<!--
Look at the ng-app attribute to html tag. This is 
-->

<head>
  <script data-require="angular.js@*" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">
  <h1>Hello Plunker!</h1>
  <!-- Data binding syntax -->
  {{569/14}}

  <!-- the ng-controllter attribute is used, things to remember it does not automatically invoke in latest version of anular only 1.2.25 does support declaration and invoking in global scope-->
  <h1>
      {{message}}
    </h1>
  <div>{{error}}</div>
  <!--
    <div>Firstname: {{person.firstName}}</div>
    <div>Lastname: {{person.lastName}}</div>
    <div>
      <img ng-src="{{person.imageSrc}}" title="{{person.firstName}} {{person.lastName}}"
    </div>
    -->
  <div>{{SearchName}}</div>
  <form>
  <!-- look at the ng-model attribute and type in text box and see the typed value in SearchName model-->
    <input type="search" placeholder="Type The Text to see" ng-model="SearchName" />

  </form>
  <div>
    UserName: {{user.name}}
  </div>
  <div>
    User Location: {{user.location}}
  </div>
  <div>
    <img ng-src="{{user.avatar_url}}" title="{{user.name}}" </div>
</body>

</html>

Points of Interest

While learning AngularJS I am enthralled to see how the client side MVC pattern can be used and the availability of various directives, attributes gives more freedom to developers to write application using framework.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Rajendra Kumar Sahu

Software Developer (Senior)

India

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

AngularJS Demo Application

Introduction

Background

AngularJS Demo Application

DataBinding

Controller

Service

Using the code

Points of Interest

License

Comments and Discussions