Practical Steps for Angular Front-End Development
- 4.5 hours on-demand video
- 1 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Explore the Angular framework by having the Angular CLI generate different pieces of code
- Design your own schematics so you can boost productivity when writing repetitive code specific to your app.
- Create your own schematics to generate boilerplate specific for your needs.
- Explore the foundations of Angular Routing using practical real-world applications. Fetch data before navigating to the route using Route Resolver
- Implement child routes in Angular Application by understanding how some routes may only be accessible and viewed within other routes.
- Sew data into your awesome-looking application by exploring template-binding concepts.
- Manage events in your application better by exploring event handling concepts.
- Discover routing concepts and have the benefits of a multi-page web app in a single page web app.
In this video, you will see how to verify the installed version of Angular CLI. You will also generate a new application to verify that Angular CLI works as intended. And you will see how to start a development server and check web page render.
• Verify the installed version of Angular CLI
• Generate a new application
• Start the Development Server and check the web page render
CLIs are new to the front-end development world and not everyone is familiar with them. We'll teach you the basics of CLI and show you some examples.
• Understand the CLI loop and fundamentals
• Run some example commands
In this video, we will see Angular CLI installation and configuration of many tools. You might want to change some of these configurations to suit your development process. By understanding the files and formats the different tools require, you'll be able to customize your development experience.
• Review configuration files development tools
• Review your environment-specific app settings
• Review configuration files for Angular
Running commands with multiples switches, options, and values can be error-prone. Versioning those commands as scripts inside your package.json allows those commands to be saved and shared across teams.
• Define a commonly reused command
• Create a script entry to run that command and version it
• Run well-documented scripts from your package manager
Enforcing a consistent coding style and following the Angular style guide can be time-consuming and error-prone. The ng lint command, powered by tslint and the codelyzer rules, makes automatic linting a breeze.
• Understand lint errors and style guide violations
• Run the ng lint command
• Fix the errors and violations reported
We want to generate modules as fast as possible. In this video you will see how Angular CLI generates them instantly, even adding a custom routing module if we needed.
• Run ng generate module name
• Review the created file
• Review the optional arguments for module generation
We want to generate services as fast as possible. In this video you will see how Angular CLI generates them instantly, including a spec file with unit test boilerplate code.
• Run ng generate service name
• Declare the service inside an NgModule providers list
• Implement the service code
We want to generate components as fast as possible. In this video you will see how Angular CLI generates them instantly, including a spec file with unit test boilerplate code and declaring them within the given module. I can also tweak a few options for the ng module annotation and generate files for the style and template HTML content for it.
• Run ng generate component name
• Implement the component user interface
• Learn about the extra arguments for component generation
We want to generate directives as fast as possible. In this video you will see how Angular CLI generates them instantly, including a spec file with unit test boilerplate code.
• Run ng generate component name
• Implement the directive logic
• Apply the directive to HTML tags and verify behavior
Parts of our code might be reused across different apps. We should group them into a library and publish them for other teams to use. Angular CLI makes generating and building a library extremely easy, setting up the files and configuring the compiler options to have it available immediately after compiling it, even before we publish it.
• Run ng generate library name
• Move code from module to the new librarymodule
• Build the library to have access to it from any app
Writing all the options using the long form, moving files into new folders after creation or cleaning up after generating a bunch of features takes time and effort. Angular CLI has various switches and mechanisms we can use with ng generate to abbreviate the options passed to the generation, specify the output directory and skip file creation when we're learning the new switches.
• Use names with relative paths, adding --force if overwriting
• Use abbreviated commands like ng g instead of ng generate
• Use --dry-run to see a preview of the file changes
Code generation should be extensible and reusable. In this video, we will look at ng generate and ng add command make use of schematics, which define transformations to be applied to our codebase.
• Understand code generation commands
• Add a new dependency using ng add
• Inspect the code changes made by the schematic
Schematics are abstract and hard to grasp. This video will define a custom schematic that allows us to understand the mechanisms behind it.
• Install dependencies and generate blank schematic
• Implement simple schematic logic
• Build and test schematic to verify behavior
Some libraries take multiple steps to be integrated into Angular projects. In this video we will see ng add command that automatically sets up libraries published in npm which have an ng add schematic defined.
• Create an ng-add schematic
• Implement complex logic
• Build, link and test to verify behavior
• Our apps are written many files
• Our code is not native for the browser
• Compile and bundle our dependencies and code into fewer files
Angular can compile templates JIT but that makes our apps bigger. AOT ships compiled templates. We don't use 100% of source code and our dependencies, we need to remove dead code and tree-shake it. Our code takes up a lot of space, we should minimize it.
• Understand build configuration options
• Set up appropriate options for prod
• Use ngx-build-plus if we need more flexibility
We don't want to build and deploy new versions of our app with every change. ng serve watches for file changes and reloads the browser. It can replace code without even losing the browser state and apply any config option from before.
• Run ng serve
• Specify optional optimizations
• Develop without having to re-deploy
Having more than one environment for testing and integration is the norm. These environments should be easier to debug and faster to build than production versions.
• Understand different environments and configurations
• Create a development configuration
• Run ng build specifying a configuration
Enabling multi-language experiences is a core feature of the Angular framework. Preparing the build process and extracting the messages we need to localize is made easier by using the Angular CLI's build settings and i18n command.
• Tag messages in your app, extract them with ng xi18n
• Localize messages
• Set up build command with AOT language settings
• Make sure source maps are enabled for your app
• Deploy your compiled app or run the dev server
• Inspect mapped code and debug from dev tools
Running a development server is really easy, but the default networking settings make it impossible to access outside your computer. During rapid iteration, it's very useful to make your development version available on another device like your phone or a co-worker’s computer.
• Check that your ports are not used
• Disable host checking
• Use a network tunnel like local tunnel
Angular CLI doesn't perform Ahead-of-Time compilation on templates when developing. Sometimes the watch process can miss file changes. Restarting the development server or running a build with --aot enabled will ensure your templates are compiling correctly.
• Angular template compilation defaults changed
• Don't use spaces for layout
• Restart the dev serve and run an --aot enabled build
Your app is relying on multiple dependencies. These dependencies are updated, patched, and maintained over time. Your app should be kept up to date within reason and avoid software decay. Tools like Greenkeeper and Renovate tap into your continuous integration process and can help you keep your apps healthy.
• Have a test suite and CI process in place
• Enable a dependency updater
• Keep an eye on pull requests and act accordingly
- Prior knowledge and understanding of Angular are assumed.
Angular is one of the largest and most widely used frameworks for front-end and full-stack application development. The latest Angular features embrace a mature UI component architecture, a powerful tool when developing scalable application interfaces. Angular CLI is a command-line interface tool helping you initialize, develop, scaffold, and maintain Angular applications. It provides you with boilerplates and therefore saves you time and effort!
This comprehensive 2-in-1 Course is packed with step-by-step instructions, working examples and focuses on how to build component-based user interfaces using Angular 8. You’ll initially explore the Angular framework by having the Angular CLI generate different pieces of code. You’ll design your own schematics so you can boost productivity when writing repetitive code specific to your app. Next, you’ll discover the foundations of Angular Routing and improve the performance of your Angular application using lazy loading. Finally, you’ll create modern user interfaces using Angular 8 and its component-based architecture.
By the end of this course, you will be confident in building your frontends in Angular and will be able to build component-based enhanced UIs using Angular CLI, routing and the features of Angular 8. Contents and Overview
This training program includes 2 complete courses, carefully chosen to give you the most comprehensive training possible.
The First Course, Angular CLI Recipes, covers how to skip writing boilerplate code and boost your productivity. This course will teach you how to generate an Angular application from scratch within seconds, showing you the tips, tricks, and techniques, you need. You will learn all about the CLI, ranging from generating a new app to quickly adding a component, directives, modules, services, guards, and other features effortlessly. The command-line interface provided by the Angular team will help you generate your Angular applications more effectively than ever. It will also teach you how to run a development environment, run tests for your project, easily add new features and keep your dependencies up to date. By the end of the course, you'll find a plethora of tips and tricks to improve performance and write better components. You will master using the Angular CLI and generate entire applications from scratch in a matter of seconds.
About the Authors
Orestes Carracedo is a full-stack software developer and has been working on the web since 2005. He's continuously worked with Angular since their first public versions and he has comprehensive knowledge of the framework's features and inner workings, including the Angular CLI.
- This Course is perfect for: