Angular4 deploy to Heroku: MySportsFeeds API Part 2

Deploy an Angular4 app to Heroku. For Heroku this app uses a node.js server app.js with express. All routes will be going to dist/index.html. Run ng build to build the app in the dist directory. Run node app.js to serve the app at http://localhost:3001. The Procfile in this app’s root specifies the server for heroku to use. //Procfile web: node …

Angular4 HttpClient: MySportsFeeds API Part 1

Get data from api with HttpClient module The first thing I want to do in this app is get a list of all the pitchers in major league baseball. I used the MySportsFeeds API to find the correct endpoint to get all pitchers. I am able to use Angular’s http module to send a GET request for data using this …

Angular.js ng-init with ng-repeat Propublica Congress API part 2

Use ng-init with ng-repeat to run multiple functions In this app I need to get all the bills voted on and the voting results of each bill that each state senator has voted on since the start of 2017. With this api first I get a senator by id and pass that into the endpoint that will return all the …

Angular.js $http request data from Propublica Congress API Part 1

This is a short example of how to get data back from the ProPublica Congress API using Angular’s $http service on the front end of an app. Get data from api with $http The first thing I want to do in this app is get a list of all the state senators in congress. I used the ProPublica api docs …

Angular.js and Angular-material comment form sent to inbox with nodemailer

Connect comment form to personal email inbox using $mdPanel It is easy to set up email functionality from an app. By installing a couple of NPM modules such as nodemailer you can have comments sent to your inbox with a few lines of code. Nodemailer and sendgrid do all the heavy lifting here making setting up complicated server calls to …

Firebase and angular-material $mdDialog

Create, Update, and Delete data using angular-material $mdDialog. Create new data then save to your firebase db with this html and add new data function. <!– addNewDataModal.html –> <md-toolbar> <h2 class=”md-toolbar-tools”>Add Data</h2> </md-toolbar> <md-content layout-padding> <form> <md-input-container class=”md-block”> <label for=”name”>Name</label> <input type=”text” id=”name” ng-model=”vm.data.name” md-autofocus> </md-input-container> <md-input-container class=”md-block”> <label for=”avatar”>Link to image</label> <input type=”text” id=”avatar” ng-model=”vm.data.avatar”> </md-input-container> <md-input-container class=”md-block”> <label …

Create Firebase User for authentication

Create Firebase User for authentication Create a firebase user by going to your firebase console and in the sidenav under Develop click on the Authentication option. In Authentication go to the SIGN-IN METHOD tab and enable Email/Password. Then click on USERS tab and click ADD USER button. Enter an email and password. You can authenticate the user on the client …

Angular, Firebase, Heroku Single Page App

Angular Material List – Demo This is a single page app which is a dynamic list showing my favorite websites that offer coding lessons. Description This application is made with angular.js (version 1.5.8) and the most current version of angular-material. This SPA app is hosted for free on heroku (cloud application platform). The data is served by firebase which is …

WordPress on Heroku

Description This website is a wordpress(version 4.1.1) website hosted for free on heroku. It is based on this wordpress-heroku template that I cloned and used to deploy quickly. But first before deploy set up local development on OS-X or Linux(Apache) and inside the themes directory add custom theme folder and install plugins related to the theme (important before you deploy …

Contractor for the Web

This blog-post covers my early stages of an at first confusing yet productive path to learning how to be a Web Developer, learning how to write code, and learning modern responsive design. I’ll talk about affordable Web Developer courses for absolute beginners and share my experiences along the way. It started with a sarcastic titled page “So you want to …