Getting Started with Angular2 and Bootstrap

Getting Started with Angular2 and Bootstrap

# Install Angular2 Cli
npm install -g @angular/cli

# Create new application
ng new application-name

# Start serving application, see browser localhost:4200
ng serve

# In src directory, install bootstrap using bower
bower install bootstrap –save

# Link bootstrap style to application, edit .angular-cli.json
# add new element to app->styles array
“bower_components/bootstrap/dist/css/bootstrap.min.css”

# Stop and again start serving the application and it is ready!

Better angular js validation messages using jquery validator

Angularjs validation messages requires you to

  1. Add lot of html markup
  2. Add validation rules to your html markup.

For simple, short forms this might be good but for big forms and regular use it will not fit. It makes html markup complex, making it hard for user to understand the form validation rules, change messages.

Before angularjs, in the time of jQuery plugins world, there was a plugin (and still exists) used for validations called jQuery Validator. This plugin allows you to keep rules, messages in single javascript object which is very easy to maintain. It also provides good range of validation rules along with custom rule creation.

This jQuery validator plugin can be used in angular js(the angular way), here it is Angular jQuery Validator.

Please see the documentation for how to get started.

It makes validation task really easy and manageable.

Cancel earlier http requests in angularjs

When we want data from last http request, data from earlier request (if any) need to be canceled.

// Code goes here

var canceller = $q.defer();
if(earlierRequest && earlierRequest.canceller)
{
  // Cancel earlier requests
  earlierRequest.resolve();
}
var earlierRequest = $http({
  url:'get_async_data.php',
  timeout:canceller.promise
}).then(function(response){
  // Data received
});
earlierRequest.canceller = canceller;

 

Add createMany method which posts multiple objects on strongloop api using loopback services

$resourceProvider.defaults.actions['yourCreateMany'] = {'method':'POST','isArray':true};

Recently I was trying to post multiple objects to strongloop api using angular loopback sdk services. There was error for doing so, “callback expects object received array”. This can be handled by setting

'isArray':true

in reource model, but as the loopback services file was getting generated on the fly I could not update the loopback services js file.

I have extended $resourceProvider default actions for my app, it worked., Hope you find it useful.