Learn AngularJS: Hour 2

In hour 1 of this series we learnt to get started with AngularJS. In this hour we will see Angular Templates and how AngularJS app can be embraced into a pattern.

Let us start with writing a simple web application with static template. In below application we are printing name of the authors in HTML unordered list.


<body>
    <h1>Authors : 8</h1>
   <ul>
       <li>Dhananjay Kumar</li>
       <li>Pinal Dave</li>
       <li>Glen Block</li>
       <li>Dan Wahlin</li>
       <li>Julie Learman</li>
       <li>Mahesh Chand</li>
       <li>Prabhjot Singh</li>
       <li>Gaurav Mantri</li>
   </ul>
</body>

We will get application rendered as below and authors are printed in HTML using static template. Below rendered page is pure static HTML page.

clip_image002

Next we will learn to populate Authors dynamically using AngularJS. Before we get into implementation of this, let us understand that AngularJS Apps can be created adhering any MV* pattern. For this implementation we will follow Model-View-Controller pattern. Let us start with creating controller. Controller can be created in a separate JavaScript file. I have created a JavaScript file Product.js.

Author.js

 


var AuthorApp = angular.module('AuthorApp', []);

AuthorApp.controller('AuthorController',function($scope)
{
    $scope.authors =
        [
                { 'name': 'Dhananjay Kumar' },
                { 'name': 'Pinal Dave' },
                { 'name': 'Glen Block' },
                { 'name': 'Dan Wahlin' },
                { 'name': 'Mahesh Chand' },
                { 'name': 'Prabhjot Singh' },
                { 'name': 'Julie Learman' }
       ];
});


Let us examine the controller class,

  • In first line we are creating Module.
  • In second line we are creating Controller. Controller is a function which takes $scope as parameter.
  • Then adding authors JOSN array in scope of the controller. This is Model.

In Angular Controller is a constructor function that takes $scope parameter.

Once we have Controller in place we will have to create View. View simply displays model through templates.

image

View and Template get created in HTML. We will bind View with Controller and Angular will project data from Model on the View. On the View we are using various Angular directives.

image

We created AuthorApp module and AuthorController controller in Author.js. Now if you see we bind View and Controller in three steps,

  1. Implicit Scope Declaration
  2. Scope Inheritance
  3. Model-View Data Binding

In first step we did Scope declaration by setting ng-app directive to Angular module name.

clip_image002[6]

Then Scope Inheritance is done by setting ng-controller directive. After setting ng-controller directive scope of body is set to controller we created in Author.js

clip_image004

Now any element inside this body can bind to array of controller.

clip_image006

These are simple steps you need to follow to work with Angular Template and Controller. For your reference code of View an Template is given below,

 


<!DOCTYPE html>
<html ng-app="AuthorApp">
<head>
    <title>Angular Demo</title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Author.js"></script>
</head>
<body ng-controller="AuthorController">
    <ul>
        <li ng-repeat="author in authors">
            {{author.name}}
        </li>
    </ul>
</body>
</html>


In next hours we will get into other aspects of AngularJS.

About these ads

Microsoft Acquires InMage : a boom to Business Continuity

Microsoft is aggressive when it comes to Cloud Computing and Microsoft Azure. To add further on this Microsoft has acquired InMage .

image

InMage is seen as an innovator in the emerging area of cloud-based Business Continuity. Ability to backup, replicate and recover of data and applications in case of system failure is known as Business Continuity.

From Microsoft Takeshi Numoto – Corporate Vice President, Cloud and Enterprise Marketing wrote on his blog about acquisition, “As the productivity and platform company for the mobile-first, cloud-first world, Microsoft is committed to solving this challenge for customers. This acquisition will accelerate our strategy to provide hybrid cloud business continuity solutions for any customer IT environment, be it Windows or Linux, physical or virtualized on Hyper-V, VMware or others. This will make Azure the ideal destination for disaster recovery for virtually every enterprise server in the world. As VMware customers explore their options to permanently migrate their applications to the cloud, this will also provide a great onramp

Microsoft may integrate InMage Scout technology with its Azure Site Recovery Service. This will add lot of values to customers for business continuity with power and scale of Windows Azure Cloud.

I am seen this merger will help Microsoft Mobile-First, Cloud-First strategy.

Microsoft introduces Cloud Competencies Programs for Partners

For long time Microsoft has been following “Put Partner First” in their go-to-market strategy, at least when it comes to their cloud platform Microsoft Azure. On 14th July 2014 at World Partner Conference 2014, Microsoft introduced new programs for their partners in cloud competencies. They announced it as “Integrating the Cloud into the Microsoft Partner Network”. With the announcement they introduced following competencies,

  1. Small and Midmarket Cloud Solutions
  2. Cloud Productivity
  3. Cloud Platform

Small and Midmarket Cloud Solutions competencies are for the partners selling Office 365 to the small and mid-market customers.

Cloud Productivity competencies are for the partners deploying Office 365 for Enterprise customers.

Cloud Platform competencies are for the partners working with PaaS and SaaS on the Microsoft Azure.

image

After introducing new competencies, Microsoft discontinued Cloud Accelerator, Cloud Deployment and Azure Circle Programs. To improve partners’ interest in Cloud , Microsoft is taking various steps like waiving first year fee for Silver cloud competencies , introducing Signature Cloud support etc.