Designing and Building Component-based AngularJS Applications

Components are the main application design difference with the new Angular. In this course, you'll learn how to build sites in a component-based way, where they are easier to design, develop, modify, and enhance in AngularJS.
Course info
Rating
(32)
Level
Intermediate
Updated
Jul 10, 2017
Duration
4h 8m
Table of contents
Course Overview
Course Introduction
Shifting to a Component-based Design - Angular (2+) Thinking
The Development Environment
Writing a Component
Laying out Your Component-based Application
Routing
Building Out the Rest of the App Structure
The Author List and Course List Components
Adding Services
Securing the Application
The Course Component and Its Internal Structure
The Author & Sidebar Components
Replacing the Home Component with Recent Courses
What About ASP.NET?
Description
Course info
Rating
(32)
Level
Intermediate
Updated
Jul 10, 2017
Duration
4h 8m
Description

Angular has made it necessary to learn new syntax, new installation procedures, and of course wants us to use TypeScript. However, the single most significant change is that it takes you down the path of component-based design. What if you are not ready to make the leap to the next version of Angular? Well, now you can design and develop your web applications using this great modular and encapsulated paradigm, and you can do it using the familiar AngularJS environment. In this course, Designing and Building Component-based AngularJS Applications, you'll learn how to design and develop these kinds of applications. First, you'll begin by leveraging all of your existing Angular knowledge and learning a hierarchical way of designing, making your web site a hierarchy of components. Next, you'll explore how to use the Angular UI Router, which replaces the Component Router. This offers you the same nested routing capability that you'll find in the new Angular router. Finally, you'll cover how to make your components secure, requiring the user to be authenticated before accessing them. By the end of this course, you'll have the necessary knowledge and understanding of how to utilize the component-based way that Angular does things now.

About the author
About the author

Whether playing on the local Radio Shack’s TRS-80 or designing systems for clients around the globe, Miguel has been writing software since he was 12 years old. He keeps himself heavily involved in every aspect, layer, nook, and cranny of app development and would not have it any other way.

More from the author
WCF Power Topics
Advanced
7h 10m
Feb 29, 2016
WCF End-to-End
Intermediate
10h 24m
Mar 9, 2015
More courses by Miguel Castro
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello everyone, my name is Miguel Castro, and welcome to my course, Designing and Building Component-based AngularJS Applications. I'm president and principal consultant at Melvicorp LLC. This course can very well be the most important AngularJS course you can watch today. It may also be the most fun. This course is a bridge between AngularJS and Angular, teaching you the component-based paradigm that Angular forces you into, but in AngularJS, which most of you, including myself, are still using, and have a lot invested in, the course it platform agnostic, so you only need to understand AngularJS to follow along. Some of the major topics that we will cover include a comparison between the traditional view controller design, and the more advanced and robust component design, how to lay out an application using components, thus making it easier to build, modify, and enhance later, using the Angular UI router to help us map URLs to various component hierarchy's, and also give the user full back button support without ever performing a full server trip. Making component secure, requiring the user to be authenticated before accessing them. And for you Microsoft developers out there, at the end I'll be showing you how you can incorporate ASP. NET into all of this as well. By the end of this course, you'll know everything you need to design complete component-based applications in AngularJS, and you'll be completely comfortable using this design paradigm. This means that when you take the leap into Angular, you'll have mastered the thing that truly makes it massively different from AngularJS. Before beginning the course, you should be familiar with traditional AngularJS development using conventional views and controllers with nothing else but JavaScript. Don't worry, I'll take you the rest of the way. After you've completed this course, you'll feel very comfortable diving into any course using Angular 2 or higher, since you will have already mastered the biggest difference in designing applications between Angular and AngularJS. I hope you'll join me on this journey to learn component-based design and development, with the Designing and Building Component- based AngularJS course, at Pluralsight.

Shifting to a Component-based Design - Angular (2+) Thinking
Hi this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS Applications. In this module, we're going to discuss what are components, in the context of Angular of course, and we're also going to talk about how they differ from directives. We're going to take a component and tear it apart, look at all its pieces, and then we're going to start talking about the design, the component-based design of an application, and compare it to a traditional design using regular views and controllers the way we've all done in the past using Angular.

The Development Environment
Hi this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS applications. In this module, I'll cover the devstack I'll be using for both the front-end and the back-end services. Then I'm going to go over the actual Index. html page I'll be starting with, where all the technologies I'll be discussing will be set up.

Writing a Component
Hi this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS applications. This module will be code, code, code, so I'm not going to bore you with a lot of slides because frankly what you're going to see here is a code manifestation of what you already learned earlier in component-based design. So I'll be starting with a very simple, traditional AngularJS controller and view example. Then I'll be rewriting the same scenario using a component. The component code patterns you're going to see here are exactly what I'll be using throughout the rest of the course.

