I am trying to introduce a clean folders structure for the scripts in my project using Angular 1 and TypeScript 2. I want to have one file app.ts where I will declare my app and controllers, services etc. Then in separate folders like Controllers I would like to keep my controllers in separate files.
What I have now does not work properly when I am trying to use namespaces and separate classes. It works fine if I put controllers declaration in a separate file completely using constructor inside instead of the namespaces as in the example below. When I run the application I can see two javascript errors:
-Uncaught ReferenceError: TypeScript is not defined, at app.ts:6 (in this case TypeScript is my namespace)
-Error: [ng:areq] Argument 'BrowseMovieTicketsController' is not a function, got undefined http://errors.angularjs.org/1.4.10/ng/areq?p0=BrowseMovieTicketsController&p1=not%20a%20function%2C%20got%20undefined
In section of my html file the scripts are included in this ordering:
<script src="/bower_components/angular/angular.js"></script>
<script src="/Scripts/TypeScript/app.js"></script>
<script src="/Scripts/TypeScript/Services/MovieInformationService.js"></script>
<script src="/Scripts/TypeScript/Controllers/BrowseMovieTicketsController.js"></script>
Body of index.html
<div ng-app="myApp" ng-controller="BrowseMovieTicketsController">
<a ng-click="GetMovie()">Test</div></div>
File app.ts:
/// <reference path="./../Scripts/typings/angularjs/angular.d.ts"/>
var myApp = angular.module('myApp', []);
//Controllers
myApp.controller("BrowseMovieTicketsController", TypeScript.Controllers.BrowseMovieTicketsController);
//Services
myApp.service("MovieInformationService", TypeScript.Services.MovieInformationService);
File BrowseMovieTicketsController.ts:
/// <reference path="./../../Scripts/typings/angularjs/angular.d.ts"/>
namespace TypeScript.Controllers {
export class BrowseMovieTicketsController {
scope: any;
movieInformationService: Services.MovieInformationService;
static $inject = ["$scope", "MovieInformationService"];
constructor($scope: any, MovieInformationService: Services.MovieInformationService) {
this.scope = $scope;
this.movieInformationService = MovieInformationService;
}
}
}
File MovieInformationService.ts:
namespace TypeScript.Services {
"use strict";
export class MovieInformationService {
public GetMovie() {
console.log("hello");
}
}
}
You need to declare your controller in your module. Try this:
namespace TypeScript.Controllers {
export class BrowseMovieTicketsController {
static $inject = ["$scope", "MovieInformationService"];
constructor(private $scope: any, private MovieInformationService: Services.MovieInformationService) {
}
}
myApp.controller("BrowseMovieTicketsController", TypeScript.Controllers.BrowseMovieTicketsController);
}
Same for declare your service
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.