{{1 + 1}} not being processed in index.html
Question
I am trying to do following in index.html, unfortunately I am unable to make {{1+1}} work in it or say any angular directive. I wanted to know if this is because Angular is not loading before this renders or is there something I need to do for this to work out.
index.html
<!DOCTYPE html>
<html>
<head>
<base href="">
<script src="libs/shim.js"></script>
<script src="libs/zone.js"></script>
<script src="libs/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script></head>
<body>
<my-app>
{{1+1}}
</my-app>
</body>
</html>
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './components/default/app.component';
import { HttpService } from './services/shared/http.service';
@NgModule({
imports: [BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
template: 'this is {{title}}'
})
export class AppComponent {
title: string='hello world';
constructor() { }
}
My desired output should be showing 2 till it renders other components inside it. But I am not getting it. It still shows me {{1+1}}.
Any help would be appreciated.
2 answers
solution1
1 ACCPTED 2017-06-19 11:37:59
This is not possible for a simple reason - whatever is inside the root component is only displayed until Angular is bootstrapped.
Given that fact, you cannot use the interpolation simply because that needs to be processed by Angular - and that is not bootstrapped yet.
solution2
-1 2017-06-19 07:48:20
I have created a simple custom Directive example for you in Angular 2. Plunker SEE and play
You can checkout more about Directives and custom directives at Angular Directives discription
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <h1>This is Angular1</h1> <div ng-app> <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.