Archive

Author Archive

Angular 4: Understanding Components

If you have followed my previous post on how to use angular-cli to generate an Angular app you may have noticed that it generated AppComponent as the root,in this post we will have a closer look at it to understand what a component is.

The simplest way to define a component is a class which is decorated with an attribute and has an html view which get rendered into the DOM.I have taken the AppComponent example to explain how it compares to a C# class.

Angular Component

It looks pretty close to ASP.NET MVC controller or any C# class with an attribute and it has a view called app.component.html which will get generated into the DOM.

The key thing is the @Component decorator takes a JSON anonymous object in which we specify the template URL and the custom styles to be used for this component. Here is an illustration of this.

Component decorator

And this is how the root component is wired up to the index.html page.

<body>
      <app-root>Loading...</app-root>
</body>

Another interesting thing to notice is that the  component has a property name “title” and by the virtual of the fact that a class is decorated with @Component attribute angular will allow you to bind this property to the view (template) using the double moustache syntax i.e. {{ }} which is also referred to as interpolation.

one way data binding

This is called one-way data binding as the data flows from the object to the view but not both ways, however it is easy to implement a two way by using the [(ngModel)] syntax as shown below.

<h1>
  {{title}}
</h1>
<input [(ngModel)]="title" />

After saving your changes and the page has refreshed if you type anything in the text box it will be immediately be reflected in the h1 header as shown below.

Two way data binding

I hope this post has helped you if you are coming from a non angular background and to understand how thing works in angular.

Advertisements

Angular 2: Adding bootstrap css framework

In my previous post I showed you how to create an Angular 2 application using angular-cli tool. This post is a continuation of that and in this post I am going to show how to use node package manager npm to add bootstrap stylesheet and wire it up in the application.

I am going to open the nodejs command prompt and install the bootstrap css package to the project using the following command.

C:\>npm install ng2-boostrap –save

 

If you browse to the node_modules folder you can see the new folder bootstrap was created which contains all the stylesheets as shown below.

Bootstrap CSS added to the angular 2 project

In order to make the stylesheet available for the page we have to add the path of the file to the styles array which is defined in the .angular-cli.json file. Since it is an array you can add multiple stylesheets and the loader will take care of it.

.angular-cli.json

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ]

adding css location to the styles array

Now I am going to add some menu with the search text box and a jumbroton layout to give it a nice look.

<body>
  <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">NG Corporationa>
    div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Homea>li>
      <li><a href="#">Abouta>li>
      <li><a href="#">Servicea>li>
      <li><a href="#">Contacta>li>
    ul>
    <form class="navbar-form navbar-right">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search">i>
          button>
        div>
      div>
    form>
  div>
nav>
  <div class="container">
    <div class="row">
      <div class="jumbotron">
        <h1>NG Corporationh1>      
        <p>A place to use your creativity, innovation and passion to build exciting product for the world.p>
      div>
        <app-root>Loading...app-root>
      div>   
  div> 
body>

As you can see pretty standard bootstrap template and at the end we have our angular component with the custom selector “app-root”. Last thing we have to do is to run the following command in order to start the application.

C:\>ng serve

And here is the angular 2 application up and running with bootstrap styling.

bootstrap style applied to the website

Getting started with Angular CLI

March 19, 2017 3 comments

In this post I am going to show you how to install angular-cli and create a new Angular 2 application. It will be very useful if you are familiar with NodeJS, Node Package Manager(npm), TypeScript and Visual Studio Code (VSCode).

Lets get started with downloading NodeJs from https://nodejs.org/en/download/.

download node from nodejs.org

There are plenty of operating system to choose and since I am on Windows 10 64-bit, I am going to use the Windows Installer(.msi) 64-bit. This will install the nodejs runtime. Search and open the nodejs command prompt and install the angular-cli package using npm.

npm install -g @angular/cli

npm install angular-cli

If you are using a proxy server then you might have to set the "https-proxy " value in the npm configuration as shown below.

npm config set https-proxy http://myproxy.server.com

and after a while you will see that the angular-cli installation was successful.
angular-cli installation completed

Lets check the version of the angular-cli by using the following command.

ng -v

verify angular-cli version

As you see I am using nodejs version 6.9.2 and angular-cli is in rc1 although the current version is rc2 which has been released a couple of days ago.

So after all the required installation I’m now going to create a new application helloworld using the angular-cli.

ng new helloworld

ng new to create a new application

