I have something like this in my visualforce I need to pass vars to my component because all files are in the Static Resource.
which is the correct way?
var opp="{!opportunity}";
var resource="{!URLFOR($Resource.components,'app/')}";
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
Static Resource app/main.ts
import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
Static Resource app/app.component.ts
import { Component } from 'angular2/core';
@Component({
selector: 'pm-app',
templateUrl: 'app/app.component.html',
})
export class AppComponent {
/* I NEED VALUES HERE*/
opp: string = '';
}
Best Answer
Angualar 2 is mostly written using Typescript which needs to be transpiled to Javascript before it can run inside your browser.
You cannot create typescript static resources and reference them from a VF page as your browser will not understand it.
Have a look at these tutorials how to work with angular 2 using your VF page as a container. running Angular 2 inside VF page tutorial