Sharing Top Content from the Angular-sphere.

Build a Desktop App to Track GitHub Pull Requests using Angular 2 and Electron.

  • You should have node installed in your machine.angular-cli : npm install -g @angular/cli: It is best practice to make use of angular-cli as it makes it easy to create an angular application that already works, right out of the box.electron: This allows us create a desktop wrapper for our app.Creating a…
  • Testing is not in the scope of this article, so we are only going to make use of GitHub.service.ts.Create a Github ServiceOpen github.service.ts file and update with the following code block:import { Injectable } from ‘@angular/core’;import {Http, Headers} from ‘@angular/http’;import class GithubService {constructor() {}}We had to import Injectable, Http, Headers, rxjs/add/operator/map.The…
  • The @Injectable() decorator tells TypeScript to emit metadata about the service.Http will be used to perform http requests using XMLHttpRequest as the default backend.Headers returns a new Headers instance from the given DOMString of Response Headers.Reactive Extensions for JavaScript (RxJS) is a reactive streams library that allows you to work…
  • Now, the service can be used within the component.import { Component, OnInit } from ‘@angular/core’;import {GithubService} from ‘app-github’,templateUrl: class GithubComponent implements OnInit {constructor(private _githubService:GithubService) {}}Get the GitHub Pull Request APIIn the GithubService class, create a function, getPulls().
  • In this function, we will be making a get request to and use the `map()` operator to transform the output:getpulls(){return = res.json());}res = res.json() implies that we are returning json content.Subscribe to the ObservableIn the github.component.ts, make a call the getpulls method, subscribe to the observable ={this.pulls= pulls;});Just above the…

Working on multiple projects? Constantly checking for pull requests on your Repos? Feel the need to manage this effectively? Electron allows you to write cross-platform desktop applications. In this…

Build a Desktop App to Track GitHub Pull Requests using Angular 2 and Electron.Working on multiple projects? Constantly checking for pull requests on your Repos? Feel the need to manage this effectively? Electron allows you to write cross-platform desktop applications.In this article, we will be using Electron and Angular 2 to build a desktop application that tracks Github Pull Requests.PrerequisitesWith a basic knowledge of HTML, CSS, JavaScript, and Angular, we are good to go. Knowledge of electron is also a plus but not compulsory.Installationnode: node.js is an open source server framework which we will be using to run the app. You should have node installed in your machine.angular-cli : npm install -g @angular/cli: It is best practice to make use of angular-cli as it makes it easy to create an angular application that already works, right out of the box.electron: This allows us create a desktop wrapper for our app.Creating a New Angular AppWe’ll be making use of the angular-cli to create an Angular project.Let’s install angular-cli as a global dependency:npm install -g @angular/cliNext, generate a new project using the ng CLI command:ng new electron-appInstall ElectronWe also need to install the Electron CLI tool globally:npm install -g electronThis exposes some commands that help build and package Electron apps.Creating the build filesOnce that’s done, we’ll create two files that show how the Electron app is packaged. We’ll put the files into a new Electron folder located in src folder:cd electron-app mkdir src/electronThe files are:The package.json file contains the information about where to find the…

Build a Desktop App to Track GitHub Pull Requests using Angular 2 and Electron.

Comments are closed, but trackbacks and pingbacks are open.