| Bootstrapping | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; |
|---|---|
platformBrowserDynamic().bootstrapModule(AppModule); | It bootstraps the application, using the root component from the specified NgModule. |
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 to build your project. Abstract: This Angular cheat sheet is a quick reference to get you going with Angular development. It uses Angular v4 with TypeScript. Angular is a JavaScript framework for developing mobile and web applications. It started as a client side JavaScript framework for writing better front-end applications that run in a web browser. Here’s a cheat sheet that will help you find the commands you need for most of the things that you would want to do with the Angular CLI. For a brief introduction to the Angular CLI you can explore this tutorial. Checking the Version. See which version of the CLI you’re using: ng -version Updating the Version. Essential Angular 9 Development Cheat Sheet Angular is a front-end web-development framework and platform that is used to build Single-page web Applications (or SPAs) using TypeScript as the primary programming language. Angular is itself written in TypeScript. Angular Cheat Sheet. Contribute to delprzemo/angular-cheatsheet development by creating an account on GitHub.
| NgModules | import { NgModule } from '@angular/core'; |
|---|---|
@NgModule({declarations: [], imports: [], exports: [], providers: [], bootstrap: []}); | It specifies a module, which contains components, directives, pipes, and providers. |
declarations: [MyFirstComponent, MySecondComponent, MyDatePipe] | It contains the list of components, directives, and pipes which belong to current module. |
imports: [BrowserModule, MyModule] | It contains the list of modules to import into current module. |
exports: [MyFirstComponent, MyDatePipe] | It contains the list of components, directives, and pipes visible to modules that import this module. |
providers: [MyFirstService, { provide: ... }] | It contains the list of dependency injection providers visible both to the contents of this module and to importers of this module. |
entryComponents: [MyFirstComponent, MySecondComponent] | It contains the list of components not referenced in any reachable template(i.e. dynamically created from code). |
bootstrap: [MyAppComponent] | It contains the list of components to bootstrap when this module is bootstrapped. |
| Class Decorators | import { Directive, ... } from '@angular/core'; |
|---|---|
@Component({...}); | It will convert class as a component and provides metadata about the component. |
@Directive({...}); | It will convert class as a directive and provides metadata about the directive. |
@Pipe({...}); | It will convert class as a pipe and provides metadata about the pipe. |
@Injectable({...}); | It declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere. |
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
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.
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
Angular Cheat Sheet Medium
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
- Create a service to fetch data in the shared folder inside this module.
Angular Cli Cheat Sheet
This results in the following directory structure
Read more about the Angular CLI: https://github.com/angular/angular-cli/wiki
Angular Command List
Learn more about Angular’s best practices on the official Angular style guide: https://angular.io/guide/styleguide