ANGULARJS: $routeprovider Vs $stateprovider

I have tried to consolidate the difference between $routeprovider Vs $stateprovider. 

Both the module does the same work as they are used for routing purposes in SPA. Though we have to decide which one fulfilling our requirement best.

S.No	$routeprovider	$stateprovider
1	It uses the AngularJS native module called ngRoute	It uses the third party module called ui-router to improve and enhance routing capabilities
2	ng-view can be used only once per page e.g. <div ng-view></div>	ui-View can be used multiple times per page e.g. <div ui-view>     <div ui-view='header'></div>     <div ui-view='content'></div>     <div ui-view='footer'></div> </div>
3	It renders the template from the $routeProvider.when()	It renders the template from the $stateProvider. state ()
4	ngRoute implements routing based on the route URL	ui-router implements routing based on the state of the application
5	ng-router uses $location.path()	ui-router uses $state.go()
6	‘ngRoute’ takes care of urls	‘ui-router’ takes cares of ‘states’
7		It passes information between states with the help of ‘$stateParams’.
8	In ‘ngRoute’ you link directive like below : <a href="#/home"> Home </a>	In ‘ui-router’ link directive are generally written as: <a ui-sref="homeState"> Customers </a>
9	Router provider: $routeProvider	Router provider : $stateProvider $urlRouterProvider
10	Syntax: $routeProvider.when('/customers', {     template: 'My Home' });	Syntax: $stateProvider.state(homeState, {   url: '/home,   template: 'My Home' })
11	No template named view directive	Template named view directive: ui-view="home"
12	Getting Params: $route (eg) $route.current.params.id $routeParams (eg) $routeParams.id	Getting Params: $state (eg) $state.params.id $staetParams (eg) $stateParams.id
13	Router start event: $routeChangeStart	Router start event: $stateChangeStart
14	Router success event: $routeChangeSuccess	Router success event: $stateChangeSuccess
15	Router error event: $routeChangeError	Router error event: $stateChangeError
16	Router update event: $routeUpdate	Router update event: --
17	Router not found event: --	Router not found event: $stateNotFound
18	Default View: $routeProvider.otherwise({redirectTo: '/home'});	Default View: $urlRouterProvider.otherwise('/ home ');
19	One view to another view: $location.path( "/home" );	One view to another view: $state.go('home');
20	One view to another view with params: $location.path( "/home/123" );	One view to another view with params: $state.go('homeState', {id:'123'});

ui-router does everything that the ng-route provides plus some additional features like nested states and multiple named views. This is very helpful in managing large projects. But if your project is small then ng-route will be good. 

NodeJS - Setup a HTTP / Local Web Server using custom port

We can run our web application on custom port which can be provided by the developer, here we can check that that the provided port is working on not.

Pre-requiste Installation

NodeJS

1.     Install npm install express

2.     Create server.js file

var express = require('express');

var app = express();

app.use(express.static(__dirname + '/www'));

app.listen('3000');

console.log('working on 3000');

3.     In parallel root folder, create www folder

4.     Put index.html or application folder inside www folder, refer below image: 

      

5. Start server by typing node server.js in command prompt.

6. open     localhost:3000 and index.html code will execute.

Happy Coding :)

NodeJS - Setup a HTTP / Local Web Server

Sometimes we need to test our web application on different devices before deploying it on actual production server, as we need to be sure that application is working properly and we can get time to fix any UI related issues.

To resolve this issue we can setup a localhost server using NodeJs. I have listed down few steps to setup a simple HTTP server or local web server.

1. Download and install NodeJS from https://nodejs.org.
2. Run npm install -g http-server 
3. Go to the path where application folder exists with index.html from command prompt.
4. Run http-server command from command prompt.
5. Open browser and run http://localhost:8080 and you should see your local website as mine.

Happy Coding :)

ANGULARJS: $HTTP

$http is a service for reading data from web services (data servers). The AngularJS $http service makes a request to the server, and returns a response.

Today I am going to show a very simple way to load external JSON file in AngularJS 1 :

Sample json file : data.json

{

"Person": [

{

"Name": "Swati",

"Location": "Office"

},

{

"Name": "John",

"Location": "Home"

}

]

}

index.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=" utf-8" />

<meta name="viewport" initial-scale="1.0" content="width=device-width" user-scalable="yes" />

<title>Load External JSON</title>

<script src="libs/angular.min.js"></script>

<script src="controller/loadController.js" type="text/javascript"></script>

</head>

<body ng-app="loadJsonPrj" ng-controller="LoadJsonCtrl">

<button type="button" ng-click="loadJson()"> Load External JSON </button>

<ul>

<li ng-repeat="data in getResponse">{{ data.Name+ ', ' + data.Location}}

</li>

</ul>

</body>

</html>

loadController.js

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

function LoadJsonCtrl($scope, $http) {

$scope.loadJson = function() {

$http.get('data.json').then(function(response) {

$scope.getResponse = response.data.Person;

console.log($scope.getResponse);

}, function(response) {

$scope.getResponse = "Something went wrong";

});

}

}

myApp.controller('LoadJsonCtrl', LoadJsonCtrl);

Output:

Happy Coading :)