I have designed the layout for my introduction page in a file called introduction.html.
<div ng-controller="IntroductionCtrl">
<h1>{{hello}}</h1>
<h2>{{title}}</h2>
</div>
The controller responsible for handling this is stored in introductionCtrl.ts
module app.introduction{
interface IIntroduction{
title: string;
hello: string;
}
class IntroductionCtrl implements IIntroduction{
title: string;
hello: string = "Hello World";
constructor(){
this.title = "This is title";
this.hello = "Hello world!!! ";
}
}
angular
.module("app")
.controller("IntroductionCtrl",IntroductionCtrl);
}
The main module can be found in app.ts :
module app{
angular.module("app",[]);
}
To display the information, my index.html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple Tester</title>
<!-- Style sheets -->
<link href="bootstrap/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="app">
<div class="container">
<div ng-include="'/app/introduction/introduction.html'"></div>
</div>
<!-- Angular main libraries -->
<script src="scripts/angular.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="scripts/angular-cookies.js"></script>
<script src="scripts/angular-loader.js"></script>
<script src="scripts/angular-mock.js"></script>
<script src="scripts/angular-resource.js"></script>
<script src="scripts/angular-route.js"></script>
<!-- App scripts -->
<script src="app/app.js"></script>
<!-- Introduction -->
<script src="app/introduction/introductionCtrl.js"></script>
</body>
</html>
I am encountering an issue where the 'title' and 'hello' values are not being displayed on the introduction page. Any ideas why this might be happening? Thank you.