Refreshing angular2 dart page using HashLocationStrategy works fine as it opens the exact same view.
Refreshing the page using PathLocationStrategy - with tomcat server configured to serve index.html - works for the url without parameter but does not work for the url with parameter.
localhost:8090/menu1 // refresh works
localhost:8090/menu2/paramVal // does not refresh
tomcat web.xml has
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
main.dart
main() {
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
provide(APP_BASE_HREF, useValue: '/')]);
}
app_component.dart
import 'package:angular2/core.dart';
import 'package:angular2/router.dart';
import 'package:angular2/angular2.dart';
import 'package:mboxes/menu1.dart';
import 'package:mboxes/menu2.dart';
#Component(
selector: 'my-app',
templateUrl: 'app_component.html',
directives: const [ROUTER_DIRECTIVES],
providers: const[ROUTER_PROVIDERS, ])
#RouteConfig(const [
const Route(
path: '/menu1',
name: 'Menu1',
component: Menu1Component,
useAsDefault: true),
const Route(
path: '/menu2/:param', name: 'Menu2', component: Menu2Component)
])
class AppComponent {}
app_component.html
<div class="container">
<nav>
<ul>
<li>
<a [routerLink]="['Menu1']">Menu1</a>
</li>
<li> <a [routerLink]="['Menu2', {'param':'paramVal'}]">Menu2</a> </li>
</ul>
</nav>
<div style="padding-left: 200px; padding-top: 200px; padding-bottom: 50px">
<router-outlet></router-outlet>
</div>
</div>
menu1.dart
import 'package:angular2/core.dart';
import 'package:angular2/router.dart';
#Component(
selector: 'menu1',
template: ''' menu 1 was clicked '''
)
class Menu1Component {}
menu2.dart
import 'package:angular2/core.dart';
import 'package:angular2/router.dart';
#Component(
selector: 'menu2',
template: ''' menu 2 was clicked'''
)
class Menu2Component implements OnInit {
final RouteParams _routeParams;
Menu2Component(this._routeParams);
ngOnInit() {
var val = _routeParams.get('param');
print ("passed param is " + val);
}
}
Instead of using 404 to serve index.html I think you want to set up a servlet-mapping with something like <url-pattern>*</url-pattern>
See also Tomcat servlet, redirect all urls to a single webpage
Related
I have sidenav setup in the home page of my angular application. I have also setup links to other components in the sidenav. Now I want the components to load in the same space when their links are clicked with the sidenav and toolbar not getting affected.
The HTML file of the home page with the sidenav and toolbar
<mat-toolbar>
<button (click)='sidenav.toggle()'><mat-icon style="color: white">menu</mat-icon></button>
<b style="font-size: 22px; color: white">Hello {{user}}</b>
<nav>
<ul>
<li><button (click)='logout()'><div style='font-size: 19px; color: white'> LOGOUT</div></button></li>
</ul>
</nav>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav mode='side' [(opened)]='opened'>
<mat-nav-list style="margin-top: 50px">
<a mat-list-item routerLink="/dashboard" routerLinkActive="active"><button (click)='sidenav.close()'><mat-icon>dashboard</mat-icon><span> </span>DASHBOARD</button></a>
<a mat-list-item routerLink="/visual" routerLinkActive="active"><button (click)='sidenav.close()'><mat-icon>timeline</mat-icon><span> </span>VISUALISATION</button></a>
<a mat-list-item routerLink="/config" routerLinkActive="active"><button (click)='sidenav.close()'><mat-icon>settings</mat-icon><span> </span>PROFILE</button></a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
</mat-sidenav-content>
</mat-sidenav-container>
I want to ensure that when I open this page for the first time, dashboard will be displayed, but when i click in visualisation or profile, the dashboard component should be replaced by the other clicked component in the same place whithout the need to reload the toolbar and sidenav components.
To ensure that the sidenav acts as a navigation bar first we will need to specify the tag inside the tag.
Then the second step is to specify the router links in the sidenav links. Ensure that the router links that they point to are specified as child routes of the main component. To specify them go to the app-routing.module.ts module and specify the routes which in the above case would be :
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { DashboardViewComponent } from './dashboard-view/dashboard-view.component';
import { VisualisationComponent } from './visualisation/visualisation.component';
import { ConfgaccountComponent } from './confgaccount/confgaccount.component';
const routes: Routes = [
{
path: 'dashboard', component: DashboardComponent, children: [
{ path: 'dash', component: DashboardViewComponent },
{ path: 'visual', component: VisualisationComponent },
{ path: 'config', component: ConfgaccountComponent },
]
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Now the next step would be to specify the tags inside the tags to ensure that the whenever the links in the sidenav are clicked they are routed to the proper child component and it is displayed in the correct place.
Also ensure that the routerLinks inside the tags are updated to the proper routes specified for the child components, as present in the app-routing.module.ts file.
The modified HTML code will be :
<mat-toolbar>
<button (click)='sidenav.toggle()'><mat-icon style="color: white">menu</mat-icon></button>
<b style="font-size: 22px; color: white">Hello {{user}}</b>
<nav>
<ul>
<li><button (click)='logout()'><div style='font-size: 19px; color: white'> LOGOUT</div></button></li>
</ul>
</nav>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav mode='side' [(opened)]='opened'>
<mat-nav-list style="margin-top: 50px">
<a mat-list-item routerLink="/dashboard/dash" routerLinkActive="active"><button (click)='sidenav.close()'><mat-icon>dashboard</mat-icon><span> </span>DASHBOARD</button></a>
<a mat-list-item routerLink="/dashboard/visual" routerLinkActive="active"><button (click)='sidenav.close()'><mat-icon>timeline</mat-icon><span> </span>VISUALISATION</button></a>
<a mat-list-item routerLink="/dashboard/config" routerLinkActive="active"><button (click)='sidenav.close()'><mat-icon>settings</mat-icon><span> </span>PROFILE</button></a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<main>
<router-outlet></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
The next step is to create a navigation service to which the router and sidenav subscribe to to ensure the smooth routing to proper components whenever the links are clicked. The service needs to be injected into the constructor of the main dashboard component to ensure it's successful working.
The nav.service.ts file will have contents as specified :
import { Injectable, EventEmitter } from '#angular/core';
import { Event, NavigationEnd, Router } from '#angular/router';
import { BehaviorSubject } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class NavService {
public appDrawer: any;
public currentUrl = new BehaviorSubject<string>(undefined);
constructor(private router: Router) {
this.router.events.subscribe((event: Event) => {
if (event instanceof NavigationEnd) {
this.currentUrl.next(event.urlAfterRedirects);
}
});
}
}
Finally test the successful working of the child components in the main dashboard component. The sidenav will successfully help in proper navigation among child components now.
I tried splitting the Angular Dart app layout example to different components but the drawer toggle function is unreachable. When the same code is on one file. The toggle function is reachable.
Original File Content
parent.html
<drawer #drawer="drawer"></drawer>
<div class="material-content">
<navigation (toggleState)="drawer.toggle()"></navigation>
<content></content>
</div>
parent.dart
import 'package:angular/angular.dart';
import 'package:console/src/components/navigation/navigation.dart';
import 'package:console/src/components/drawer/drawer.dart';
#Component(
selector: 'dashboard-layout',
styleUrls: [
'dashboard_layout.css',
],
templateUrl: 'dashboard_layout.html',
directives: [
Drawer,
Navigation,
]
)
class DashboardLayout implements OnInit {
#override
Future<Null> ngOnInit() {
return null;
}
toggleDrawer () {
drawerVisible = !drawerVisible;
print(drawerVisible);
}
}
drawer.html
<material-drawer persistent>
<material-list *deferredContent>
<div group class="mat-drawer-spacer"></div>
<div group>
<material-list-item>
<material-icon icon="inbox"></material-icon>Inbox
</material-list-item>
<material-list-item>
<material-icon icon="star"></material-icon>Star
</material-list-item>
<material-list-item>
<material-icon icon="send"></material-icon>Sent Mail
</material-list-item>
<material-list-item>
<material-icon icon="drafts"></material-icon>Drafts
</material-list-item>
</div>
<div group>
<div label>Tags</div>
<material-list-item>
<material-icon icon="star"></material-icon>Favorites
</material-list-item>
</div>
</material-list>
drawer.dart
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
#Component(
selector: 'drawer',
styleUrls: [
'drawer.css',
'package:angular_components/app_layout/layout.scss.css'
],
templateUrl: 'drawer.html',
directives: [
DeferredContentDirective,
MaterialListComponent,
MaterialListItemComponent,
MaterialPersistentDrawerDirective,
MaterialIconComponent,
]
)
class Drawer extends MaterialDrawerBase implements OnInit {
bool customWidth = false;
bool end = false;
Drawer() : super(visible: true) {
}
#override
Future<Null> ngOnInit() {
return null;
}
}
navigation.dart
import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:console/src/components/avatar/avatar.dart';
import 'package:angular_components/laminate/overlay/zindexer.dart';
#Component(
selector: 'navigation',
styleUrls: [
'navigation.css',
'package:angular_components/app_layout/layout.scss.css'
],
templateUrl: 'navigation.html',
directives: [
PopupSourceDirective,
MaterialIconComponent,
MaterialButtonComponent,
MaterialToggleComponent,
MaterialPopupComponent,
DeferredContentDirective,
MaterialPersistentDrawerDirective,
Avatar,
],
providers: [popupBindings, ClassProvider(ZIndexer)],
)
class Navigation implements OnInit {
bool visible = false;
final _toggleRequest = StreamController();
Iterable<RelativePosition> avatarPopupPositions = [
RelativePosition.AdjacentBottomRight
];
#Output()
Stream get toggleState => _toggleRequest.stream;
void toggleDrawer() {
_toggleRequest.add(null);
}
#override
Future<Null> ngOnInit() {
return null;
}
}
navigation.html
<header class="material-header shadow">
<div class="material-header-row">
<material-button icon
class="material-drawer-button" (trigger)="toggleDrawer()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">Console</span>
<div class="material-spacer"></div>
<avatar [userName]="'Someone Awesome'"
popupSource
#source="popupSource"
(trigger)="visible = !visible">
</avatar>
<material-popup
[source]="source" [(visible)]="visible"
[enforceSpaceConstraints]="true"
[preferredPositions]="avatarPopupPositions">
<div style="width: 256px; height: 200px">
Hello, Hello, Hello, Hello.
</div>
</material-popup>
</div>
</header>
Error
[error] The method 'toggle' isn't defined for the class 'Element'.
(package:console/src/layouts/parent/parent.template.dart, line 336, col 18)
So why is #drawer="drawer" An AngularDart Component with the toggle function when everything is in one file but it is a HTML Element when it is split.
The drawer is actually using the exportAs of the drawer component here: https://github.com/dart-lang/angular_components/blob/7f254c89cbbd512cc284a7e9d03bb687f9948bd9/angular_components/lib/app_layout/material_temporary_drawer.dart#L15
It really shouldn't be needed for the component, but we wanted the directive and the component to work the same way.
You would either need to add the exportAs="drawer" or just use the #drawer syntax without using #drawer="drawer"
app.component.ts
import { Component,OnInit } from '#angular/core';
import {FormControl,FormGroup,FormArray,FormBuilder} from '#angular/forms'
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 6';
form=new FormGroup({
topics:new FormArray([])
})
addTopic(topic:HTMLInputElement){
(this.form.get('topics') as FormArray).push(new FormControl(topic.value));
topic.value='';
}
}
app.component.html
<form>
<input type="text" class="form-control" (keyup.enter)="this.addTopic(topic)" #topic />
<ul class="list-group">
<li class="list-group-item" *ngFor="let topic of form.get('topics').controls">
{{topic.value}}
</li>
</ul>
</form>
I have created a Multi Input Control using Angular FormArray but how can i Validate the same for Minimum 2 Items(Length=2) and only accept integer values.
How to Add Validators.minlength like Reactive Form / Model Driven Form Approach.
How can i get those items using ngModel?
I hope this helps.
import {
Component,
OnInit
} from '#angular/core';
import {
FormControl,
FormGroup,
FormArray,
FormBuilder
} from '#angular/forms'
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 6';
form = new FormGroup({
topics: new FormArray(this.formBuilder.control(''), [Validators.reqired, Valiadtors.minlength(2)], Validators.Paterrn("^[0-9]*$"))
])
addTopic(topic: HTMLInputElement) {
(this.form.get('topics') as FormArray).push(new FormControl(topic.value));
topic.value = '';
}
}
I am doing authentication and authorization of pages on the server side. on index pages of each controller. But inside each index page I want to use angular 2 hence I want to use angular 2 routing.
I have tried like
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template:''
})
export class AppComponent {
}
app.module.ts
import {NgModule} from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule } from '#angular/router'
import { TestSuiteComponent } from './testsuite/testsuite.component'
//import {InputTextModule, CalendarModule, DataTable} from 'primeng/primeng';
import { DataTableModule, SharedModule } from 'primeng/primeng';
#NgModule({
imports: [BrowserModule, DataTableModule, SharedModule, RouterModule.forRoot([
{
path: 'TestSuiteEditor/Index',
component: TestSuiteComponent
},
{
path: 'Home/Index',
component: TestSuiteComponent
}
])],
declarations: [AppComponent,TestSuiteComponent],
bootstrap: [ AppComponent]
})
export class AppModule { }
on testsuite.component.ts page
import { Directive, Component, OnInit } from '#angular/core';
import {DataTableModule, SharedModule} from 'primeng/primeng';
import { TestSuite } from './testsuite';
#Component({
// moduleId: module.id,
selector: 'testsuite-header',
template: `
<div class="ui-widget-header ui-helper-clearfix" style="padding:4px 10px;border-bottom: 0 none">
<i class="fa fa-search" style="float:left;margin:4px 4px 0 0"></i>
<input #gb type="text" pInputText size="50" style="float:left" placeholder="Global Filter">
</div>
<div class="ui-datatable ui-widget">
<div class="ui-datatable-tablewrapper">
<p-dataTable [value]="testSuites" [rows]="5" [paginator]="true" [globalFilter]="gb" [editable]="true">
<p-column field="testSuiteId" header="TestSuites (startsWith)" [style]="{'width':'10%'}" [filter]="true" [editable]="true"></p-column>
<p-column field="projectId" header="ProjectId (contains)" [style]="{'width':'10%'}" [filter]="true" filterMatchMode="contains" [editable]="true"></p-column>
<p-column field="name" header="Name (startsWith)" [style]="{'width':'30%'}" [filter]="true" [editable]="true"></p-column>
<p-column field="description" header="Description (endsWith)" [style]="{'width':'40%'}" [filter]="true" filterMatchMode="endsWith" [editable]="true"></p-column>
<p-column field="isActive" header="IsActive (endsWith)" [style]="{'width':'10%'}" [filter]="true" filterMatchMode="endsWith" [editable]="true"></p-column>
</p-dataTable>
</div>
</div> `,
// providers: [TestSuiteService]
})
export class TestSuiteComponent{}
Home/Index.cshtml
<testsuite-header>Loading....</testsuite-header>
but it throwing an error of
Cannot find primary outlet to load 'TestSuiteComponent'
You have forgotten to add router-outlet in your application. You can define router-outlet in AppComponent like this-
<router-outlet></router-outlet>
So your AppComponent will looks like this-
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template:`
<!-- Routed views go here -->
<router-outlet></router-outlet>
`
})
export class AppComponent {
}
I have found the solution, thanks for your help
I have created the path similar to my MVC routing and added in routing.ts.
Since angular 2routing have feature of loading the active url so it automatically loads the component which is assign to that URL.
I'm following the simple quickstart app from the Angular2 docs and I'm using a spring backend to run it. My problem is that the angular router ditched the hashtag from the URL so what should have been example.com/#/dashboard is now example.com/dashboard.
I am using the LocationStrategy method specified in a bunch of posts on StackOverflow. Below is my simple example:
File: main.ts
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {provide} from 'angular2/core';
import {LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {TestComponent} from './simple/test.component'
bootstrap(
TestComponent,
[
provide(LocationStrategy, { useClass: HashLocationStrategy })
]
);
File: test.component.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
#Component({
selector: 'test1',
template: "<h1>This is test1 component</h1>"
})
export class Test1 { };
#Component({
selector: 'test2',
template: "<h1>This is test2 component</h1>"
})
export class Test2 { };
#Component({
selector: 'my-app',
template: `
<h1>This is my test app</h1>
<nav>
<a [routerLink]="['Test1']">Test1</a>
<a [routerLink]="['Test2']">Test2</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
#RouteConfig([
{
path: '/test1',
name: 'Test1',
component: Test1
},
{
path: '/test2',
name: 'Test2',
component: Test2
}
])
export class TestComponent { }
File: index.html
<html>
<head>
<base href="/">
<title>This is an Angular 2 test</title>
<!-- Angular dependencies -->
<script src="/node_modules/es6-shim/es6-shim.js"></script>
<script src="/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/angular2/bundles/router.dev.js"></script>
<!-- App -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}/*,
'node_modules': {
format: 'cjs',
defaultExtension: 'js'
}*/
}
});
System.import('app/main').then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app></my-app>
</body>
</html>
I'm using Angular2 2.0.0-beta.9 and this is the behavior that I see. Note that none of the 2 paths in the #RouteConfig are marked with useAsDefault: true.
When I try to open up http://localhost:8080/#/test1 the page opens fine, but when I click on one of the 2 anchors in the TestComponent template, the hashtag gets dropped.
Then if I set path1 to be useAsDefault: true, the hashtag gets dropped immediately even when I try to visit http://localhost:8080/#/test1.
Can someone please tell me if I'm doing something wrong or if that's a bug? I just want to get the hashtag back in the URL.
Angular2 <= RC.5
The ROUTER_PROVIDERS need to be added before LocationStrategy otherwise your previously added LocationStrategy gets overridden.
bootstrap(
TestComponent,
[
ROUTER_PROVIDERS,
// must be listed after `ROUTER_PROVIDERS`
provide(LocationStrategy, { useClass: HashLocationStrategy })
]
);
delete this line
providers: [ROUTER_PROVIDERS]
from TestComponent
With your implementation everything seems perfect.
Now, Please try to delete browser's cache memory and try. I hope it will start working !!!
I faced this problem when trying for your problem.