navigating static Html files with Angular

Question

How to navigate (browse) between about 50 static Html files located in the assets folder without creating a component or routing entry for each one.

We did it before with angularJS using $stateProvider like this:

  $stateProvider
        .state('guide.page', {
            controller: 'guideController',
            controllerAs: 'guideCtrl',
            url: '/page/:pageName/:Nav',
            templateUrl: function (url) {
                return "/userfiles/files/guide/" + url.pageName + ".htm";
            },
            resolve: {
                showNav: function ($stateParams) {
                    return $stateParams.Nav;
                }
            }
        })

where pageName sent as a parameter in the link to the static page like this:

<a ui-sref="guide.page({pageName:'003'})">link to static page no 003</a>

How can we do it using angular?. Where we are using angular ver. 5.1 with angular-cli ver. 1.5.

Check this question: https://stackoverflow.com/questions/36008476/how-to-realize-website-with-hundreds-of-pages-in-angular2 — Hany, Dec 11 '17 at 20:09

score 2 · Accepted Answer · answered Dec 11 '17 at 15:49

if your template is just basic HTML you can use a resolver and fetch content with xhr.

@Injectable()
export class PageResolver implements Resolve<string> {
    constructor(private http: HttpClient) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
        return this.http.get(`/userfiles/files/guide/${route.paramMap.get('pageName')}`, {responseType: 'text'});
    }
}

in your routing conf

path: '/page/:pageName/:Nav',
component: PageComponent,
resolve: {
    content: PageResolver
}

and in you component

export class PageComponent implements OnInit {
    public content: string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.content = this.route.snapshot.data['content'];
    }
}

and in the template

<div [innerHTML]="content"></div>

But if you want to had angular content dynamically you will have to use lib like ngx-dynamic-template

<div dynamic-template [template]="content"></div>

Thanks for your solution it works fine just added the "subscribe" on activeRouter.data like this: this.activeRouter.data .subscribe(loggedIn => { this.content = this.activeRouter.snapshot.data['content']; }); — Ahmed Abdulkafy, Dec 12 '17 at 10:47

navigating static Html files with Angular

1 Answers1