我能够一起使用这 3 种技术。我angular.d.ts
在我的 Visual Studio 项目中添加了来自definitelyTyped 的其他文件,但我还需要使用declare module
语句添加模块声明。那是因为DefiniteTyped 的角度定义是为在没有AMD/requirejs 的情况下使用而编写的。也许最好在没有 AMD 的情况下使用 jquery 和 angular(使用<script>
标签加载它)并将 AMD 仅用于应用程序模块,但无论如何这里是从我的项目中提取的示例:
索引.html
<script src="webjars/requirejs/2.1.11/require.js" data-main="js/requireMain"></script>
要求Main.ts
requirejs 的主文件。它是 TypeScript 文件,但不使用import
语法,而是使用通常的 requirejs 语法。它还声明了角度模块。
require.config({
baseUrl: '../js',
paths: {
'jquery': '../webjars/jquery/1.11.0/jquery',
'angular': '../webjars/angularjs/1.2.16/angular',
'angular-route': '../webjars/angularjs/1.2.16/angular-route',
'angular-resource': '../webjars/angularjs/1.2.16/angular-resource',
'angular-ui-bootstrap': '../webjars/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls',
},
shim: {
'jquery': { exports: 'jquery' },
'angular': { exports: 'angular', dep: ['jquery'] },
'angular-route': { exports: 'angular-route', deps: ['angular'] },
'angular-resource': { exports: 'angular-resource', deps: ['angular'] },
'angular-ui-bootstrap': { exports: 'angular-ui-bootstrap', deps: ['angular'] },
},
});
// TypeScript declarations useful for importing angular modules
declare module 'angular' {
var angular: ng.IAngularStatic;
export = angular;
}
declare module 'angular-route' {
}
declare module 'angular-resource' {
}
declare module 'angular-ui-bootstrap' {
}
require(['jquery', 'angular', 'angular-route', 'angular-resource', 'angular-ui-bootstrap', 'bootstrap',
'application', 'routes'],
function ($: JQueryStatic, angular: ng.IAngularStatic, angularRoute, angularResource, angularUiBootstrap,
application, routes) {
$(function () {
angular.bootstrap(document, ['application']);
});
});
应用程序.ts
import angular = require('angular');
import angularRoute = require('angular-route');
import angularResource = require('angular-resource');
import angularUiBootstrap = require('angular-ui-bootstrap');
var application = angular.module('application', ['ngRoute', 'ngResource', 'ui.bootstrap']);
export = application
路线.ts
import application = require('application');
import myModule = require('myModule');
application.config(function ($routeProvider) {
$routeProvider.
when('/myPage', { controller: myModule.MyPageCtrl, templateUrl: 'partials/myPage.html' }).
otherwise({ redirectTo: '/myPage' });
});
我的模块.ts
import application = require('application');
import angularUiBootstrap = require('angular-ui-bootstrap');
import myService = require('myService');
export interface MyPageCtrlScope {
someData: string;
someAction: () => void;
}
export class MyPageCtrl {
constructor(public $scope: MyPageCtrlScope, private PersonService: myService.PersonResourceClass, private $modal: ng.ui.bootstrap.IModalService) {
PersonService.additionalAction({}).$promise.then(
(person) => {
this.$scope.someData = person.email;
});
$scope.someAction = this.someAction.bind(this);
}
someAction() {
this.$modal.open({
templateUrl: 'dialog.html'
}).result.then(
() => {
this.$scope.someData = 'something else';
});
}
}
我的服务.ts
import application = require('application');
import angularResource = require('angular-resource');
export interface Person {
id?: number;
email?: string;
}
export interface PersonResource extends Person, ng.resource.IResource<PersonResource> {
}
export interface PersonResourceClass extends ng.resource.IResourceClass<PersonResource> {
additionalAction(person: Person): PersonResource;
}
application.factory('PersonService', function ($resource: ng.resource.IResourceService, apiUrl: string): PersonResourceClass {
return <PersonResourceClass> $resource(apiUrl + '/person/:id', { id: "@id" }, {
'additionalAction': { method: 'POST', url: apiUrl + '/person/:id/additionalAction' },
});
});