ngx-bootstrap in angular 2

Create a new project

ng new wakeGenie

Create a new component

C:\Development\Wakegenie\webApp>ng generate component modal

Install bootstrap in angular 2

Four important features of Angular 1

Quick reference for Angular 2 changes

Changes in Angular 2 compared to angular 1

• Ngref= href property binding. Browser module has definition to *ngref. Any directive that changes the directive is known as structural directive
  *ngFor
• No watchers and No digest cycle
• Binding syntax has been changed
• Property binding is done using [ ]

                  Element property  < Img [src] = "vehicle.imageurl">

Comparison backbone vs ember, knockout vs ember, ember vs angular 1

Comparing backbone vs Ember is not fair

Backbone

• Small set of library sit on top of jquery
• We need to write own abstractions to sit on backbones core part
• Uses collections and models
• Does not try to abstract everything away rather it leaves to us
• Developer who does not mind writing code his way this is a fine choice

Ember

• If we do not want every single detail in your application focus  solving the problem on hand  instead how you solve Ember is a good choice

Why angular and angular 2?

Simple steps to use ng-route in angular 1

•  Include a reference to ng-route file (angular-route.min.js)
•  Add ng-route as module dependency (In app.js file)
•  Add a ng-view directive

Running angular applications in IE 8 and other browsers

We recently published a angular application to production. There was couple of tickets created with "Application failing in Enterprise mode in IE" . 

Batarang chrome extensions for debugging angular applications

As we are using angular to develop SPA applications, this chrome extension would be helpful for debugging.

You can add this to your chrome extension from here.

https://chrome.google.com/webstore/detail/angularjs-batarang-stable/niopocochgahfkiccpjmmpchncjoapek?hl=en-US

Advantages.

1   1) We would be able to visually select the scope

Custom Csv import for angular UI-Grid

We can have a customized csv import for angular UI-Grid.

Exception handling in Angular using $exceptionHandler

Handling uncaught exception

Edit in plnkr

Steps involved

• Use $provide service in config section as shown below

Note:We need to customize the handler action

In the example shown below $scope is not defined. This exception is handled and alert is shown to the user

Angular ng-class for error message

We can use angular ng-class to change the style based on error. 

Edit in plunker

ng-Class : Directive allows us to dynamically set CSS classes on an HTML element by data binding an expression that represents all classes to be added.

Steps involved

• Include css class
• Use control-group class from bootstrap
• Specify error condition 

Angular Patterns

ng-Pattern : We can use angular patterns to validate input type. adds the pattern validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls

Edit in plunkr

Steps involved

• Specify input type
• Specify the angular pattern in regular expression

Issue with installing protractor in windows

I was trying to install protractor in  windows 7. However I was no able to install it easily.
I have listed the steps which you need to perform in order to install protractor in windows 

npm install -g protractor

The step involves.

1. Before running the above command install python 2.7.3 https://www.python.org/download/releases/2.7.3

Angular pass selected item

We need to pass the selected list from the table. This can be achieved by passing the selected item list as shown below

• On ng-click  we need to pass the selected item list as parameter

• We can fetch the selected list in java script function as shown below

EDIT IN PLUNKER

Angular two way binding

                       

Two way data binding:  When the view changes model changes and when the model changes view                                        changes

Note: In angular we do not need observable as we need in Knockout

Edit in plnkr

Angular Pagination Directive

To implement paging in a table we need drpagination directive. 

It is available at drPagination

Edit in pulker

Excel export from JSON

                               

I have a previous posts on generating Excel file from a table. Unfortunately they do not work in IE. We can generate Excel file from a JSON file as shown below

What do we need?

• JSONtoCSVConverter javascript file.
• JSON Data
• Jquery 

This line is important
 JSONToCSVConvertor(data, "Blog Report", true);

Why Protractor?

                           

Use : End to End testing

Advantages

• Test like a user
• Improve test efficiency
• Pain point in testing is it is repetitive. It takes care of it
• It always remembers to check everything
• Protractor runs while we are working
• It would interact with the browser faster then humans
• It would enter data faster then humans

Note: It is built on selenium

For more information :
https://docs.angularjs.org/guide/e2e-testing

Angular - Export to table (XML, PDF, JSON..)

       

we can export data from a table into various format including 

Json, Xml, Pdf .....

What do you need

• Angularjs
• Jquery.js
• Files referenced below

Edit in plunker

Note: This example would not run in IE 

Angular export to Excel

Note: You can refer to my other post where it would support different flavors like Excel, Pdf

Edit in plunker new

Note: For excel it does not allow "-" character. We have to use replace function

$scope.SelectedUsers.selected.Text.replace("– ", "-- ")