Angular 11: Working With Angular Modules

Angular 11    |    Beginner
  • 9 videos | 36m 12s
  • Includes Assessment
  • Earns a Badge
Likes 144 Likes 144
Angular helps build interactive and dynamic single-page applications (SPAs) through templating, two-way binding, modularization, RESTful API handling, dependency injection, and AJAX handling. Take this course to explore the fundamentals of Angular module and examine decorators associated with it. With the help of this course, you'll learn to create an Angular component without CLI, bootstrap components using Angular module, and create feature and shared modules. You'll also discover how to work with third-party modules like BrowserModule and export/import arrays. Upon completion of this course, you'll be in a position to outline the components of Angular Module and deepen your Angular skills for full stack development.


  • discover the key concepts covered in this course
    describe different elements of Angular module and the decorators associated with it
    create an Angular component without CLI, add a new component to the module, and describe the decorator associated with the new module
    Bootstrap components with the desired component by making it the main component for bootstrapping the application
    outline the inclusion and use of third party modules like BrowserModule and explain its functionalities
  • create a feature module, add components to it, and use it in the main module
    create a multi-modular system and share the module with multiple modules
    export and import different functionalities and components from other JavaScript files
    summarize the key concepts covered in this course


  • 1m 5s
    In this video, you’ll learn more about your instructor and this course. In this course, you’ll learn about modules. You’ll look specifically at NgModule. You’ll also learn how to create a component without the CLI. You’ll learn about bootstrapping components, the browser module, third-party modules, feature module, and shared modules. You'll look at all of these different modules as well as exporting and importing arrays. FREE ACCESS
  • 2m 29s
    In this video, you’ll learn more about the NgModule function. This is found in a file called app.module.ts. NgModule is a function. It organizes code for you. It contains features such as declarations, imports, providers, and bootstrapping. It also manages injectable objects, organizes related items together, and expands the application's capabilities by allowing you to add components. NgModule consolidates the components, directives, and pipes into a cohesive block of functionality. FREE ACCESS
  • Locked
    3.  Creating an Angular Component without CLI
    6m 4s
    In this video, you’ll watch a demo. In this demonstration, you’ll learn how to add a component to your existing application. You’ll do that using the boilerplate application. You’ll see this application was created using the command ng new and has been named Skills. This is just the boilerplate application; no components have been added to it yet. To add a component, you’ll use Visual Studio Code. FREE ACCESS
  • Locked
    4.  Bootstrapping Components Using Modules
    5m 15s
    In this video, you’ll watch a demo. In this demonstration, you’ll learn how to bootstrap your components. Onscreen, you’ll see the original application with your first component, the one you did do with the CLI. This was the HomeComponent. Now, you’ll switch over to Visual Studio Code, and you’ll see there's also a product folder. This folder has the files you need. Inside product.component.ts you’ll find the file that defines what your Component should do. FREE ACCESS
  • Locked
    5.  Explore Third-Party Modules like BrowserModule
    2m 45s
    In this video, you’ll learn more about modules that come with your Angular application. Angular is a front-end web-based application development platform. This means you need the browser in order to serve up the application and for users to interact with your application. This means the most important module is the BrowserModule. It is allows your application to run in the browser. FREE ACCESS
  • Locked
    6.  Creating Feature Module
    5m 16s
    In this video, you’ll watch a demo. In this demonstration, you’ll learn how to add a feature module to your application. A feature module helps you organize your code and organize other modules and components as well. Onscreen, you’ll see a boilerplate application that was built using ng new. The added component is called products. The content of that product component is Product List. That is all displayed onscreen in the original app HTML template. FREE ACCESS
  • Locked
    7.  Creating Shared Modules
    6m 36s
    In this video, you’ll watch a demo. In this demonstration, you’ll learn about shared modules. A shared module allows you put all of the common modules you would need for your application inside of one shared module. Then, whenever you start or you create a new module, you will simply import that shared module. FREE ACCESS
  • Locked
    8.  Working with Exports/Import Array
    4m 39s
    In this video, you’ll watch a demo. In this demonstration, you’ll learn how to add an external JavaScript file to your existing project. Onscreen, you’ll see a boilerplate application that has one component in it. You're looking at the code for that component. There’s also a feature module as well as a SharedModule. Now, you’ll add an external JavaScript file to the app. FREE ACCESS
  • Locked
    9.  Course Summary
    2m 4s
    In this video, you’ll summarize what you’ve learned in this course. You’ve learned about the NgModule and the various building blocks of the NgModule/ You learned that bootstrap array includes any component you want to have on the browser screen when the application starts. You also looked at creating a component without the CLI. You also learned about third-party modules and you created a feature module. Finally, you learned to build a SharedModule. FREE ACCESS


Skillsoft is providing you the opportunity to earn a digital badge upon successful completion on some of our courses, which can be shared on any social network or business platform.

Digital badges are yours to keep, forever.


Likes 29 Likes 29  
Likes 57 Likes 57  


Likes 43 Likes 43  
Likes 57 Likes 57