mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-26 06:05:54 +08:00
Andre Wiggins
@@ -2,27 +2,23 @@
|
||||
|
||||
## Referencing AngularJS definition files in your code
|
||||
|
||||
To do that, simply add `` at the top of your code.
|
||||
|
||||
That will make available to your code all interfaces AngularJS' main module **ng** implements, as well as the **AUTO** module.
|
||||
Read the [TypeScript handbook](https://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html) for details on consuming these type definitions.
|
||||
|
||||
If you are including other AngularJS' modules in your code, like **ngResource**, just like you needed to include the additional module implementation file in your code, _angular-resource.js_, you will also need to reference the definitions file related to that module. Your code would then have the following definitions files reference:
|
||||
|
||||
|
||||
|
||||
|
||||
Having these modules in separated files is actually good because they sometimes either augment or modify some of **ng**'s interfaces, and thus those differences should only be available to you when you really need them. Also, it forces you to explicit what you're going to be using.
|
||||
|
||||
|
||||
Having these modules in separated packages is actually good because they sometimes either augment or modify some of **ng**'s interfaces, and thus those differences should only be available to you when you really need them. Also, it forces you to explicit what you're going to be using.
|
||||
|
||||
The following extra definition files are available for referencing:
|
||||
|
||||
* angular-resource.d.ts (for the **ngResource** module)
|
||||
* angular-route.d.ts (for the **ngRoute** module)
|
||||
* angular-cookies.d.ts (for the **ngCookies** module)
|
||||
* angular-sanitize.d.ts (for the **ngSanitize** module)
|
||||
* angular-animate.d.ts (for the **ngAnimate** module)
|
||||
* angular-mocks.d.ts (for the **ngMock** and **ngMockE2E** modules)
|
||||
|
||||
(postfix with version number for specific verion, eg. angular-resource-1.0.d.ts)
|
||||
* angular-resource/index.d.ts (for the **ngResource** module)
|
||||
* angular-route/index.d.ts (for the **ngRoute** module)
|
||||
* angular-cookies/index.d.ts (for the **ngCookies** module)
|
||||
* angular-sanitize/index.d.ts (for the **ngSanitize** module)
|
||||
* angular-animate/index.d.ts (for the **ngAnimate** module)
|
||||
* angular-mocks/index.d.ts (for the **ngMock** and **ngMockE2E** modules)
|
||||
|
||||
## The Angular Static
|
||||
|
||||
@@ -31,7 +27,7 @@ The definitions declare the AngularJS static variable `angular` as ambient. That
|
||||
|
||||
## Definitions modularized
|
||||
|
||||
To avoid cluttering the list of suggestions as you type in your IDE, all interfaces reside in their respective module namespace:
|
||||
To avoid cluttering the list of suggestions as you type in your IDE, all interfaces reside in their respective module namespace after you include their respective definitions:
|
||||
|
||||
* `ng` for AngularJS' **ng** module
|
||||
* `ng.auto` for **AUTO**
|
||||
@@ -105,128 +101,3 @@ function Controller($scope: ICustomScope) {
|
||||
|
||||
## Examples
|
||||
|
||||
### Working with $resource
|
||||
```ts
|
||||
|
||||
|
||||
|
||||
// We have the option to define arguments for a custom resource
|
||||
interface IArticleParameters {
|
||||
id: number;
|
||||
}
|
||||
|
||||
interface IArticleResource extends ng.resource.IResource<IArticleResource> {
|
||||
title: string;
|
||||
text: string;
|
||||
date: Date;
|
||||
author: number;
|
||||
|
||||
// Although all actions defined on IArticleResourceClass are avaiable with
|
||||
// the '$' prefix, we have the choice to expose only what we will use
|
||||
$publish(): IArticleResource;
|
||||
$unpublish(): IArticleResource;
|
||||
}
|
||||
|
||||
// Let's define a custom resource
|
||||
interface IArticleResourceClass extends ng.resource.IResourceClass<IArticleResource> {
|
||||
// Overload get to accept our custom parameters
|
||||
get(): ng.resource.IResource;
|
||||
get(params: IArticleParameters, onSuccess: Function): IArticleResource;
|
||||
|
||||
// Add our custom resource actions
|
||||
publish(): IArticleResource;
|
||||
publish(params: IArticleParameters): IArticleResource;
|
||||
unpublish(params: IArticleParameters): IArticleResource;
|
||||
}
|
||||
|
||||
function MainController($resource: ng.resource.IResourceService) {
|
||||
|
||||
// IntelliSense will provide IActionDescriptor interface and will validate
|
||||
// your assignment against it
|
||||
var publishDescriptor: ng.resource.IActionDescriptor;
|
||||
publishDescriptor = {
|
||||
method: 'GET',
|
||||
isArray: false
|
||||
};
|
||||
|
||||
// I could still create a descriptor without the interface...
|
||||
var unpublishDescriptor = {
|
||||
method: 'POST'
|
||||
}
|
||||
|
||||
// A call to the $resource service returns a IResourceClass. Since
|
||||
// our own IArticleResourceClass defines 2 more actions, we cast the return
|
||||
// value to make the compiler aware of that
|
||||
var articleResource = $resource<IArticleResource, IArticleResourceClass>('/articles/:id', null, {
|
||||
publish : publishDescriptor,
|
||||
unpublish : unpublishDescriptor
|
||||
});
|
||||
|
||||
// Now we can do this
|
||||
articleResource.unpublish({ id: 1 });
|
||||
|
||||
// IResourceClass.get() will be automatically available here
|
||||
var article: IArticleResource = articleResource.get({id: 1}, function success() {
|
||||
// Again, default + custom action here...
|
||||
article.title = 'New Title';
|
||||
article.$save();
|
||||
article.$publish();
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Working with $resource in angular-1.0 definitions
|
||||
```ts
|
||||
|
||||
|
||||
|
||||
// Let's define a custom resource
|
||||
interface IArticleResourceClass extends ng.resource.IResourceClass {
|
||||
publish: ng.resource.IActionCall;
|
||||
unpublish: ng.resource.IActionCall;
|
||||
}
|
||||
interface IArticleResource extends ng.resource.IResource {
|
||||
title: string;
|
||||
text: string;
|
||||
date: Date;
|
||||
author: number;
|
||||
$publish: ng.resource.IActionCall;
|
||||
$unpublish: ng.resource.IActionCall;
|
||||
}
|
||||
|
||||
function MainController($resource: ng.resource.IResourceService) {
|
||||
|
||||
// IntelliSense will provide IActionDescriptor interface and will validate
|
||||
// your assignment against it
|
||||
var publishDescriptor: ng.resource.IActionDescriptor;
|
||||
publishDescriptor = {
|
||||
method: 'GET',
|
||||
isArray: false
|
||||
};
|
||||
|
||||
// I could still create a descriptor without the interface...
|
||||
var unpublishDescriptor = {
|
||||
method: 'POST'
|
||||
}
|
||||
|
||||
// A call to the $resource service returns a IResourceClass. Since
|
||||
// our own IArticleResourceClass defines 2 more actions, we cast the return
|
||||
// value to make the compiler aware of that
|
||||
var articles = <IArticleResourceClass> $resource('/articles/:id', null, {
|
||||
publish : publishDescriptor,
|
||||
unpublish : unpublishDescriptor
|
||||
});
|
||||
|
||||
// Now we can do this
|
||||
articles.unpublish({ id: 1 });
|
||||
|
||||
// IResourceClass.get() will be automatically available here
|
||||
var article = <IArticleResource> articles.get({id: 1});
|
||||
|
||||
// Again, default + custom action here...
|
||||
article.title = 'New Title';
|
||||
article.$save();
|
||||
article.$publish();
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user