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.
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.
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.
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.