Show Menu
Cheatography
  1. Home >
  2. Programming >

Router-asIs-toBe-in-angular-hybrid-app Cheat Sheet (DRAFT) by

Router asIs toBe in angular hybrid application.

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Routing in Angular Hybrid Apllic­ation

Hybrid Applic­ation: AngularJs (1.3.7) + Angular (12)

Router:
UI-Router
is used in AngularJs and 
@angul­ar/­router
is used in Angular.

This document describe more about routing AS-IS in AngularJs and TO-BE in Angular.

Imports

var appModule = angula­r.m­odu­le(­'ap­pMo­dule', [ 'ui.ro­uter' ]);
 
import { Router­Module } from '@angu­lar­/ro­uter';

State Definition

$state­Pro­vid­er.s­ta­te(­"­use­r-d­eta­ils­", { 
  ­ url: "­/us­er/­:id­", 
  ­ ­views: { 
  ­ ­ ­ ­"­ind­ex@­": { 
  ­ ­ ­ ­ ­ ­tem­pla­teUrl: "­use­r-d­eta­ils.ht­ml", 
  ­ ­ ­ ­ ­ ­con­tro­ller: "­con­troller as ctrl", 
  ­ ­ ­ }, 
  ­ }, 
 }); 
Router­Mod­ule.fo­rRoot([ 
  ­ ­ ­ { path: 'user/­:id', component: UserDe­tai­lCo­mponent }, 
 ]);

View Creation

<ui­­-view name="v­­ie­w­N­am­­e"><­­/u­i­-­vi­­ew>
<ro­­ut­e­r­-o­­utlet name="v­­ie­w­N­am­­e"><­­/r­o­u­te­­r-o­­ut­l­e­t>
<div ui­-vi­ew=­"­v­i­ew­­Nam­­e">­</d­iv>

Params Access

Service: $state­Params
Provider: Activa­ted­Route
 
$state­Par­ams.id
Snapshot:
Naviga­tion: user/1 => users-­listing => user/2 

constr­uct­or(­private route: Activa­ted­Route) { } 
 ngOnInit() { 
  ­ ­this.id = this.r­out­e.s­nap­sho­t.p­ara­ms.id; }
 
Observable:
Naviga­tion: user/1 => user/2 => user/3 

constr­uct­or(­private route: Activa­ted­Route) { } 
 ngOnInit() { 
  ­ ­thi­s.r­out­e.p­ara­mMa­p.s­ubs­cri­be(­params: ParamMap => { 
  ­ ­ ­ ­this.id = params.ge­t('­id'); 
  ­ }); 
 }

Navigation Basic

$state.go()
 
router.na­­vi­g­ate()

Navigation between AngularJs and Angular

NG1 => NG12
NG12 => NG1
using $location service
using 
Location
$locat­ion.ur­l('­/us­er/2');
this.l­oca­tio­n.g­o('­/us­er/2')
 
using 
Router
 
router.na­vig­ate­ByU­rl(­'/u­ser/2')
 
router.na­vig­ate­(['­user', user.id]) // user.id=2