Angular 2 + Rails 5 Bootcamp
4.6 (410 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,141 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 + Rails 5 Bootcamp to your Wishlist.

Add to Wishlist

Angular 2 + Rails 5 Bootcamp

Learn how to build a real world Angular 2 application that utilizes multiple Ruby on Rails apps for backend data APIs.
4.6 (410 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,141 students enrolled
Created by Jordan Hudgens
Last updated 11/2016
English
Current price: $10 Original price: $150 Discount: 93% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 9 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build an Angular 2 application from scratch
  • Integrate an Angular 2 application with multiple Rails 5 APIs
  • Implement features such as: routing, data binding, data updates without a page refresh, and more!
View Curriculum
Requirements
  • A basic knowledge of Ruby on Rails
  • Access to a Mac or Linux computer (or online IDE such as C9)
Description

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:

  • How to configure your system to run Angular Applications
  • How to generate an Angular 2 application from scratch
  • What it takes to build Angular components
  • How to work with Angular Observables to automatically update page elements without even needing to refresh the page.
  • Along with how to communicate with APIs and parse the data they return.
  • And everything else you'll need in order to build real world Angular 2 + Rails applications!

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!

Who is the target audience?
  • This course is for developers who want to learn how to build real world Angular 2 applications that run on Ruby on Rails backend APIs
Students Who Viewed This Course Also Viewed
Curriculum For This Course
60 Lectures
08:48:15
+
Project Introduction
5 Lectures 38:44

In this guide I demo the final application that we're going to build and showcase the key skills that you'll learn.

Preview 04:22

This guide walks through the architecture that we're going to use in order to build out our microservice based Angular + Rails application.

Application Architecture for an Angular + Rails Application
08:22

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.

Monolith vs Microservice Architecture Deep Dive
10:33

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.

The Role of Services in Microservice Architecture
08:32

This lesson examines the role of components in microservices and how should be properly utilized to enable scalability in the process of application development.

The Role of Components in Microservices
06:55
+
System configuration for Angular 2 Application
2 Lectures 17:47

This guide explains how to configure your system to run Angular applications, including installing:

  • Homebrew
  • Node
  • NPM
Preview 04:25

Generating an Angular 2 Application from Scratch
13:22
+
Angular 2 Development
5 Lectures 01:02:18

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.

Hello Angular 2
23:05

In this lesson you'll learn what Browser Sync is along with how modules are stored inside of an Angular 2 application.

Preview 07:07

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.

Creating the App Component
11:56

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.

Introduction to Angular 2 Routing
14:59

Learn how to create separate view files in Angular 2 to organize HTML code into its own file that can communicate with Angular components.

How to Create View Files in Angular 2
05:11
+
Building the Document Management Component
5 Lectures 34:56

This guide gives a step by step guide for creating a new Angular component completely from scratch.

Create a Document Management Component
07:28

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.

Creating Links Between Pages in Angular
05:51

This guide explains how you can utilize Angular interfaces in order to model component data.

Creating an Angular Interface to Model Data
03:01

This guide examines the process for how to create mock data in an Angular 2 application that can be displayed to users.

Creating Mock Data in an Angular 2 Application
14:07

In this guide you'll learn how components share data with view templates so that data can be shown to users.

How to Access Component Data from an Angular View Template
04:29
+
Building the Proposal Component
9 Lectures 01:36:36

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.

Creating the Initial Proposal Component
07:25

Learn a step by step approach for creating an Angular 2 data model for our new proposal component.

Creating an Angular 2 Data Model for Proposals
06:26

This screencast shows how to populate an Angular 2 list view with data from the Proposal component.

Populating an Angular List View with Data
10:31

This guide explains how to build a component that will enable the ability to create new proposals.

Building an Angular 2 Component that will Create New Proposals
09:49

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.

Introduction to Angular 2 Forms
11:01

In this guide we'll finish building the Angular form that will manage the creation process for our proposal component.

Preview 18:28

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.

How to Implement Dynamic Data Validations in Angular 2
11:44

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.

Creating Dynamic Routes in Angular 2 Based on an ID Lookup
07:57

In this screencast you'll learn how to trigger active states on links based on whether a user in on a specific page.

Preview 13:15
+
Integrating Bootstrap 4 in an Angular 2 Application
15 Lectures 01:41:46

In this guide you'll learn how to install the Bootstrap 4 framework into an Angular application by leveraging the ng-bootstrap module.

Installing Bootstrap 4 into an Angular 2 Application with ng-bootstrap
07:00

In this guide I examine how you can set styles that are utilized by the entire application by creating a master CSS stylesheet.

How to Set Universal Styles in an Angular 2 Application
01:46

In this lesson you'll learn how to create and integration a Bootstrap 4 navigation bar into an Angular 2 application.

Creating a Bootstrap 4 Navigation Bar
14:06

This lesson discusses how you can dynamically add CSS styles in an Angular view template based on user actions.

How to Dynamically Add CSS Classes in an Angular 2 View
08:41

This lesson walks through the new Bootstrap 4 Card styles and then shows you how to integrate cards into an Angular application.

Using Bootstrap Cards in an Angular Application
08:16

In this guide you will learn how to create component specific stylesheets that are encapsulated inside of an Angular 2 component.

Creating Angular 2 Component Specific CSS Files
07:28

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.

Setting Additional Global Styles for All Application Components in Angular 2
03:30

This screencast walks through how to add custom styles to a Bootstrap 4 navigation bar and override the default styles.

How to Override the Default Bootstrap 4 Navigation Styles
06:59

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.

Adding Styles to an Angular 2 Form
08:59

In this screencast you will learn how to properly add styles to form validation messages by leveraging built in Bootstrap 4 classes.

How to Style Dynamic Validation Messages in Angular 2
05:49

Learn how to style form inputs in an Angular application by leveraging Bootstrap 4 form classes.

How to Style Form Inputs with Bootstrap 4 Styles
04:49

This screencast walks through how to integrate the Bootstrap 4 list group styles into an Angular 2 component.

How to Integrate the List Group Component Styles in Angular 2
12:12

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.

How to Work with Angular 2 Pipes to Format Currencies
04:38

In this guide we'll make the final style changes to the Angular front end application.

Final Style Changes to Angular Application
05:11

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.

How to Add a Custom Font to an Angular 2 Application
02:22
+
Creating a Ruby on Rails Microservice to Manage Documents
3 Lectures 22:45

This guide walks through how to generate a Ruby on Rails API application from scratch, along with what is included in an API app.

Generating a Rails 5 API Application from Scratch
10:01

This guide shows how to generate the data that we're going to make available to the Angular front end.

How to Generate Data in a Rails 5 Application
08:34

This guide explains how to configure the rack cors gem to allow for outside application communication.

How to Configure the Network Settings for a Rails API App
04:10
+
Connecting the Angular Front End with the Rails Document API App
5 Lectures 48:34

This guide examines how to create an Angular 2 Service that will enable the application to communicate with the Rails microservice.

Creating an Angular 2 Service for Managing API Data
06:48

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.

Introduction to Angular 2 Observables
18:18

In this screencast you're learn how to render API data from a Rails microservice into an Angular 2 application.

How to Render API Data in an Angular 2 Application
16:04

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.

Preview 04:49

This screencast walks through how to make the final style changes to the Angular Document component.

Final Style Changes to Angular 2 Document Component
02:35
+
Creating the Proposal Ruby on Rails Microservice API Application
2 Lectures 14:55

Walk through a step by step guide for building a Ruby on Rails API microservice application.

Building a Rails 5 API Microservice
02:29

Walk through how to utilize the Rails seeds file to generate sample data for the microservice API application.

Using the Seeds File to Create Sample Data in a Rails 5 API App
12:26
+
Connecting the Angular 2 App with the Rails Proposal Microservice
5 Lectures 01:07:26

This guide reviews how to integrate an Observable in Angular 2 in order to stream live data in the Proposal list component.

Using an Angular 2 Observable to Stream Live Data for the Proposal List Componen
16:07

In this screencast we will walk through how to connect an Angular 2 Show Page component with data coming from a Rails API.

How to Implement an Angular 2 Show Page Component with API Data
19:18

In this guide we'll refactor our links in order to build custom link function inside of a component instead of in the view.

How to Build a Custom Link Function in an Angular 2 Component
04:54

In this guide you'll learn how to build an Angular 2 Form Submit button for the proposal component.

Creating an Angular 2 Form Submit Button
09:01

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.

How to Create New Records in a Rails API from an Angular App
18:06
1 More Section
About the Instructor
Jordan Hudgens
4.5 Average rating
2,748 Reviews
30,622 Students
19 Courses
CTO at devCamp

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.