Category Archives: angular

Angular 2 with NPM hello world

Step 1 : Installing Nodejs
To access to the Node Package Manager (NPM) and run our server, we need to first install Nodejs.
You may already have it installed. To check whether it’s installed, visit your console and type:
node -v
If it goes unrecognized, you will need to visit Nodejs.organd visit the downloads page. Choose the installer appropriate for your OS, and install it.

Once complete, reload your console/command line, and re-run the
This time it should provide you with the version installed.
Step 2: Installing Angular

We’re going to use the Angular CLI to create our Angular app. Let’s install it at the command line through NPM.
npm install @angular/cli -g
  
Give it some time to install once installed go into the any folder where you prefer to store your projects and then run the following command:
ng new mean
cd mean
Once you’re in the new project folder, we’re going to run a command with the Angular CLI that will create a build of our project. We need to do this because our server is going to look for a /dist folder to serve the files. Run below command to build your project.
ng build
Now Run the Angular 2 application by typing below command.
ng serve
Now, open the browser then go to 
http://localhost:4200
you should see angular page.

Close the running Angular app first by press ctrl+c

103 total views, 1 views today

javax.servlet.ServletException: Circular view path

Problem :

javax.servlet.ServletException: Circular view path [error]: would dispatch back to the current handler URL [/latestOrder] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.)



Solution :

You’ve annotated the controller method as producing JSON or String or any other object . You probably want to annotate the method with @ResponseBody and change its return type to allow you to return an object representation of the JSON that you want to include in the response


Preview:
  @RequestMapping(value="latestOrders",method = RequestMethod.GET)
public @ResponseBody List<Order> listProducts(Model model) throws JMSException{
List<Order> list=new ArrayList();
list.add(staff1)
return list;
}

114 total views, no views today

Display data from Json in Angularjs

Problem :

I’m using the following code, witch includes the app.js, page.html and data.json The app.js seems to work fine, but the view (page.html) isn’t display any data..

HTML :

<div ng-controller="tablesController" style="padding-left: 15px">
<div class="ng-scope">
<div class="row ng-scope"></div>
</div>
</div>

<div>
<md-list flex> <md-list-item class="md-3-line"
ng-repeat="item in hotelList" ng-click="null"> <img
ng-src="{{item.hotel_data_node.img_selected.thumb.l}}?{{$index}}"
class="md-avatar" alt="" />
<div class="md-list-item-text" layout="column">
<h3>{{item.hotel_data_node.name}}</h3>
Rating :
<h4>{{item.hotel_data_node.extra.gir_data.hotel_rating}}</h4>
</div>
</md-list-item> </md-list>
</div>


JSON:
{
"data": {
"1061221765445223317": {
"hotel_geo_node": {
"name": "Payal Hotel Panvel",
"tags": {
"property_budget_category": "test"
}
}
}



JSON:
{
"data": {
"1061221765445223317": {
"hotel_geo_node": {
"name": "PayalHotelPanvel",
                                "tags": { "property_budget_category": "test"
}
}
}
}


Solution :

You are missing your view from your controller, you have to include your view into your controller.
i.e 
HTML :

<div ng-controller="tablesController" style="padding-left: 15px">
<div class="ng-scope">
<div class="row ng-scope"></div>
</div>
</div>

//included in CONTROLLER now
<md-list flex> <md-list-item class="md-3-line"
ng-repeat="item in hotelList" ng-click="null"> <img
ng-src="{{item.hotel_data_node.img_selected.thumb.l}}?{{$index}}"
class="md-avatar" alt="" />
<div class="md-list-item-text" layout="column">
<h3>{{item.hotel_data_node.name}}</h3>
Rating :
<h4>{{item.hotel_data_node.extra.gir_data.hotel_rating}}</h4>
</div>
</md-list-item> </md-list>
</div>
</div>

84 total views, no views today

Unknown Provider : $locationProviderProvider <- $locationProvider

Error :

Unknown Provider : $locationProviderProvider <- $locationProvider <- myCtrl 

also got this error.

You’re allowed to inject a $location into a controller, but not a $locationProvider.

Instead, the $locationProvider can be injected into a config method:


Solution :

var app = angular.module("myApp", []);

app.config(function($locationProvider) {
$locationProvider.html5Mode(true);
});

app.controller("myCtrl", function($location) {
$location.path("/some/path");
});


And since I made this additional mistake: it’s not just that you should add an app.config bit, but also remember to remove $locationProvider from the controller arguments, or you’ll keep getting this error.


Also you have to add <base> tag in your html file <head> tag

 <base href="/myDemoProject/">

97 total views, no views today

Angular alert will not display after being closed

Problem :

when you try to close the angular success and error pop up using manullay or using alert(‘close’) event.


HTML
  <div class="cacheSuccessMessage alert alert-success alert-dismissable-success">
<span class="cacheMessageHeader"><strong></strong></span>
<div class="cacheMessageDetails"></div>
</div>
JS:
$(".alert-dismissable-success").fadeTo(4000, 500).slideUp(500,
function() {
$(".alert-dismissable-success").alert('close');
})

so when you fire event of close Data-dismiss completely removes the element. 


Solution : 

 Use jQuery’s .hide() or angular hide method instead to hide error.
and modify you HTML and JS as 

HTML
  <div class="cacheSuccessMessage alert alert-success">
<span class="cacheMessageHeader"></span>
<div class="cacheMessageDetails"></div>
</div>

JS:
$(".cacheSuccessMessage").fadeTo(4000, 500).slideUp(500,
function() {
$(".cacheSuccessMessage").hide();
})

85 total views, no views today