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: stackoverflow.com/questions/36008476/… — Hany
– Hany, Commented Dec 11, 2017 at 20:09

Pierre Mallet · Accepted Answer · 2017-12-11 15:49:01Z

2

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>

answered Dec 11, 2017 at 15:49

Pierre Mallet

7,2412 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahmed Abdulkafy Over a year ago

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']; });

Collectives™ on Stack Overflow

navigating static Html files with Angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related