在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):kamilkisiela/apollo-angular开源软件地址(OpenSource Url):https://github.com/kamilkisiela/apollo-angular开源编程语言(OpenSource Language):TypeScript 85.9%开源软件介绍(OpenSource Introduction):Apollo AngularApollo Angular allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the Angular framework. Apollo Angular may be used in any context that Angular may be used. In the browser, in NativeScript, or in Node.js when you want to do server-side rendering. Apollo Angular requires no complex build setup to get up and running. As long as you have a GraphQL server you can get started building out your application with Angular immediately. Apollo Angular works out of the box with both Angular CLI ( Apollo Angular is:
Get started today on the app you’ve been dreaming of, and let Apollo Angular take you to the moon! InstallationIt is simple to install Apollo Angular and related libraries # installing Apollo Angular in Angular CLI
ng add apollo-angular
# installing each piece independently
yarn add @apollo/client apollo-angular graphql That’s it! You may now use Apollo Angular in any of your Angular environments. For an amazing developer experience you may also install the Apollo Client Developer tools for Chrome which will give you inspectability into your Apollo Angular data.
UsageNow you may create components that are connected to your GraphQL API. Finally, to demonstrate the power of Apollo Angular in building interactive UIs let us connect one of your components to your GraphQL server using the import {Component, OnInit} from '@angular/core';
import {Apollo, gql} from 'apollo-angular';
const GET_DOGS = gql`
{
dogs {
id
breed
}
}
`;
@Component({
selector: 'dogs',
template: `
<ul>
<li *ngFor="let dog of dogs | async">
{{dog.breed}}
</li>
</ul>
`,
})
export class DogsComponent implements OnInit {
dogs: Observable<any>;
constructor(private apollo: Apollo) {}
ngOnInit() {
this.dogs = this.apollo
.watchQuery({
query: GET_DOGS,
})
.valueChanges.pipe(map(result => result.data && result.data.dogs));
}
} To learn more about querying with Apollo Angular be sure to start reading the documentation article on queries. DocumentationAll of the documentation for Apollo Angular including usage articles and helpful recipes lives on: https://www.apollo-angular.com/ ContributingRead the Apollo Contributor Guidelines. This project uses Lerna. Bootstraping: yarn install Running tests locally: yarn test Formatting code with prettier: yarn prettier This project uses TypeScript for static typing. You can get it built into your editor with no configuration by opening this project in Visual Studio Code, an open source IDE which is available for free on all platforms. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论