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.
What you'll learn
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.
Table of contents
- Overview 1m
- The Application 1m
- Designing a Component Tree - Home 1m
- Designing a Component Tree - Courses 1m
- Designing a Component Tree - Authors 1m
- Creating Root Component and Test 2m
- Adding First Two Child Components of the Root 3m
- Add Home Component and Test 2m
- Show Course List on Root Component 1m
- Course and Author List Components 2m
- Adding Course Component 1m
- Adding Static Course-contained Components 2m
- Adding Module, Description, and Discussion Components 1m
- Hookup Components to Course and Test 1m
- Component Border Trick 4m
- Overview 1m
- Routing and URLs as Part of Design 1m
- Angular UI Router 2m
- Comparison to Component Router 1m
- The Angular UI Router State Machine 3m
- Demo Intro 1m
- Adding and Registering the First State 2m
- Adding Courses and Authors States 1m
- Modifying the Main Navigator Links 1m
- Replacing Placeholder with ui-view 1m
- Test in Browser 1m
- Overview 1m
- States with URL Parameters 2m
- Nested States and Components 2m
- Demo Intro 1m
- Setup Common Component Controller Pattern 1m
- Activate the Link to a Sample Course 1m
- Add Binding to Course Component 0m
- Adding Course Routing State 1m
- Show Course Info on Template and Test 3m
- Initialize Course Object and Pass Down to Others 2m
- Display in Course Heading and Test 1m
- Activate Links in Course Navigator 1m
- Add the Course-relative Routing States 1m
- Add Binding Property to All Three Sub-components 1m
- Review Routing Order of Operations 1m
- Add ui-view and Test 1m
- Rerouting to Default State and Retest 2m
- Overview 1m
- Accessing Data 1m
- The Two List Components 1m
- Add API Host Address and Inject into Component 2m
- Test API Calls in Browser 2m
- Add API Call to Course-list Component 1m
- Setup the Course-list HTML Template 1m
- Finish the Course-list HTML Rendering 2m
- Test the Course-list on the Browser 1m
- Coding the Author-list Component in Full 1m
- Test Author-list in Browser 1m
- Overview 1m
- AngularJS Controller Lifetime Scope 1m
- Why Services? 1m
- Demo Intro 0m
- Create Course Service 1m
- Add get-all-courses Function to Service 1m
- Add API Call to Service Functions 1m
- Change Course-list Controller to Call Service 1m
- Test Service-based Course-list in Browser 1m
- Create Author Service and Its Functions 1m
- Modify Author-list Component to Use Service 1m
- Test Service-based Author-list in Browser 1m
- Overview 1m
- Security in AngularJS 1m
- User Security 1m
- Angular/WebAPI Security Library 1m
- Demo Intro 1m
- Ensure Security Library Is Loaded 1m
- Show Security Library Contents 1m
- Add User-panel and Test 1m
- Add User Account Service 1m
- Add Functions to User Account Service 1m
- Inject Services into User-status Component 1m
- Add Post-register Function to Controller 1m
- Explain Callback and Order of Operation in Library 2m
- Add Post-login and Helper Functions 1m
- Add Initialization Function to Controller 1m
- Wire Things up in User-status Component 1m
- Show Function Bindings in Security Components 1m
- Test Login and Register in Browser 1m
- Discuss State Variables in Security Library 1m
- Overview 1m
- Course Component 1m
- Demo Intro 0m
- Retrieve Course Information 1m
- Course Passing and API Call Explanation 1m
- Course-modules Component HTML Template 1m
- Test in Browser 1m
- Add Time-formatting Functions 1m
- Testing in Browser 1m
- Course-description Component and Test 1m
- Fill in Course-heading Component 1m
- Course-discussion Component 1m
- Course Discussion Item Entry 0m
- Security Dependency 2m
- Demo Introduction 0m
- On-changes Hook in Course-discussion Component 1m
- Add Secure API Call to Course Service 1m
- Get the Discussion List 1m
- Course-discussion-list Component 1m
- Course-discussion-list Component HTML Template 1m
- Display Course Discussion List and Test 2m
- Format Discussion Item Date 1m
- Create Discussion-item Component 1m
- Add Button and Item Component to Parent 2m
- Test in the Browser 1m
- Add Discussion Item to Service 1m
- Add Functions to Discussion Component 2m
- Add Visual Elements to Discussion-item Component 1m
- Raise Events from Discussion-item Component 2m
- Wiring up Events 1m
- Test Add-comment in Browser 2m
- Add Logged-in Property to Trigger Change 3m
- Final Test 1m
- Overview 1m
- Author Component 1m
- Author Sidebar Component 2m
- Demo Intro 1m
- Show First Goals in Browser 1m
- Make Service Call to Get an Author 1m
- Author-heading Component and Test 1m
- Author-bio Component and Test 2m
- Setup the Author-courses Component 1m
- Make Service Call to Get Author Courses 1m
- Author-courses Template 1m
- Test Author Section in Full 1m
- Couple Author-sidebar to Course component 1m
- Add On-changes Hook to Sidebar Component 2m
- Calculate Course Length and Release Date 1m
- Start Sidebar Template and Explain Routing 1m
- Finish Sidebar Template 1m
- Final Test 1m
- Overview 1m
- Recent Courses Component 1m
- Add Functions to Add Recently Viewed Courses 2m
- Get and Clear Functions in the Service 1m
- Update Recent List in Course Component 1m
- Create New Component 1m
- Retreive Recent Course List in Component 1m
- Setup Recent-courses Component Template 1m
- Fill in the Template Content 1m
- Show Component and Test 1m
- Add Security Dependency and Re-test 1m
- Add Clear List Call and Link 1m
- Final Test 2m
- Overview 1m
- Why ASP.NET? 1m
- Tour of Skeletal Site and Layout Page 2m
- The App Folder and Its Contents 2m
- Adding All Course Viewer Files 1m
- Add CSHTML Shell View 2m
- Test Run 1m
- Scripts-section Contents 2m
- Bootsrapping the AngularJS Module 3m
- Setting up the Styles 1m
- Finish View by Showing Root Component 1m
- Full Test 4m
- Fixing Null-check Bug in Component 1m
- Full Routing Process Explanation 3m
- Summary and Farewell 1m
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 insists on staying heavily involved and up-to-date on all aspects of software application design & development, and projects that diversity onto the type of training and consulting he provides to his customers and believes that it’s never just about understand the technologies, but how technologies work together. Miguel is a Microsoft... more