使用Angular,TypeScript,Webpack时如何向窗口对象添加jQuery
我已将ng2 Webpack指南反向移植到ng1- https://angular .io/docs/ts/latest/guide/webpack.html
I have backported the ng2 webpack guide to ng1 - https://angular.io/docs/ts/latest/guide/webpack.html
我有3个入口文件-polyfill.ts,vendor.ts和main.ts.这是webpack将它们加载到浏览器中的方式.我已将以下内容添加到vendor.ts
I have 3 entry files - polyfill.ts, vendor.ts and main.ts. This is the way webpack loads them into the browser. I have added the following to vendor.ts
import 'jquery';
import 'angular';
import 'angular-ui-router';
import 'angular-ui-bootstrap';
import 'angular-loading-bar';
import 'checklist-model';
import 'restangular';
import 'lodash';
import 'moment';
import 'bootstrap-datepicker';
以及以下内容到main.ts
and the following to main.ts
import "./styles/main.scss";
import app from './app';
import * as $ from 'jquery';
var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;
angular.bootstrap(document, [app], {
strictDi: true
});
开发工作流程确实运行良好,但是唯一的原因是,当角度加载时,jquery/$不在窗口对象上,因此使用jqLite代替,这使我很难使用jquery插件.下面是我从另一个使用ES5的项目中移植的日期选择器指令:
The development workflow is working really well but the only thing is because jquery/$ is not on the window object when angular loads, jqLite is used instead which makes it hard for me to use jquery plugins. Below is my date picker directive that I have ported from another project that is using ES5:
export function DatePickerDirective($timeout: ng.ITimeoutService): ng.IDirective {
'ngInject';
return {
restrict: 'A',
require: '?ngModel',
link: link
};
function link(scope: any, element: any, attrs: any, ngModel: any) {
'ngInject';
$timeout(function () {
element.bootstrapDP({
format: 'dd/mm/yyyy',
forceParse: true,
autoclose: true,
todayBtn: 'linked',
todayHighlight: true,
daysOfWeekHighlighted: [0, 6]
});
});
scope.$on('$destroy', function () {
element.bootstrapDP('remove');
});
}
}
元素"是指jqLite,因此找不到.bootstrapDP属性.有没有一种方法可以设置打字稿或Webpack来使jquery成为有角度的使用?
The 'element' is referring to jqLite and hence it can't find the .bootstrapDP property. Is there a way to setup typescript or webpack to make angular uses jquery?
我最终将以下内容添加到我的main.ts中,并消除了日期选择器上的无冲突.
I ended up adding the following to my main.ts and getting rid of the no conflict on the datepicker.
import app from './app';
import * as $ from 'jquery';
declare var window : any; <--- THIS LINE
window.$ = window.jQuery = $; <--- AND THIS LINE
angular.bootstrap(document, [app], {
strictDi: true
});
感觉仍然有些粗糙,但我不想依赖任何CDN
It stills feels a bit gross but I didn't want to rely on any CDN's