Anil Singh | Code-sample.com

Angular2 Routing provides us to navigation and URLs manipulation capabilities. This post helps us to learn application “Routings” in Angular 2. In the below routing example I am using Angular 2 for the client side and ASP.NET Core with single page application (SPA) for the server application. “The Router is use to map applications URLs to application components. There are three main components that you are using to configure routing.” 1.      Routes : - It uses to describe our application's Routes. 2.      Router Imports : - It uses to import our application's Routes. 3.      RouterOutlet : - It is a placeholder component and use to get expanded to each route's content. 4.      RouterLink : - It is use to link to application's routes. All above directives are provided by the Angular RouterModule package. Angular2 - Routing Concepts What is Routing in Angular...

Search Keywords :- [Angular 2 router link directive,  Angular 2 router-outlet directive,  Angular 2 rout config , Angular 2 Route Params] For live example, go to plnkr  http://embed.plnkr.co/vjf9Zz/ The Route Params :-  The route   parameter  is used to map given URL's parameters based on the rout URLs and It is an optional parameters for that route. Syntax :-               params : {[key: string]: string} Example, @RouteConfig([          {path:  '/employ/:id' , component: employe, name:  'emp' }, ]) Router-outlet directive :-  Router-outlet directive is used to render the components for specific location of your applications. Both the template and templateUrl render the components where you use this directive. Syntax :-   <router-outlet></router-outlet> Router-link direct...

Router-outlet directive: -  Router-outlet directive is used to render the components for specific location of your applications. Both the template and templateUrl render the components where you use this directive. Stayed Informed - Angular 4 vs. Angular 2 Syntax:- <router -outlet > < /router-outlet> Router-link directive:-  Router-link directive is used to link a specific part of your applications. Syntax:- <router -link > < /router-link> Example, <a [ router-link ]="['/ AboutMe ']" > About Me </a> The Route-Config: -   The route config is used to map components to URLs. Syntax:- @ RouteConfig([ {path : '/' , component: Home_Component , as : 'Home' }, {path : '/AboutMe' , component: AboutMe_Component , as : 'AboutMe' } {path : '/ContactMe' , component: ContactMe_Component , as : 'ContactMe' } ]) ...

Search Keywords :- [Angular 2 router link directive,  Angular 2 router-outlet directive,   Angular 2 rout-config , Angular 2 RouteParams] For live example, go to plnkr  http://embed.plnkr.co/vjf9Zz/ The Route-Config :-   The route config  is used to map components to URLs. Syntax :-   @RouteConfig([         {path:  '/' ,        component: Home_Component,  as :  'Home' },         {path:  '/AboutMe' , component: AboutMe_Component,  as :  'AboutMe'   }         {path:  '/ContactMe' , component: ContactMe_Component,  as :  'ContactMe'   }     ]) The Route Params :-  The route   parameter  is used to map given URL's parameters based on the rout URLs and It is an optional parameters for that route. ...

Search Keywords :- [ Angular 2 router-link directive ,  Angular 2 router-outlet directive,  Angular 2 rout config , Angular 2 Route Params] For live example, go to plnkr http://embed.plnkr.co/vjf9Zz/ Router-link directive :- Router-link directive is used to link a specific parts of your applications. Syntax :-   <router-link></router-link> Example , < a [router-link] ="['/AboutMe']"> About Me </ a > Router-outlet directive :- Router-outlet directive is used to render the components for specific location of your applications. Both the template and templateUrl render the components where you use this directive. Syntax :-   <router-outlet></router-outlet> The Route-Config :-   The route config  is used to map components to URLs. Syntax :-   @RouteConfig([         {path: '/' ,      ...

Programmer's Quizzes JavaScript Online Practice Test AngularJs Online Practice Test JSON/JSONP Online Practice Test MVC Online Practice Test Stayed Informed - 21 Best Web Programming Tutorials & Examples I hope you are enjoying with this post! Please share with you friends. Thank 

Today, I developing a web app using to AngularJs and REST API. The REST APIs are hosted on some different servers. When I calling to this REST APIs that time I facing this issues[ CORS ( Cross Origin Request Sharing )] and solved this issue now using the below stuff.  In the below example we set the $httpProvider.defaults.useXDomain = true ; that means the AJAX request send with X-Requested-With and Removing the necessary header, so the server is not rejecting the all incoming request . In AngularJs version > 1.2, No need to any other extra work. Simply you add stuff in the app config file. The code sample as given below. var app = angular.module( 'corsApp' , []); app.config([ '$httpProvider' , function ($httpProvider) {          $httpProvider.defaults.useXDomain = true ;          delete $httpProvider.defaults.headers.common[ 'X-Requested-With' ];   ...