Laying out Your Component-based Application
Hi this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS applications. In this module, I'm going to start by describing the application we're going to write, and explain why I chose it. Then we'll start laying out the groundwork for the application by designing its component structure. Part of the design process is the URL structure. This is a piece of the web application that is often either overlooked or left for the end, but in this case, we're going to talk about URLs as we design the component structure. And finally, we're going to jump into the code and manifest the design into actual components. The first iteration of the site which we'll do in this module will not have a lot of functionality or even navigation set up, but in the interest of crawling before we walk, you'll get a good understanding as to how components will be used throughout the site, as we continue in the subsequent modules, we'll add more and more.

Routing
Hi this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS applications. In this module, we're going to talk about routing and why it's important to think about it early in your application design. Then I'm going to show you the Angular UI Router, and why it's great for component-based design. Of course I'll be comparing it to other routing solutions in the process. Then we can start adding routing to the Course Viewer application. Now throughout the rest of the course as the app progresses, we'll incorporate more and more routing of course.

Building Out the Rest of the App Structure
Hi this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS applications. In this module, I'll be adding more routing states to our application in order to access the course and author components, as well as components they will contain. Since now we're talking about a single course or a single author, I'll show you how to handle parameters in our URLs, so that a state definition knows how to take it and use it in a component it will resolve. But data coming from URLs is not the only thing we'll need, I'll also be explaining nested states and nested components in more detail, and how data can be passed from one component to another one it contains. This will require me to add binding support to some components, effectively giving them properties. And of course, we'll add more navigation in order to get to the course component from the existing course list component we navigated to in the last module. And again, I'll be coding out the course section only, the author section being so similar in structure and patterns, will be fully available to you in the code downloads.

The Author List and Course List Components
Hi this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS Applications. In this module, I'm going to begin putting real functionality behind the components by bring data access into the picture. I'll start by bringing life to the course list and author list components, which if you remember, have hard coded temporary links in them right now. this module will add data access to the components themselves, but in the next module, I'll show you how to bring services into the mix.

Adding Services
Hi this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS Applications. In this module, I'll be discussing AngularJS services. I'll explain what they are and when you should be using them, and for what reasons. Going forward, it will be the pattern that I will be following. You'll see how easy it is to use services from AngularJS components, in fact, if you've worked with services in the context of traditional AngularJS applications, you'll find yourself in very familiar territory. Finally, we're going to convert the data access functionality we gave the course list and author list components to work from a service instead. Again, the slides in this module are very short, so we'll get to code very quickly.

Securing the Application
Hi this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS Applications. Very few websites are left completely open today, and that includes ours, so in this module we're going to add some relatively simple authentication to the Course Viewer application. Though this course is not going to focus in detail on security, I do want to add some authentication capability so a new user can register, and an existing user can log in and out of the application. But not to digress away from the main focus of the course, we'll be using the library I wrote a while ago, that takes care of the authentication details, and visual elements for us. I'll brief you in full on this library in a few moments, and of course it's fully included with the course download files.

The Course Component and Its Internal Structure
Hi this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS Applications. Okay it looks like our Course Viewer app is shaping up nicely, and we got past the security hurdle, and it wasn't too painful, was it? Now in this module, we're going to finish up all the remaining functionality of the course component. As I said earlier, this is the more complex component in the application, since it includes three subsections. We'll be displaying the list of modules in its appropriate component, and also displaying a detailed description to the course. The third course related subsection is the more complex one, the discussion list, and you'll see why. When writing that component, I'll revisit something I showed you in the previous module, function binding, only in this context, it will appear to more like event raising. Lastly, since the discussion list for a course should be a secure part of the application, and the entry of the discussion item specific to a user, will have to figure out how to display something that's dependent on a user being authenticated to the application.

The Author & Sidebar Components
Hi this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS Applications. In this module, we're going to finish out the author section, much like in the last module we did the course section. The author section is a bit simpler because we don't have any security to deal with. Now this module will be topped off by displaying the author information in the author sidebar that shows in the course.

Replacing the Home Component with Recent Courses
Hi, this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS Applications. This module will wrap up the Course Viewer application by showing a list of recently browsed courses in the homepage. Because this will only show if a user is logged in, we'll make this component security dependent, just like we did back with the course discussion list. There's only one slide in this module, so we're going to get to coding very soon.

What About ASP.NET?
Hi, this is Miguel Castro, and welcome back to Designing and Building Component-based AngularJS Applications. In this module, we're going to give all of my fellow Microsoft developers some love, and port the Course Viewer application to run in an ASP. NET MVC application. This of course means we're going to switch to Visual Studio as our editor. Now I'll be using 2017, but 2015 will work fine as well. I'll start by discussing some of the benefits for using ASP. NET, but then we're going to be jumping into the code very quickly again.