0.1.0 • Published 6 years ago
django-angular v0.1.0
@angular/django
angular2-django is Django Rest Framework API for Angular 5+. Use the Django API in an easy way and as objects.
Usage
Some examples of the API.
List items from API
export class SnippetListComponent implements OnInit {
snippets: Snippet[];
constructor(
private api: SnippetApi,
)
ngOnInit() {
// Get first page from API filtered by language = Python and ordered
// by -created.
this.api.orderBy('-created').filter({'language': 'python'})
.page(1).all().subscribe((snippets: Snippet[]) => {
this.snippets = snippets;
});
}
}
Get and item and edit it.
export class SnippetEditComponent implements OnInit {
snippet: Snippet;
highlightedCode: string;
localDateTime: string;
ownerFullName: string;
constructor(
private api: SnippetApi,
)
ngOnInit() {
// Get first page from API filtered by language = Python and ordered
// by -created.
this.api.get(12).subscribe((snippet: Snippet) => {
// Execute a method on Snippet
this.highlightedCode = snippet.getHighlightedCode();
// Execute a method on User serializer
this.ownerFullName = snippet.owner.getFullName();
// created is converted to Date
this.localDateTime = snippet.created.toLocaleDateString();
// Change snippet title (unsaved)
snippet.title = 'New snippet title'
// Save changes
snippet.save().subscribe();
});
}
}
Serializer and API
export class Snippet extends SerializerService {
@Field() title: string;
@Field() owner: User; // User is also a serializer
@Field() created: Date;
@Field() code: string;
@Field() language: string;
getHighlightedCode() {
// Method on Serializer
return '...'
}
}
@Injectable({
providedIn: 'root'
})
export class SnippetApi extends ApiService {
url = '/api/snippets/';
serializer = Snippet;
constructor(http: HttpClient) {
super(http);
}
}
Installation
To install this library, run:
$ npm install @angular/django --save
Consuming your library
Once you have published your library to npm, you can import your library in any Angular application by running:
$ npm install @angular/django
and then from your Angular AppModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { SampleModule } from '@angular/django';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify your library as an import
LibraryModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once your library is imported, you can use its components, directives and pipes in your Angular application:
<!-- You can now use your library component in app.component.html -->
<h1>
{{title}}
</h1>
<sampleComponent></sampleComponent>
Development
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint
License
MIT © nekmo
0.1.0
6 years ago