and you will see that the angular-cli has created a bunch of folders and files under the helloworld folder.

view the application folder structure

In order to run the application I’m going to use the ng serve command to run the application.

run the application

By default the application runs on port 4200 so lets browse to http://localhost:4200 and you can see the application is up and running and you can change the default port to any port by specifying the –p parameter to the ng serve command.

browse to the application

Lets open the project root folder using Visual Studio Code and modify the app.component.ts (TypeScript) file.

open the solution in visual studio code

As soon as I change the title property of the AppComponent to "Hello world from Angular 2" the page automatically refreshes and shows my changes, I don’t have to hit F5 or refresh the page at all.

page automatically refreshes

Congratulations you just created your first Angular 2 application using angular-cli.

CodeTrack

September 13, 2016 Leave a comment

A free .NET performance profiler and execution analyzer http://www.getcodetrack.com/

Custom filters in AngularJS

February 23, 2016 Leave a comment

In this post I am going to show you how easy it is to write custom filters in AngularJS and for the simplicity of the demo I am going to display a list of cron-jobs in a tabular data. Each job has details like the Id, action etc. and has a status which is represented in numbers like 0,1,2 etc. This may be suitable from a storage or system point of view but is not that user-friendly, so lets write a custom filter to transform numeric values into user-friendly status.

First we start with an AngularJS controller "CronJobsController" and it will be responsible for calling the cronjobs ASP.NET Web API.If the call is successful the returned data is assigned to $scope.jobs object so that we can bind the data to our view.

app.js

var app = angular.module('mainApp', []);
app.controller('CronJobsController', function ($scope,$http) {
    $scope.jobs = [];
    $http({
        method: 'GET',
        url: '/api/cronjobs'
      })
      .then(function(response) {
        $scope.jobs = response.data;
      },function(reason) {
        $scope.error = reason.data;
      });
});

Next step is to wire up the "myApp" to the HTML page by using the ng-app directive.

CronJobs.html

<body ng-app="mainApp">
    <!--Html omitted for brevity -->
</body>

Now I am going to create the view by adding some table mark-up and use bootstrap to format the HTML table. For data binding I’m going to use the ng-repeat directive to enumerate through the jobs and bind the data to the table.

CronJobs.html(cont.)

<div class="row">
    <!-- Jobs Controller Scope -->
    <div class="col-md-12" ng-controller="CronJobsController">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Correlation Id</th>
                    <th>Action</th>
                    <th>Created</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="job in jobs">
                    <td>{{job.id}}</td>
                    <td>{{job.correlationId}}</td>
                    <td>{{job.action}}</td>
                    <td>{{job.created | date:'dd-MM-yyyy'}}</td>
                    <td>{{job.status}}</td>

                </tr>
            </tbody>
        </table>
    </div>
    <!-- End of Jobs Controller Scope -->
</div>

Lets run the application and we can see that everything is working perfectly.

Cron Job Display Data without filter

Now we are going to build our custom filter "status" which will return a user-friendly status based on the numeric value.

statusfilter.js

/// <reference path="app.js" />

app.filter('status', function() {
    return function(status) {
        switch(status) {
            case 0:
                return "Not Started";
            case 1:
                return "In Progress";
            case 2:
                return "Completed";
            default:
                return "Unknown";
        }
    }
})

Nothing special here a simple switch case statement returning user-friendly text and all is left is to apply this filter to our model’s status property as shown in below code snippet.

<td>{{job.status | status}}</td>

And after applying the filter we can see the user-friendly status is displayed instead of the numbers.

Cron Job Display Data with filter

It’s a very simple yet powerful feature and another reason to love AngularJS.

ASP.NET Core – Exceeds 1.15 Million request/s

February 20, 2016 Leave a comment

Congratulations to the ASP.NET Core team for hitting this amazing milestone of 1.15 Million request/s http://www.ageofascent.com/asp-net-core-exeeds-1-15-million-requests-12-6-gbps/ . Now is an amazing time to work with ASP.NET Web API and AngularJS.

Shaping up with Angular.js

November 30, 2015 Leave a comment

This is one the finest and free AngularJS webcasts I have seen so far . If you are new to AngularJS development and want to learn AngularJS but have no clue where to start then this is tutorial to go for.

https://www.codeschool.com/courses/shaping-up-with-angular-js .

Thanks to the guys at codeschool to make this fun driven tutorial which is so exciting to watch and learn. 🙂 ❤