CODEWITHSUNDEEP
typescriptangular
Loutocký
Loutocký

Reputation: 842

<head> or <script> tag in my own component, AngularJS2, ng2

I am using AngularJS2, when I am loading init index.html, something like this:

<!doctype html>
<html>
    <head>
        <title>demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">   

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- 1. Load libraries -->
        <!-- IE required polyfills, in this exact order -->
        <script src="node_modules/es6-shim/es6-shim.min.js"></script>
        <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
        <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
        <script src="node_modules/angular2/bundles/angular2-polyfills.js"`enter code here`></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>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

        <link href="app/css/jquery-ui.css" rel="stylesheet">
    <link href="app/css/bootstrap.min.css" rel="stylesheet">
    <link href="app/css/font-awesome.min.css" rel="stylesheet">
    <link href="app/css/style.css" rel="stylesheet">

        <script src="app/js/jquery.min.js"></script>
        <script src="app/js/jquery-ui.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="app/js/bootstrap.min.js"></script>

        <!-- 2. Configure SystemJS -->
        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/ts/main').then(null, console.error.bind(console));
        </script>
    </head>

    <!-- 3. Display the application -->
    <body>
        <div id="top-bar"></div>

        <script>
            $("#top-bar").load("app/html/navbar.html nav");
        </script>

    <my-app>Loading...</my-app>
</body>
</html>

Ok, now I am loading app/ts/main, which is typescript file, where I am creating main application component. This components loads my page with name, for example intro.html. There is no problem, this page is already loaded with no errors.

But my question is - how can I use tags such as script or head in my intro.html and other html components? For example code above uses tag title with "demo", if my intro.html defines head with title, for example "test", the title always will be "demo".

Also my other components (intro.html, ticket.html etc.) can not load any content inside script tag. So if I am loading my navigation bar

<script>
    $("#top-bar").load("app/html/navbar.html nav");
</script>

I must do that in index.html, I can not do that in my other components, for example intro.html. Because any other components ignore script tag, and also head tag too. So my question is, how can I use script or head tags in my components instead of in index.html?

Upvotes: 0

Views: 1356

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657781

<script> tags in component templates are stripped by Angular. You can use other methods like require(...) to include scripts

Currently for the <head> Angular only provides support for the <title> tag with the Title service

constructor(private title:Title) {
}

someMethod() {
  this.title.setTitle('new Title');
}

You can directly access document.title as mentioned by @JoeClay but that approach is not compatible with Angulars server side rendering or WebWorkers.

I have seen it mentioned in discussions that abstractions for more browser APIs are planned but there was no information when they plan to implement them.

There is also the DOM reference (a DomAdapter instance) that allows to access browser API in a WebWorker compatible way (There is an open issue currently though https://github.com/angular/angular/issues/6904)

Upvotes: 0

Joe Clay
Joe Clay

Reputation: 35827

I think you're approaching stuff the wrong way - you can set the page title from your code with document.title, and you're almost certainly better off making your nav bar an Angular component rather than loading it through a script tag with jQuery. I'd go as far as to say that 99% of the time using jQuery in Angular is the wrong choice - it's only something to reach for when you absolutely need that extra level of control over the DOM.

Upvotes: 0

Related Questions