我能够将这三种技术结合在一起使用。我向我的Visual Studio项目中添加了angular.d.ts
和来自DefinitelyTyped的其他文件,但我还需要使用declare module
语句添加模块声明。这是因为DefinitelyTyped中的Angular定义是针对不使用AMD/requirejs的情况编写的。也许最好是不使用AMD(使用<script>
标签加载)来使用jquery和angular,并仅将AMD用于应用程序模块,但无论如何,这是从我的项目中提取的示例:
index.html
<script src="webjars/requirejs/2.1.11/require.js" data-main="js/requireMain"></script>
requireMain.ts
这是用于requirejs的主文件。虽然它是TypeScript文件,但不使用import
语法,而是使用通常的requirejs语法。它还声明了angular模块。
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'] },
},
});
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']);
});
});
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
routes.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' });
});
myModule.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';
});
}
}
myService.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' },
});
});