Angular 2 Template Syntax

Question

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?

Answer 1

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/

Answer 2

, . - , 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(). , :)