mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
0b5e88ac70
See https://docs.angularjs.org/api/ng/service/$compile "You can either return a Directive Definition Object (see below) that defines the directive properties, or just the postLink function (all other properties will have the default values)."
1213 lines
37 KiB
TypeScript
1213 lines
37 KiB
TypeScript
/// <reference path="angular.d.ts" />
|
|
|
|
// issue: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/369
|
|
// https://github.com/witoldsz/angular-http-auth/blob/master/src/angular-http-auth.js
|
|
/**
|
|
* @license HTTP Auth Interceptor Module for AngularJS
|
|
* (c) 2012 Witold Szczerba
|
|
* License: MIT
|
|
*/
|
|
|
|
class AuthService {
|
|
/**
|
|
* Holds all the requests which failed due to 401 response,
|
|
* so they can be re-requested in future, once login is completed.
|
|
*/
|
|
buffer: { config: ng.IRequestConfig; deferred: ng.IDeferred<any>; }[] = [];
|
|
|
|
/**
|
|
* Required by HTTP interceptor.
|
|
* Function is attached to provider to be invisible for regular users of this service.
|
|
*/
|
|
pushToBuffer = function(config: ng.IRequestConfig, deferred: ng.IDeferred<any>) {
|
|
this.buffer.push({
|
|
config: config,
|
|
deferred: deferred
|
|
});
|
|
}
|
|
|
|
$get = [
|
|
'$rootScope', '$injector', <any>function($rootScope: ng.IScope, $injector: ng.auto.IInjectorService) {
|
|
var $http: ng.IHttpService; //initialized later because of circular dependency problem
|
|
function retry(config: ng.IRequestConfig, deferred: ng.IDeferred<any>) {
|
|
$http = $http || $injector.get<ng.IHttpService>('$http');
|
|
$http(config).then(function (response) {
|
|
deferred.resolve(response);
|
|
});
|
|
}
|
|
function retryAll() {
|
|
for (var i = 0; i < this.buffer.length; ++i) {
|
|
retry(this.buffer[i].config, this.buffer[i].deferred);
|
|
}
|
|
this.buffer = [];
|
|
}
|
|
|
|
return {
|
|
loginConfirmed: function () {
|
|
$rootScope.$broadcast('event:auth-loginConfirmed');
|
|
retryAll();
|
|
}
|
|
}
|
|
}
|
|
];
|
|
}
|
|
|
|
angular.module('http-auth-interceptor', [])
|
|
|
|
.provider('authService', AuthService)
|
|
|
|
/**
|
|
* $http interceptor.
|
|
* On 401 response - it stores the request and broadcasts 'event:angular-auth-loginRequired'.
|
|
*/
|
|
.config(['$httpProvider', 'authServiceProvider', <any>function ($httpProvider: ng.IHttpProvider, authServiceProvider: any) {
|
|
|
|
$httpProvider.defaults.headers.common = {'Authorization': 'Bearer token'};
|
|
$httpProvider.defaults.headers.get['Authorization'] = 'Bearer token';
|
|
$httpProvider.defaults.headers.post['Authorization'] = function (config:ng.IRequestConfig):string { return 'Bearer token'; }
|
|
|
|
var interceptor = ['$rootScope', '$q', <any>function ($rootScope: ng.IScope, $q: ng.IQService) {
|
|
function success(response: ng.IHttpPromiseCallbackArg<any>) {
|
|
return response;
|
|
}
|
|
|
|
function error(response: ng.IHttpPromiseCallbackArg<any>) {
|
|
if (response.status === 401) {
|
|
var deferred = $q.defer<void>();
|
|
authServiceProvider.pushToBuffer(response.config, deferred);
|
|
$rootScope.$broadcast('event:auth-loginRequired');
|
|
return deferred.promise;
|
|
}
|
|
// otherwise
|
|
return $q.reject(response);
|
|
}
|
|
|
|
return function (promise: ng.IHttpPromise<any>) {
|
|
return promise.then(success, error);
|
|
}
|
|
|
|
}];
|
|
$httpProvider.interceptors.push(interceptor);
|
|
}]);
|
|
|
|
|
|
namespace HttpAndRegularPromiseTests {
|
|
interface Person {
|
|
firstName: string;
|
|
lastName: string;
|
|
}
|
|
|
|
interface ExpectedResponse extends Person { }
|
|
|
|
interface SomeControllerScope extends ng.IScope {
|
|
person: Person;
|
|
theAnswer: number;
|
|
letters: string[];
|
|
snack: string;
|
|
nothing?: string;
|
|
}
|
|
|
|
var someController: Function = ($scope: SomeControllerScope, $http: ng.IHttpService, $q: ng.IQService) => {
|
|
$http.get<ExpectedResponse>("http://somewhere/some/resource")
|
|
.success((data: ExpectedResponse) => {
|
|
$scope.person = data;
|
|
});
|
|
|
|
$http.get<ExpectedResponse>("http://somewhere/some/resource")
|
|
.then((response: ng.IHttpPromiseCallbackArg<ExpectedResponse>) => {
|
|
// typing lost, so something like
|
|
// var i: number = response.data
|
|
// would type check
|
|
$scope.person = response.data;
|
|
});
|
|
|
|
$http.get<ExpectedResponse>("http://somewhere/some/resource")
|
|
.then((response: ng.IHttpPromiseCallbackArg<ExpectedResponse>) => {
|
|
// typing lost, so something like
|
|
// var i: number = response.data
|
|
// would NOT type check
|
|
$scope.person = response.data;
|
|
});
|
|
|
|
var aPromise: ng.IPromise<Person> = $q.when({ firstName: "Jack", lastName: "Sparrow" });
|
|
aPromise.then((person: Person) => {
|
|
$scope.person = person;
|
|
});
|
|
|
|
var bPromise: ng.IPromise<number> = $q.when(42);
|
|
bPromise.then((answer: number) => {
|
|
$scope.theAnswer = answer;
|
|
});
|
|
|
|
var cPromise: ng.IPromise<string[]> = $q.when(["a", "b", "c"]);
|
|
cPromise.then((letters: string[]) => {
|
|
$scope.letters = letters;
|
|
});
|
|
|
|
// When $q.when is passed an IPromise<T>, it returns an IPromise<T>
|
|
var dPromise: ng.IPromise<string> = $q.when($q.when("ALBATROSS!"));
|
|
dPromise.then((snack: string) => {
|
|
$scope.snack = snack;
|
|
});
|
|
|
|
// $q.when may be called without arguments
|
|
var ePromise: ng.IPromise<void> = $q.when();
|
|
ePromise.then(() => {
|
|
$scope.nothing = "really nothing";
|
|
});
|
|
}
|
|
|
|
// Test that we can pass around a type-checked success/error Promise Callback
|
|
var anotherController: Function = ($scope: SomeControllerScope, $http:
|
|
ng.IHttpService, $q: ng.IQService) => {
|
|
|
|
var buildFooData: Function = () => 42;
|
|
|
|
var doFoo: Function = (callback: ng.IHttpPromiseCallback<ExpectedResponse>) => {
|
|
$http.get<ExpectedResponse>('/foo', buildFooData())
|
|
.success(callback);
|
|
}
|
|
|
|
doFoo((data: any) => console.log(data));
|
|
}
|
|
}
|
|
|
|
// Test for AngularJS Syntax
|
|
|
|
namespace My.Namespace {
|
|
export var x: any; // need to export something for module to kick in
|
|
}
|
|
|
|
// IModule Registering Test
|
|
var mod = angular.module('tests', []);
|
|
mod.controller('name', function ($scope: ng.IScope) { });
|
|
mod.controller('name', ['$scope', function ($scope: ng.IScope) { }]);
|
|
mod.controller('name', class {
|
|
// Uncommenting the next line should lead to a type error because this signature isn't compatible
|
|
// with the signature of the `$onChanges` hook:
|
|
// $onChanges(x: number) { }
|
|
});
|
|
mod.controller({
|
|
MyCtrl: class{},
|
|
MyCtrl2: function() {},
|
|
MyCtrl3: ['$fooService', function($fooService: any) { }]
|
|
});
|
|
mod.directive('myDirectiveA', ($rootScope: ng.IRootScopeService) => {
|
|
return (scope, el, attrs) => {
|
|
let foo = 'none';
|
|
el.click(e => {
|
|
foo = e.type;
|
|
$rootScope.$apply();
|
|
});
|
|
scope.$watch(() => foo, () => el.text(foo));
|
|
};
|
|
});
|
|
mod.directive('myDirectiveB', ['$rootScope', function ($rootScope: ng.IRootScopeService) {
|
|
return {
|
|
link(scope, el, attrs) {
|
|
el.click(e => {
|
|
el.hide();
|
|
});
|
|
}
|
|
};
|
|
}]);
|
|
mod.directive({
|
|
myFooDir: () => ({
|
|
template: 'my-foo-dir.tpl.html'
|
|
}),
|
|
myBarDir: ['$fooService', ($fooService: any) => ({
|
|
template: 'my-bar-dir.tpl.html'
|
|
})]
|
|
});
|
|
mod.factory('name', function ($scope: ng.IScope) { })
|
|
mod.factory('name', ['$scope', function ($scope: ng.IScope) { }])
|
|
mod.factory({
|
|
name1: function (foo: any) { },
|
|
name2: ['foo', function (foo: any) { }]
|
|
});
|
|
mod.filter('name', function ($scope: ng.IScope) { })
|
|
mod.filter('name', ['$scope', function ($scope: ng.IScope) { }])
|
|
mod.filter({
|
|
name1: function (foo: any) { },
|
|
name2: ['foo', function (foo: any) { }]
|
|
});
|
|
mod.provider('name', function ($scope: ng.IScope) { return { $get: () => { } } })
|
|
mod.provider('name', TestProvider);
|
|
mod.provider('name', ['$scope', <any>function ($scope: ng.IScope) { }])
|
|
mod.provider(My.Namespace);
|
|
mod.service('name', function ($scope: ng.IScope) { })
|
|
mod.service('name', ['$scope', <any>function ($scope: ng.IScope) { }])
|
|
mod.service({
|
|
MyCtrl: class{},
|
|
MyCtrl2: function() {},
|
|
MyCtrl3: ['$fooService', function($fooService: any) { }]
|
|
});
|
|
mod.constant('name', 23);
|
|
mod.constant('name', "23");
|
|
mod.constant(My.Namespace);
|
|
mod.value('name', 23);
|
|
mod.value('name', "23");
|
|
mod.value(My.Namespace);
|
|
mod.decorator('name', function($scope:ng.IScope){ });
|
|
mod.decorator('name', ['$scope', <any>function($scope: ng.IScope){ }]);
|
|
|
|
|
|
class TestProvider implements ng.IServiceProvider {
|
|
constructor(private $scope: ng.IScope) {
|
|
}
|
|
|
|
$get() {
|
|
}
|
|
}
|
|
|
|
// Promise signature tests
|
|
var foo: ng.IPromise<number>;
|
|
foo.then((x) => {
|
|
// x is inferred to be a number
|
|
return "asdf";
|
|
}).then((x) => {
|
|
// x is inferred to be string
|
|
x.length;
|
|
return 123;
|
|
}).then((x) => {
|
|
// x is infered to be a number
|
|
x.toFixed();
|
|
return;
|
|
}).then((x) => {
|
|
// x is infered to be void
|
|
// Typescript will prevent you to actually use x as a local variable
|
|
// Try object:
|
|
return { a: 123 };
|
|
}).then((x) => {
|
|
// Object is inferred here
|
|
x.a = 123;
|
|
//Try a promise
|
|
var y: ng.IPromise<number>;
|
|
return y;
|
|
}).then((x) => {
|
|
// x is infered to be a number, which is the resolved value of a promise
|
|
x.toFixed();
|
|
});
|
|
|
|
// $q signature tests
|
|
namespace TestQ {
|
|
interface TResult {
|
|
a: number;
|
|
b: string;
|
|
c: boolean;
|
|
}
|
|
interface TValue {
|
|
e: number;
|
|
f: boolean;
|
|
}
|
|
var tResult: TResult;
|
|
var promiseTResult: angular.IPromise<TResult>;
|
|
var tValue: TValue;
|
|
var promiseTValue: angular.IPromise<TValue>;
|
|
|
|
var $q: angular.IQService;
|
|
var promiseAny: angular.IPromise<any>;
|
|
|
|
// $q constructor
|
|
{
|
|
let result: angular.IPromise<TResult>;
|
|
result = new $q<TResult>((resolve: (value: TResult) => any) => {});
|
|
result = new $q<TResult>((resolve: (value: TResult) => any, reject: (value: any) => any) => {});
|
|
result = $q<TResult>((resolve: (value: TResult) => any) => {});
|
|
result = $q<TResult>((resolve: (value: TResult) => any, reject: (value: any) => any) => {});
|
|
}
|
|
|
|
// $q.all
|
|
{
|
|
let result: angular.IPromise<any[]>;
|
|
result = $q.all([promiseAny, promiseAny]);
|
|
// TS should infer that n1 and n2 are numbers and have toFixed.
|
|
$q.all([1, $q.when(2)]).then(([ n1, n2 ]) => n1.toFixed() + n2.toFixed());
|
|
$q.all([1, $q.when(2), '3']).then(([ n1, n2, n3 ]) => n1.toFixed() + n2.toFixed() + n3.slice(1));
|
|
}
|
|
{
|
|
let result: angular.IPromise<TResult[]>;
|
|
result = $q.all<TResult>([promiseAny, promiseAny]);
|
|
}
|
|
{
|
|
let result: angular.IPromise<{[id: string]: any;}>;
|
|
result = $q.all({a: promiseAny, b: promiseAny});
|
|
}
|
|
{
|
|
let result: angular.IPromise<{a: number; b: string;}>;
|
|
result = $q.all<{a: number; b: string;}>({a: promiseAny, b: promiseAny});
|
|
}
|
|
|
|
|
|
// $q.defer
|
|
{
|
|
let result: angular.IDeferred<TResult>;
|
|
result = $q.defer<TResult>();
|
|
}
|
|
|
|
// $q.reject
|
|
{
|
|
let result: angular.IPromise<any>;
|
|
result = $q.reject();
|
|
result = $q.reject('');
|
|
}
|
|
|
|
// $q.resolve
|
|
{
|
|
let result: angular.IPromise<void>;
|
|
result = $q.resolve();
|
|
}
|
|
{
|
|
let result: angular.IPromise<TResult>;
|
|
result = $q.resolve<TResult>(tResult);
|
|
result = $q.resolve<TResult>(promiseTResult);
|
|
}
|
|
|
|
// $q.when
|
|
{
|
|
let result: angular.IPromise<void>;
|
|
result = $q.when();
|
|
}
|
|
{
|
|
let result: angular.IPromise<TResult>;
|
|
result = $q.when<TResult>(tResult);
|
|
result = $q.when<TResult>(promiseTResult);
|
|
|
|
result = $q.when<TResult, TValue>(tValue, (result: TValue) => tResult);
|
|
result = $q.when<TResult, TValue>(tValue, (result: TValue) => tResult, (any) => any);
|
|
result = $q.when<TResult, TValue>(tValue, (result: TValue) => tResult, (any) => any, (any) => any);
|
|
|
|
result = $q.when<TResult, TValue>(promiseTValue, (result: TValue) => tResult);
|
|
result = $q.when<TResult, TValue>(promiseTValue, (result: TValue) => tResult, (any) => any);
|
|
result = $q.when<TResult, TValue>(promiseTValue, (result: TValue) => tResult, (any) => any, (any) => any);
|
|
|
|
result = $q.when<TResult, TValue>(tValue, (result: TValue) => promiseTResult);
|
|
result = $q.when<TResult, TValue>(tValue, (result: TValue) => promiseTResult, (any) => any);
|
|
result = $q.when<TResult, TValue>(tValue, (result: TValue) => promiseTResult, (any) => any, (any) => any);
|
|
|
|
result = $q.when<TResult, TValue>(promiseTValue, (result: TValue) => promiseTResult);
|
|
result = $q.when<TResult, TValue>(promiseTValue, (result: TValue) => promiseTResult, (any) => any);
|
|
result = $q.when<TResult, TValue>(promiseTValue, (result: TValue) => promiseTResult, (any) => any, (any) => any);
|
|
}
|
|
}
|
|
|
|
|
|
var httpFoo: ng.IHttpPromise<number>;
|
|
httpFoo.then((x) => {
|
|
// When returning a promise the generic type must be inferred.
|
|
var innerPromise : ng.IPromise<number>;
|
|
return innerPromise;
|
|
}).then((x) => {
|
|
// must still be number.
|
|
x.toFixed();
|
|
});
|
|
|
|
httpFoo.success((data, status, headers, config) => {
|
|
var h = headers("test");
|
|
h.charAt(0);
|
|
var hs = headers();
|
|
hs["content-type"].charAt(1);
|
|
});
|
|
|
|
|
|
// Deferred signature tests
|
|
namespace TestDeferred {
|
|
var any: any;
|
|
|
|
interface TResult {
|
|
a: number;
|
|
b: string;
|
|
c: boolean;
|
|
}
|
|
var tResult: TResult;
|
|
|
|
var deferred: angular.IDeferred<TResult>;
|
|
|
|
// deferred.resolve
|
|
{
|
|
let result: void;
|
|
result = <void>deferred.resolve();
|
|
result = <void>deferred.resolve(tResult);
|
|
}
|
|
|
|
// deferred.reject
|
|
{
|
|
let result: void;
|
|
result = deferred.reject();
|
|
result = deferred.reject(any);
|
|
}
|
|
|
|
// deferred.notify
|
|
{
|
|
let result: void;
|
|
result = deferred.notify();
|
|
result = deferred.notify(any);
|
|
}
|
|
|
|
// deferred.promise
|
|
{
|
|
let result: angular.IPromise<TResult>;
|
|
result = deferred.promise;
|
|
}
|
|
}
|
|
|
|
namespace TestInjector {
|
|
let $injector: angular.auto.IInjectorService;
|
|
|
|
$injector.strictDi = true;
|
|
|
|
$injector.annotate(() => {});
|
|
$injector.annotate(() => {}, true);
|
|
}
|
|
|
|
|
|
// Promise signature tests
|
|
namespace TestPromise {
|
|
var result: any;
|
|
var any: any;
|
|
|
|
interface TResult {
|
|
a: number;
|
|
b: string;
|
|
c: boolean;
|
|
}
|
|
interface TOther {
|
|
d: number;
|
|
e: string;
|
|
f: boolean;
|
|
}
|
|
|
|
var tresult: TResult;
|
|
var tresultPromise: ng.IPromise<TResult>;
|
|
var tresultHttpPromise: ng.IHttpPromise<TResult>;
|
|
|
|
var tother: TOther;
|
|
var totherPromise: ng.IPromise<TOther>;
|
|
var totherHttpPromise: ng.IHttpPromise<TOther>;
|
|
|
|
var promise: angular.IPromise<TResult>;
|
|
|
|
// promise.then
|
|
result = <angular.IPromise<any>>promise.then((result) => any);
|
|
result = <angular.IPromise<any>>promise.then((result) => any, (any) => any);
|
|
result = <angular.IPromise<any>>promise.then((result) => any, (any) => any, (any) => any);
|
|
|
|
result = <angular.IPromise<TResult>>promise.then((result) => result);
|
|
result = <angular.IPromise<TResult>>promise.then((result) => result, (any) => any);
|
|
result = <angular.IPromise<TResult>>promise.then((result) => result, (any) => any, (any) => any);
|
|
result = <angular.IPromise<TResult>>promise.then((result) => tresultPromise);
|
|
result = <angular.IPromise<TResult>>promise.then((result) => tresultPromise, (any) => any);
|
|
result = <angular.IPromise<TResult>>promise.then((result) => tresultPromise, (any) => any, (any) => any);
|
|
result = <angular.IPromise<ng.IHttpPromiseCallbackArg<TResult>>>promise.then((result) => tresultHttpPromise);
|
|
result = <angular.IPromise<ng.IHttpPromiseCallbackArg<TResult>>>promise.then((result) => tresultHttpPromise, (any) => any);
|
|
result = <angular.IPromise<ng.IHttpPromiseCallbackArg<TResult>>>promise.then((result) => tresultHttpPromise, (any) => any, (any) => any);
|
|
|
|
result = <angular.IPromise<TOther>>promise.then((result) => tother);
|
|
result = <angular.IPromise<TOther>>promise.then((result) => tother, (any) => any);
|
|
result = <angular.IPromise<TOther>>promise.then((result) => tother, (any) => any, (any) => any);
|
|
result = <angular.IPromise<TOther>>promise.then((result) => totherPromise);
|
|
result = <angular.IPromise<TOther>>promise.then((result) => totherPromise, (any) => any);
|
|
result = <angular.IPromise<TOther>>promise.then((result) => totherPromise, (any) => any, (any) => any);
|
|
result = <angular.IPromise<ng.IHttpPromiseCallbackArg<TOther>>>promise.then((result) => totherHttpPromise);
|
|
result = <angular.IPromise<ng.IHttpPromiseCallbackArg<TOther>>>promise.then((result) => totherHttpPromise, (any) => any);
|
|
result = <angular.IPromise<ng.IHttpPromiseCallbackArg<TOther>>>promise.then((result) => totherHttpPromise, (any) => any, (any) => any);
|
|
|
|
// promise.catch
|
|
result = <angular.IPromise<any>>promise.catch((err) => any);
|
|
result = <angular.IPromise<TResult>>promise.catch((err) => tresult);
|
|
result = <angular.IPromise<TResult>>promise.catch((err) => tresultPromise);
|
|
result = <angular.IPromise<ng.IHttpPromiseCallbackArg<TResult>>>promise.catch((err) => tresultHttpPromise);
|
|
result = <angular.IPromise<TOther>>promise.catch((err) => tother);
|
|
result = <angular.IPromise<TOther>>promise.catch((err) => totherPromise);
|
|
result = <angular.IPromise<ng.IHttpPromiseCallbackArg<TOther>>>promise.catch((err) => totherHttpPromise);
|
|
|
|
// promise.finally
|
|
result = <angular.IPromise<TResult>>promise.finally(() => any);
|
|
result = <angular.IPromise<TResult>>promise.finally(() => tresult);
|
|
result = <angular.IPromise<TResult>>promise.finally(() => tother);
|
|
}
|
|
|
|
|
|
function test_angular_forEach() {
|
|
var values: { [key: string]: string } = { name: 'misko', gender: 'male' };
|
|
var log: string[] = [];
|
|
angular.forEach(values, function (value, key) {
|
|
this.push(key + ': ' + value);
|
|
}, log);
|
|
//expect(log).toEqual(['name: misko', 'gender: male']);
|
|
}
|
|
|
|
// angular.element() tests
|
|
var element = angular.element("div.myApp");
|
|
var scope: ng.IScope = element.scope();
|
|
var isolateScope: ng.IScope = element.isolateScope();
|
|
isolateScope = element.find('div.foo').isolateScope();
|
|
isolateScope = element.children().isolateScope();
|
|
|
|
|
|
// $timeout signature tests
|
|
namespace TestTimeout {
|
|
interface TResult {
|
|
a: number;
|
|
b: string;
|
|
c: boolean;
|
|
}
|
|
var fnTResult: (...args: any[]) => TResult;
|
|
var promiseAny: angular.IPromise<any>;
|
|
var $timeout: angular.ITimeoutService;
|
|
|
|
// $timeout
|
|
{
|
|
let result: angular.IPromise<any>;
|
|
result = $timeout();
|
|
}
|
|
{
|
|
let result: angular.IPromise<void>;
|
|
result = $timeout(1);
|
|
result = $timeout(1, true);
|
|
}
|
|
{
|
|
let result: angular.IPromise<TResult>;
|
|
result = $timeout(fnTResult);
|
|
result = $timeout(fnTResult, 1);
|
|
result = $timeout(fnTResult, 1, true);
|
|
result = $timeout(fnTResult, 1, true, 1);
|
|
result = $timeout(fnTResult, 1, true, 1, '');
|
|
result = $timeout(fnTResult, 1, true, 1, '', true);
|
|
}
|
|
|
|
// $timeout.cancel
|
|
{
|
|
let result: boolean;
|
|
result = $timeout.cancel();
|
|
result = $timeout.cancel(promiseAny);
|
|
}
|
|
}
|
|
|
|
|
|
function test_IAttributes(attributes: ng.IAttributes){
|
|
return attributes;
|
|
}
|
|
|
|
test_IAttributes({
|
|
$normalize: function (classVal){ return "foo" },
|
|
$addClass: function (classVal){},
|
|
$removeClass: function(classVal){},
|
|
$updateClass: function(newClass, oldClass){},
|
|
$set: function(key, value){},
|
|
$observe: function(name: any, fn: any){
|
|
return fn;
|
|
},
|
|
$attr: {}
|
|
});
|
|
|
|
class SampleDirective implements ng.IDirective {
|
|
public restrict = 'A';
|
|
name = 'doh';
|
|
|
|
compile(templateElement: ng.IAugmentedJQuery) {
|
|
return {
|
|
post: this.link
|
|
};
|
|
}
|
|
|
|
static instance():ng.IDirective {
|
|
return new SampleDirective();
|
|
}
|
|
|
|
link(scope: ng.IScope) {
|
|
|
|
}
|
|
}
|
|
|
|
class SampleDirective2 implements ng.IDirective {
|
|
public restrict = 'EAC';
|
|
|
|
compile(templateElement: ng.IAugmentedJQuery) {
|
|
return {
|
|
pre: this.link
|
|
};
|
|
}
|
|
|
|
static instance():ng.IDirective {
|
|
return new SampleDirective2();
|
|
}
|
|
|
|
link(scope: ng.IScope) {
|
|
|
|
}
|
|
}
|
|
|
|
angular.module('SameplDirective', []).directive('sampleDirective', SampleDirective.instance).directive('sameplDirective2', SampleDirective2.instance);
|
|
|
|
angular.module('AnotherSampleDirective', []).directive('myDirective', ['$interpolate', '$q', ($interpolate: ng.IInterpolateService, $q: ng.IQService) => {
|
|
return {
|
|
restrict: 'A',
|
|
link: (scope: ng.IScope, el: ng.IAugmentedJQuery, attr: ng.IAttributes) => {
|
|
$interpolate(attr['test'])(scope);
|
|
$interpolate('', true)(scope);
|
|
$interpolate('', true, 'html')(scope);
|
|
$interpolate('', true, 'html', true)(scope);
|
|
var defer = $q.defer();
|
|
defer.reject();
|
|
defer.resolve();
|
|
defer.promise.then(function(d) {
|
|
return d;
|
|
}).then(function(): any {
|
|
return null;
|
|
}, function(): any {
|
|
return null;
|
|
})
|
|
.catch((): any => {
|
|
return null;
|
|
})
|
|
.finally((): any => {
|
|
return null;
|
|
});
|
|
var promise = new $q((resolve) => {
|
|
resolve();
|
|
});
|
|
|
|
promise = new $q((resolve, reject) => {
|
|
reject();
|
|
resolve(true);
|
|
});
|
|
|
|
promise = new $q<boolean>((resolver, reject) => {
|
|
resolver(true);
|
|
reject(false);
|
|
});
|
|
}
|
|
};
|
|
}]);
|
|
|
|
// test from https://docs.angularjs.org/guide/directive
|
|
angular.module('docsSimpleDirective', [])
|
|
.controller('Controller', ['$scope', function($scope: any) {
|
|
$scope.customer = {
|
|
name: 'Naomi',
|
|
address: '1600 Amphitheatre'
|
|
};
|
|
}])
|
|
.directive('myCustomer', function() {
|
|
return {
|
|
template: 'Name: {{customer.name}} Address: {{customer.address}}'
|
|
};
|
|
});
|
|
|
|
angular.module('docsTemplateUrlDirective', [])
|
|
.controller('Controller', ['$scope', function($scope: any) {
|
|
$scope.customer = {
|
|
name: 'Naomi',
|
|
address: '1600 Amphitheatre'
|
|
};
|
|
}])
|
|
.directive('myCustomer', function() {
|
|
return {
|
|
templateUrl: 'my-customer.html'
|
|
};
|
|
});
|
|
|
|
angular.module('docsRestrictDirective', [])
|
|
.controller('Controller', ['$scope', function($scope: any) {
|
|
$scope.customer = {
|
|
name: 'Naomi',
|
|
address: '1600 Amphitheatre'
|
|
};
|
|
}])
|
|
.directive('myCustomer', function() {
|
|
return {
|
|
restrict: 'E',
|
|
templateUrl: 'my-customer.html'
|
|
};
|
|
});
|
|
|
|
angular.module('docsScopeProblemExample', [])
|
|
.controller('NaomiController', ['$scope', function($scope: any) {
|
|
$scope.customer = {
|
|
name: 'Naomi',
|
|
address: '1600 Amphitheatre'
|
|
};
|
|
}])
|
|
.controller('IgorController', ['$scope', function($scope: any) {
|
|
$scope.customer = {
|
|
name: 'Igor',
|
|
address: '123 Somewhere'
|
|
};
|
|
}])
|
|
.directive('myCustomer', function() {
|
|
return {
|
|
restrict: 'E',
|
|
templateUrl: 'my-customer.html'
|
|
};
|
|
});
|
|
|
|
angular.module('docsIsolateScopeDirective', [])
|
|
.controller('Controller', ['$scope', function($scope: any) {
|
|
$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
|
|
$scope.igor = { name: 'Igor', address: '123 Somewhere' };
|
|
}])
|
|
.directive('myCustomer', function() {
|
|
return {
|
|
restrict: 'E',
|
|
scope: {
|
|
customerInfo: '=info'
|
|
},
|
|
templateUrl: 'my-customer-iso.html'
|
|
};
|
|
});
|
|
|
|
angular.module('docsIsolationExample', [])
|
|
.controller('Controller', ['$scope', function($scope: any) {
|
|
$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
|
|
$scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
|
|
}])
|
|
.directive('myCustomer', function() {
|
|
return {
|
|
restrict: 'E',
|
|
scope: {
|
|
customerInfo: '=info'
|
|
},
|
|
templateUrl: 'my-customer-plus-vojta.html'
|
|
};
|
|
});
|
|
|
|
angular.module('docsTimeDirective', [])
|
|
.controller('Controller', ['$scope', function($scope: any) {
|
|
$scope.format = 'M/d/yy h:mm:ss a';
|
|
}])
|
|
.directive('myCurrentTime', ['$interval', 'dateFilter', function($interval: any, dateFilter: any) {
|
|
|
|
return {
|
|
link: function(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs:ng.IAttributes) {
|
|
var format: any,
|
|
timeoutId: any;
|
|
|
|
function updateTime() {
|
|
element.text(dateFilter(new Date(), format));
|
|
}
|
|
|
|
scope.$watch(attrs['myCurrentTime'], function (value: any) {
|
|
format = value;
|
|
updateTime();
|
|
});
|
|
|
|
element.on('$destroy', function () {
|
|
$interval.cancel(timeoutId);
|
|
});
|
|
|
|
// start the UI update process; save the timeoutId for canceling
|
|
timeoutId = $interval(function () {
|
|
updateTime(); // update DOM
|
|
}, 1000);
|
|
}
|
|
};
|
|
}]);
|
|
|
|
angular.module('docsTransclusionDirective', [])
|
|
.controller('Controller', ['$scope', function($scope: any) {
|
|
$scope.name = 'Tobias';
|
|
}])
|
|
.directive('myDialog', function() {
|
|
return {
|
|
restrict: 'E',
|
|
transclude: true,
|
|
templateUrl: 'my-dialog.html'
|
|
};
|
|
});
|
|
|
|
angular.module('docsTransclusionExample', [])
|
|
.controller('Controller', ['$scope', function($scope: any) {
|
|
$scope.name = 'Tobias';
|
|
}])
|
|
.directive('myDialog', function() {
|
|
return {
|
|
restrict: 'E',
|
|
transclude: true,
|
|
scope: {},
|
|
templateUrl: 'my-dialog.html',
|
|
link: function (scope: ng.IScope, element: ng.IAugmentedJQuery) {
|
|
scope['name'] = 'Jeff';
|
|
}
|
|
};
|
|
});
|
|
|
|
|
|
angular.module('docsIsoFnBindExample', [])
|
|
.controller('Controller', ['$scope', '$timeout', function($scope: any, $timeout: any) {
|
|
$scope.name = 'Tobias';
|
|
$scope.hideDialog = function () {
|
|
$scope.dialogIsHidden = true;
|
|
$timeout(function () {
|
|
$scope.dialogIsHidden = false;
|
|
}, 2000);
|
|
};
|
|
}])
|
|
.directive('myDialog', function() {
|
|
return {
|
|
restrict: 'E',
|
|
transclude: true,
|
|
scope: {
|
|
'close': '&onClose'
|
|
},
|
|
templateUrl: 'my-dialog-close.html'
|
|
};
|
|
});
|
|
|
|
angular.module('dragModule', [])
|
|
.directive('myDraggable', ['$document', function($document: any) {
|
|
return function(scope: any, element: any, attr: any) {
|
|
var startX = 0, startY = 0, x = 0, y = 0;
|
|
|
|
element.css({
|
|
position: 'relative',
|
|
border: '1px solid red',
|
|
backgroundColor: 'lightgrey',
|
|
cursor: 'pointer'
|
|
});
|
|
|
|
element.on('mousedown', function(event: any) {
|
|
// Prevent default dragging of selected content
|
|
event.preventDefault();
|
|
startX = event.pageX - x;
|
|
startY = event.pageY - y;
|
|
$document.on('mousemove', mousemove);
|
|
$document.on('mouseup', mouseup);
|
|
});
|
|
|
|
function mousemove(event: any) {
|
|
y = event.pageY - startY;
|
|
x = event.pageX - startX;
|
|
element.css({
|
|
top: y + 'px',
|
|
left: x + 'px'
|
|
});
|
|
}
|
|
|
|
function mouseup() {
|
|
$document.off('mousemove', mousemove);
|
|
$document.off('mouseup', mouseup);
|
|
}
|
|
};
|
|
}]);
|
|
|
|
angular.module('docsTabsExample', [])
|
|
.directive('myTabs', function() {
|
|
return {
|
|
restrict: 'E',
|
|
transclude: true,
|
|
scope: {},
|
|
controller: function($scope: ng.IScope) {
|
|
var panes: any = $scope['panes'] = [];
|
|
|
|
$scope['select'] = function(pane: any) {
|
|
angular.forEach(panes, function(pane: any) {
|
|
pane.selected = false;
|
|
});
|
|
pane.selected = true;
|
|
};
|
|
|
|
this.addPane = function(pane: any) {
|
|
if (panes.length === 0) {
|
|
$scope['select'](pane);
|
|
}
|
|
panes.push(pane);
|
|
};
|
|
},
|
|
templateUrl: 'my-tabs.html'
|
|
};
|
|
})
|
|
.directive('myPane', function() {
|
|
return {
|
|
require: '^myTabs',
|
|
restrict: 'E',
|
|
transclude: true,
|
|
scope: {
|
|
title: '@'
|
|
},
|
|
link: function(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, tabsCtrl: any) {
|
|
tabsCtrl.addPane(scope);
|
|
},
|
|
templateUrl: 'my-pane.html'
|
|
};
|
|
});
|
|
|
|
angular.module('multiSlotTranscludeExample', [])
|
|
.directive('dropDownMenu', function() {
|
|
return {
|
|
transclude: {
|
|
button: 'button',
|
|
list: 'ul',
|
|
},
|
|
link: function(scope, element, attrs, ctrl, transclude) {
|
|
// without scope
|
|
transclude().appendTo(element);
|
|
transclude(clone => clone.appendTo(element));
|
|
|
|
// with scope
|
|
transclude(scope, clone => clone.appendTo(element));
|
|
transclude(scope, clone => clone.appendTo(element), element, 'button');
|
|
transclude(scope, null, element, 'list').addClass('drop-down-list').appendTo(element);
|
|
}
|
|
};
|
|
});
|
|
|
|
angular.module('componentExample', [])
|
|
.component('counter', {
|
|
require: {'ctrl': '^ctrl'},
|
|
bindings: {
|
|
count: '='
|
|
},
|
|
controller: 'CounterCtrl',
|
|
controllerAs: 'counterCtrl',
|
|
template: function () {
|
|
return '';
|
|
},
|
|
transclude: {
|
|
'el': 'target'
|
|
}
|
|
})
|
|
.component('anotherCounter', {
|
|
controller: function(){},
|
|
require: {
|
|
'parent': '^parentCtrl'
|
|
},
|
|
template: '',
|
|
transclude: true
|
|
});
|
|
|
|
interface copyExampleUser {
|
|
name?: string;
|
|
email?: string;
|
|
gender?: string;
|
|
}
|
|
|
|
interface copyExampleScope {
|
|
|
|
user: copyExampleUser;
|
|
master: copyExampleUser;
|
|
update: (copyExampleUser: copyExampleUser) => any;
|
|
reset: () => any;
|
|
}
|
|
|
|
angular.module('copyExample', [])
|
|
.controller('ExampleController', ['$scope', function ($scope: copyExampleScope) {
|
|
$scope.master = { };
|
|
|
|
$scope.update = function (user) {
|
|
// Example with 1 argument
|
|
$scope.master = angular.copy(user);
|
|
};
|
|
|
|
$scope.reset = function () {
|
|
// Example with 2 arguments
|
|
angular.copy($scope.master, $scope.user);
|
|
};
|
|
|
|
$scope.reset();
|
|
}]);
|
|
|
|
namespace locationTests {
|
|
|
|
var $location: ng.ILocationService;
|
|
|
|
/*
|
|
* From https://docs.angularjs.org/api/ng/service/$location
|
|
*/
|
|
|
|
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
|
|
var searchObject = $location.search();
|
|
// => {foo: 'bar', baz: 'xoxo'}
|
|
|
|
|
|
// set foo to 'yipee'
|
|
$location.search('foo', 'yipee');
|
|
// => $location
|
|
|
|
// set foo to 5
|
|
$location.search('foo', 5);
|
|
// => $location
|
|
|
|
/*
|
|
* From: https://docs.angularjs.org/guide/$location
|
|
*/
|
|
|
|
// in browser with HTML5 history support:
|
|
// open http://example.com/#!/a -> rewrite to http://example.com/a
|
|
// (replacing the http://example.com/#!/a history record)
|
|
$location.path() == '/a'
|
|
|
|
$location.path('/foo');
|
|
$location.absUrl() == 'http://example.com/foo'
|
|
|
|
$location.search() == {}
|
|
$location.search({ a: 'b', c: true });
|
|
$location.absUrl() == 'http://example.com/foo?a=b&c'
|
|
|
|
$location.path('/new').search('x=y');
|
|
$location.url() == 'new?x=y'
|
|
$location.absUrl() == 'http://example.com/new?x=y'
|
|
|
|
// in browser without html5 history support:
|
|
// open http://example.com/new?x=y -> redirect to http://example.com/#!/new?x=y
|
|
// (again replacing the http://example.com/new?x=y history item)
|
|
$location.path() == '/new'
|
|
$location.search() == { x: 'y' }
|
|
|
|
$location.path('/foo/bar');
|
|
$location.path() == '/foo/bar'
|
|
$location.url() == '/foo/bar?x=y'
|
|
$location.absUrl() == 'http://example.com/#!/foo/bar?x=y'
|
|
}
|
|
|
|
// NgModelController
|
|
function NgModelControllerTyping() {
|
|
var ngModel: angular.INgModelController;
|
|
var $http: angular.IHttpService;
|
|
var $q: angular.IQService;
|
|
|
|
// See https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$validators
|
|
ngModel.$validators['validCharacters'] = function(modelValue, viewValue) {
|
|
var value = modelValue || viewValue;
|
|
return /[0-9]+/.test(value) &&
|
|
/[a-z]+/.test(value) &&
|
|
/[A-Z]+/.test(value) &&
|
|
/\W+/.test(value);
|
|
};
|
|
|
|
ngModel.$asyncValidators['uniqueUsername'] = function(modelValue, viewValue) {
|
|
var value = modelValue || viewValue;
|
|
return $http.get('/api/users/' + value).
|
|
then(function resolved() {
|
|
return $q.reject('exists');
|
|
}, function rejected() {
|
|
return true;
|
|
});
|
|
};
|
|
}
|
|
|
|
var $filter: angular.IFilterService;
|
|
|
|
function testFilter() {
|
|
|
|
var items: string[];
|
|
$filter("filter")(items, "test");
|
|
$filter("filter")(items, {name: "test"});
|
|
$filter("filter")(items, (val, index, array) => {
|
|
return true;
|
|
});
|
|
$filter("filter")(items, (val, index, array) => {
|
|
return true;
|
|
}, (actual, expected) => {
|
|
return actual == expected;
|
|
});
|
|
}
|
|
|
|
function testCurrency() {
|
|
$filter("currency")(126);
|
|
$filter("currency")(126, "$", 2);
|
|
}
|
|
|
|
function testNumber() {
|
|
$filter("number")(167);
|
|
$filter("number")(167, 2);
|
|
}
|
|
|
|
function testDate() {
|
|
$filter("date")(new Date());
|
|
$filter("date")(new Date(), 'yyyyMMdd');
|
|
$filter("date")(new Date(), 'yyyyMMdd', '+0430');
|
|
}
|
|
|
|
function testJson() {
|
|
var json: string = $filter("json")({test:true}, 2);
|
|
}
|
|
|
|
function testLowercase() {
|
|
var lower: string = $filter("lowercase")('test');
|
|
}
|
|
|
|
function testUppercase() {
|
|
var lower: string = $filter("uppercase")('test');
|
|
}
|
|
|
|
function testLimitTo() {
|
|
var limitTo = $filter("limitTo");
|
|
var filtered: number[] = $filter("limitTo")([1,2,3], 5);
|
|
filtered = $filter("limitTo")([1,2,3], 5, 2);
|
|
|
|
var filteredString: string = $filter("limitTo")("124", 4);
|
|
filteredString = $filter("limitTo")(124, 4);
|
|
}
|
|
|
|
function testOrderBy() {
|
|
var filtered: number[] = $filter("orderBy")([1,2,3], "test");
|
|
filtered = $filter("orderBy")([1,2,3], "test", true);
|
|
filtered = $filter("orderBy")([1,2,3], ['prop1', 'prop2']);
|
|
filtered = $filter("orderBy")([1,2,3], (val: number) => 1);
|
|
var filtered2: string[] = $filter("orderBy")(["1","2","3"], (val: string) => 1);
|
|
filtered2 = $filter("orderBy")(["1","2","3"], [
|
|
(val: string) => 1,
|
|
(val: string) => 2
|
|
]);
|
|
}
|
|
|
|
function testDynamicFilter() {
|
|
// Test with separate variables
|
|
var dateFilter = $filter("date");
|
|
var myDate = new Date();
|
|
dateFilter(myDate , "EEE, MMM d");
|
|
|
|
// Test with dynamic name
|
|
var filterName = 'date';
|
|
var dynDateFilter = $filter<ng.IFilterDate>(filterName);
|
|
dynDateFilter(new Date());
|
|
}
|
|
|
|
interface MyCustomFilter {
|
|
(value: string): string;
|
|
}
|
|
|
|
function testCustomFilter() {
|
|
var filterCustom = $filter<MyCustomFilter>('custom');
|
|
var filtered: string = filterCustom("test");
|
|
}
|
|
|
|
function parseTyping() {
|
|
var $parse: angular.IParseService;
|
|
var compiledExp = $parse('a.b.c');
|
|
if (compiledExp.constant) {
|
|
return compiledExp({});
|
|
} else if (compiledExp.literal) {
|
|
return compiledExp({}, {a: {b: {c: 42}}});
|
|
}
|
|
}
|
|
|
|
function parseWithParams() {
|
|
var $parse: angular.IParseService;
|
|
var compiledExp = $parse('a.b.c', () => null);
|
|
var compiledExp = $parse('a.b.c', null, false);
|
|
}
|
|
|
|
function doBootstrap(element: Element | JQuery, mode: string): ng.auto.IInjectorService {
|
|
if (mode === 'debug') {
|
|
return angular.bootstrap(element, ['main', function($provide: ng.auto.IProvideService) {
|
|
$provide.decorator('$rootScope', function($delegate: ng.IRootScopeService) {
|
|
$delegate['debug'] = true;
|
|
});
|
|
}, 'debug-helpers'], {
|
|
strictDi: true
|
|
});
|
|
}
|
|
return angular.bootstrap(element, ['main'], {
|
|
strictDi: false
|
|
});
|
|
}
|
|
|
|
function testIHttpParamSerializerJQLikeProvider() {
|
|
let serializer: angular.IHttpParamSerializer;
|
|
serializer({
|
|
a: "b"
|
|
});
|
|
}
|