Code with Us: Angular Quick Start

Follow along as John Papa and Ward Bell build a form-based, customer management app from scratch. You'll create visual components that display data and respond to user input with data binding, write a service to retrieve the data over HTTP, and more.
Course info
Rating
(141)
Level
Beginner
Updated
Feb 10, 2017
Duration
3h 26m
Table of contents
Description
Course info
Rating
(141)
Level
Beginner
Updated
Feb 10, 2017
Duration
3h 26m
Description

John Papa and Ward Bell demonstrate writing an application in Angular. Follow along as they build a form-based, customer management app from scratch. Create visual components that display data and respond to user input with data binding, write a service to retrieve the data over HTTP, organize the code in modules, and test it. You'll complete exercises along the way to lock in concepts and test your understanding.

About the author
About the author

Ward is a Microsoft MVP and the V.P. of Technology at IdeaBlade, makers of the "DevForce" .NET application development product. Ward often obsesses on client technologies for business applications, data access, and development practices.

More from the author
Play by Play: Angular Design Solutions
Beginner
2h 13m
Oct 18, 2017
More courses by Ward Bell
About the author

John Papa is a Principal Developer Advocate with Microsoft and an alumnus of the Google Developer Expert, Microsoft Regional Director, and MVP programs.

More from the author
Developing Faster with the Vue CLI
Beginner
2h 26m
Jan 1, 2019
More courses by John Papa
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Welcome to this Code With Us, with Pluralsight. Code With Us is an interactive series where we sit down with experts to work on a solution in real time. We'll be learning, writing some code, and then challenging you to write more code with us. In this course we invite you to come along and join me, John Papa, a Google developer expert in Angular, and my friend, Ward Bell, the Editor in Chief of the official Angular documentation, as we build an Angular app with you. This course contains lessons and exercises. In the lessons we'll build pieces of an Angular app together, then we'll ask you to help us extend it further in the exercises. At the end of a lesson, and when you reach an exercise, you can pause the video, and try coding a solution. Now take your time, and work at your own pace. Then, when you're ready to review it, and code along with us, just press Play again. Together we'll learn and build an app that uses Angular's fundamental concepts. We'll learn about property and event binding, creating and nesting components, input and output bindings, separating services, using dependency injection, and getting data over HTTP using promises and reactive extensions for JavaScript or RxJS. We're excited that you're joining us on this journey through coding an Angular app with us. We truly hope you enjoy it.

Setting up Angular Quick Start
You can download and run every step of the way in the course you just saw, every section, every exercise, by downloading the code from wardbell/code-with-us-angular on GitHub. You just go there, and you click this button, and you download the zip, and then you unzip it, and you follow the instructions, npm install, npm start, and you end up with this harness that we see here over on the right, which, in the dropdown, gives you access to every section, every exercise we did from simple binding to the completed exercises, all the way through to the final HTTP exercise that you should have completed, and even a bonus video here because we didn't get around to saving, so it shows you how you can use HTTP to save, so here I'm saving Katie, and I'll save here, and I'll click the Refresh button just to prove it came back. Alright, there she is. So it's all here, and of course, the source code is here too, because that's how it runs, and again, all the sections are here, and they run individually as well. Right now they're running in the harness, but you just come in here, toggle out the harness, and bring in just one of them, so I use section main, section-13/main. Refresh the browser, and there it is, you're back in business. Now when you're done exploring them individually, if that's your preference or you just want to run it in the harness, you just reverse what we did here, and you're back in business, the harness is back.