Angular Cheat Sheet Angular is a TypeScript based open-source web application framework used in building both web and mobile based applications. In this article, we will go through some of the angular features by explaining some of its core API. You can follow this angular cheat sheet and use in your project. Ng-Conf is one of the world’s largest angular conference which takes place every year. And recently they have released an Angular 9 Cheat Sheet which involves the changes that are going to apply in Angular 9. In this blog, we’ll see some of the changes that are going to happen in Angular 9. Angular Cheats ngForm replaced with ng-Form. Angular is a TypeScript based open-source web application framework used in building both web and mobile-based applications. In this article, we will go through some of the angular features by explaining some of its core API. You can follow this angular cheat sheet to build your project. Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular. Abstract: This Angular 10 Cheatsheet tutorial details significant changes in Angular 9 and some new features introduced in Angular 10. It also contains info to upgrade to Angular 10. Angular is a popular framework for JavaScript/ TypeScript application development.
Updated June 6, 2018
In this post I give an overview of the most uses Angular CLI command.
Using the CLI commands can greatly boost your productivity on Angular projects.
Create a new app
Create a new angular application with the default styling option CSS.
Create new angular project with scss styling and a routing module.
More info: https://github.com/angular/angular-cli/wiki/new
Build and start the app
Build the app and start it as a webserver.
You can reach the app at: http://localhost:4200/
Build your app and open it in the webbrowser
Serve your app on a different port and use ssl.
Your app will be here: https://localhost:4444/
Build using Ahead of Time compilation.
This is useful to test aot, which will be used when you compile for production.
Serve your app inside a base url
This will run the app below the url /my-app.
Your app will be here: http://localhost:4200/my-app/
This is useful when you are deploying later to a similar URL and want to develop with this URL too.
More info on ng serve : https://github.com/angular/angular-cli/wiki/serve
Build the app
Default build
Compiles the application into an output directory.
The build artifacts will be stored in the dist/ directory.
Production build
Productie build for a app with a base url: /my-app/
Environment test Build for a app with a base url: /my-app/
Build dev environment with all production elements enabled
Provide an output path for the compiled code.
Useful when automating your workflow.
More info on build: https://github.com/angular/angular-cli/wiki/build
Update the app
Updates the current application to latest versions.
See the update without making changes.
Run through without making any changes.
Will list all files that would have been created when running ng update.
More info: https://github.com/angular/angular-cli/wiki/update
Generate
Generates the specified blueprint.
You can also use the shorter notation: ng g
I will use the short notations in the examples below.
For the full notation see the official documentation.
Generate a module
Generate a module with a routing module
This is handy when creating a lazy loading module.
Generate a component
Generate a component without a spec file
Generate a interface
Generate an interface with a “type”
This will create an interface with the file name: my-interface.green.ts.
Generate a class
Generate an enumeration
Generate a service
Generate a guard
Generate a pipe
Online Cheat Sheet Maker
Generate a directive
Simulating a generate command.
Add the option –dry-run (-d) to run generate without making any changes.
It will list all files that would have been created when running ng generate.
More information on generate: https://github.com/angular/angular-cli/wiki/generate
Best practises.
Angular Cheat Sheet Pdf
For each feature of your app create a module and create your other components inside this module.
This will make it easy to eager or lazy load this feature of your app.
See also Angular style guid: https://angular.io/guide/styleguide#feature-modules
Example cars feature
- Create a module cars with the routing module
- Next create components inside this module
Create interfaces, classes and services inside a shared folder of this module.
- Create a interface (model) for the cars in a shared folder inside this module
Angularjs Cheat Sheet Pdf
- Create a service to fetch data in the shared folder inside this module.
This results in the following directory structure
Read more about the Angular CLI: https://github.com/angular/angular-cli/wiki
Angular Cheat Sheet Medium
Learn more about Angular’s best practices on the official Angular style guide: https://angular.io/guide/styleguide