Angular 2 Template Syntax

While reading an online blog related to Angular2, I came across the following syntax.

@Component({
    selector: 'app',
    template: require('./app.component.html'),
    styles: [require('./app.component.css')],
    directives: [ ROUTER_DIRECTIVES ],        
 })

How are the following two statements different? What role does the function require here?

  • template: require ('./app.component.html')
  • template: './app.component.html'

Is the html template assembler required in the instructions above?

+4
source share
2 answers

How do the following two statements differ?

Well, a part of CommonJS is required, the result require('./app.component.html')will be a pattern string, but the field templateUrlexpects a PATH to the pattern .html.

therefore, if you intend to use a query, you should use templateinstead templateUrl.

,

  • :

    template: require('./app.component.html'),
    
  • : -

    templateUrl: 'app/app.component.html',
    
  • module.id @component, , angular insetad . :

    @Component({
        selector: 'my-app',
        moduleId: module.id,
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css']
    })
    

. http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/

+1

, . - , CommonJS -

var mymod = require('myModule');
// Call the exported function "hello()"
mymod.hello();

, script , :

require('myModule', function(mymod) {
    // Call the exported function hello
    mymod.hello(); 
});

-

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    moduleId: module.id,
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})

moduleId: module.id @Component . , Angular 2 . require(). , :)

0

All Articles