Are you ready to build professional applications that combine the Angular 2 application framework with Rails 5 as a backend? Then this is the course for you. My name is Jordan Hudgens, and I'll be your instructor for the course. In addition to being the lead instructor for devCamp I've also been building web applications for over a decade for organizations such as Eventbrite and Quip.
After you have completed this course you will be able to build modern Angular 2 and Ruby on Rails 5 applications. In fact, in this course we're going to develop three applications, with Angular working as the front end, and two Rails API apps functioning as the backend. This is a powerful combination since you will learn how to create incredibly fast, dynamic Angular applications that embrace features such as real time updates, along with the power and flexibility provided by the Rails framework.
We'll start the course by walking through the application architecture, this will teach you the concepts you will need to understand how microservices should be designed from a software engineering and best practice perspective. From there we will start building the Angular 2 front end application, including integrating the Bootstrap 4 framework to style the app. After the front end is complete we will create two Rails 5 API applications that will store and manage the data for the full system.
Throughout the course material you will learn concepts such as:
This is not an entry level course. You will need at least a basic understanding of Rails in order to go through this material. Additionally, I also recommend that you are familiar with the TypeScript programming language since the entire Angular 2 framework is built on TypeScript, however if you haven't worked with TypeScript you can still work through the course. Also, since we will build 2 Rails applications in this course I highly recommend that you are either working on a Mac or using an online IDE such as C9.
Each lesson of the course is paired with the source code that I used in the guide so you can check your work. And since the application we're building is a real world app I'll constantly be adding to the course material with new features, as I do with my other courses.
Please feel free to review the course curriculum and I look forward to going through the material with you on your development journey!
In this guide I demo the final application that we're going to build and showcase the key skills that you'll learn.
This guide walks through the architecture that we're going to use in order to build out our microservice based Angular + Rails application.
If you are interested in modern web development, you have probably already heard the monolithic vs microservice debate. It’s difficult to talk about web apps without this discussion arising. While you can create beautiful, functional applications with either option, it is important to look closely at the two so you can pick the one that is right for your needs.
This guide examines the role that services play in microservices, specially how they are used in order to allow applications to communicate with each other.
This lesson examines the role of components in microservices and how should be properly utilized to enable scalability in the process of application development.
This guide explains how to configure your system to run Angular applications, including installing:
In this guide you'll learn how to build your first Angular 2 application. This includes creating the module and component files necessary for running the Angular 2 app.
In this lesson you'll learn what Browser Sync is along with how modules are stored inside of an Angular 2 application.
This guide examines how to refactor the Angular application so that it utilizes a master app component that the rest of the application can work with.
This guide walks through an introduction to routing in Angular 2 applications, including what libraries to work with in order to allow users to navigate from page to page.
Learn how to create separate view files in Angular 2 to organize HTML code into its own file that can communicate with Angular components.
This guide gives a step by step guide for creating a new Angular component completely from scratch.
This guide walks through how to integrate links that allow users to navigate between pages of an application. This includes the ability to navigate to different pages without a page refresh.
This guide explains how you can utilize Angular interfaces in order to model component data.
This guide examines the process for how to create mock data in an Angular 2 application that can be displayed to users.
In this guide you'll learn how components share data with view templates so that data can be shown to users.
In this lesson we walk through how to create an Angular 2 component from scratch that will manage the logic for our new proposal feature.
Learn a step by step approach for creating an Angular 2 data model for our new proposal component.
This screencast shows how to populate an Angular 2 list view with data from the Proposal component.
This guide explains how to build a component that will enable the ability to create new proposals.
This screencast will teach you how to create a basic Angular 2 form, including how to work with ngModel to enable two way data binding and the ability to change content on the screen in real time.
In this guide we'll finish building the Angular form that will manage the creation process for our proposal component.
This screencast walks you through how to implement dynamic data validations in an Angular 2 application, with validation messages that appear on the form page.
Learn how to implement dynamic routes in an Angular 2 component, specifically to work with a show component that looks up a record based on the ID.
In this screencast you'll learn how to trigger active states on links based on whether a user in on a specific page.
In this guide you'll learn how to install the Bootstrap 4 framework into an Angular application by leveraging the ng-bootstrap module.
In this guide I examine how you can set styles that are utilized by the entire application by creating a master CSS stylesheet.
In this lesson you'll learn how to create and integration a Bootstrap 4 navigation bar into an Angular 2 application.
This lesson discusses how you can dynamically add CSS styles in an Angular view template based on user actions.
This lesson walks through the new Bootstrap 4 Card styles and then shows you how to integrate cards into an Angular application.
In this guide you will learn how to create component specific stylesheets that are encapsulated inside of an Angular 2 component.
In this guide we'll set a number of global styles for the application by customizing the master stylesheet along with organizing the stylesheet to conform with Angular best practices.
This screencast walks through how to add custom styles to a Bootstrap 4 navigation bar and override the default styles.
In this guide you will learn how to add custom styles to an Angular 2 form, including a number of Bootstrap 4 form classes specific to forms.
In this screencast you will learn how to properly add styles to form validation messages by leveraging built in Bootstrap 4 classes.
Learn how to style form inputs in an Angular application by leveraging Bootstrap 4 form classes.
This screencast walks through how to integrate the Bootstrap 4 list group styles into an Angular 2 component.
In this guide you'll learn how to work with Angular 2 pipes to format data, specifically we will walk through how to use the currency filter along with its options.
In this guide we'll make the final style changes to the Angular front end application.
In this screencast I walk through how to integrate a custom font into an Angular 2 application and then how to utilize the font throughout the application components.
This guide walks through how to generate a Ruby on Rails API application from scratch, along with what is included in an API app.
This guide shows how to generate the data that we're going to make available to the Angular front end.
This guide explains how to configure the rack cors gem to allow for outside application communication.
This guide examines how to create an Angular 2 Service that will enable the application to communicate with the Rails microservice.
This guide walks through: what an Observable is, how to understand the Reactive Development process, and how to implement an Observable in an Angular application.
In this screencast you're learn how to render API data from a Rails microservice into an Angular 2 application.
In this lesson we'll monitor how the Angular application allows for real time data updates without a page refresh by changing the database query scope in the Rails API.
This screencast walks through how to make the final style changes to the Angular Document component.
Walk through a step by step guide for building a Ruby on Rails API microservice application.
Walk through how to utilize the Rails seeds file to generate sample data for the microservice API application.
This guide reviews how to integrate an Observable in Angular 2 in order to stream live data in the Proposal list component.
In this screencast we will walk through how to connect an Angular 2 Show Page component with data coming from a Rails API.
In this guide we'll refactor our links in order to build custom link function inside of a component instead of in the view.
In this guide you'll learn how to build an Angular 2 Form Submit button for the proposal component.
In this guide you'll learn how to create new records in a Rails microservice via API Post requests from an Angular 2 front end.
Jordan Hudgens is the CTO and Founder of DevCamp where he leads instruction and curriculum development for all of the DevCamp and Bottega code schools around the US.
As a developer for over the past decade, Jordan has traveled the world building applications and training individuals on a wide variety of topics, including: Ruby development, big data analysis, and software engineering.
Jordan focuses on project driven education, as opposed to theory based development. This style of teaching is conducive to learning how to build real world products that adhere to industry best practices.
Additionally Jordan has published multiple books on programming and computer science, along with developing training curriculum for Learn.co, devCamp, and AppDev on the topics of Ruby on Rails, Java, AngularJS, NoSQL, API development, and algorithms.