Skip to main content

Posts

Showing posts with the label 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.org and 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 A...

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; }

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...

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/" >

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> <...