That’s why I love cheat sheets and why I’m bringing you my fourth cheat sheet — this time for Angular. Together with React and Vue.js, Angular is one of the top web-frontend frameworks and the one I feel most confident in. For becoming more efficient when working with it, I’ve elaborated a cheat sheet that I’m proudly sharing today. AngularJS Cheatsheet 1/2 GLOBAL FUNCTIONS angular.bind(self, fn, args) angular.bootstrap(element, modules) Bootstrap the Angular application manually angular.copy(source, destination) Create a deep copy of source angular.element(element) Wrap a raw DOM element or HTML string in a jQuery element angular.equal(obj1, obj2) Check if two. Angular.bootstrap(element, modules) Use this function to manually start up angular applic ation. Angular.copy(source, destination) Creates a deep copy of source, which should be an object or an array. Angular.element(element) Wraps a raw DOM element or HTML string as a jQuery element. Angular.equals(o1, o2) Determines if two objects or two. Angular Cheat Sheet. Contribute to delprzemo/angular-cheatsheet development by creating an account on GitHub. Angular Cheat Sheet Our cheat sheet (written by Manfred Steyer) will guide you through on how to get started with Angular easily, create your first component, add routing and lifecycle components to your Angular App and many other topics for you to take your Angular skills to the next level!
| npm install -g @angular/cli |
| ng new <project name> |
| cd <project name> |
| ng serve |
| ng update @angular/cli @angular/core |
| Angular CLI Cheat Sheet |
| ng new <project name> # To create a new project |
| ng serve # To host the project on 4200 port |
| ng serve --port <port no> --host <host name> # To host application specific host/port |
| We can use a short alias as well: |
| ng s --p <port no> --h <hostname> |
| Some other helpful commands |
| ng lint # To lint and look for JavaScript errors |
| ng lint --format stylish # Linting and formatting the output |
| ng lint --fix # Lint and attempt to fix all the problems |
| ng build # to build a project in the dist folder |
| ng build ---target # Target for which we want to build |
| ng build --prod # To build in production mode |
| ng test # To run spec files |
| ng test --codeCoverage --watch=false |
| ng e2e # To run e2e test cases |
| ng doc # To look for angular documentation |
| ng help # To get help on angular cli commands |
| To change the .angular-cli.json config |
| ng set # to change properties |
| # For e.g. ng set default.styleExt scss |
| # ng set default.styleExt scss -g -- To set in global angular-cli file |
| Components |
| ng generate component # To generate new component |
| ng g c # Short notation to generate component |
| ng g c --flat # Want to generate folder name as well? |
| ng g c --inline-template # Want to generate HTML file? |
| ng g c -it # Short notation |
| ng g c --inline-style # Want to generate css file? |
| ng g c -is # Short notation |
| ng g c --view-encapsulation # View encapsulation stratergy |
| ng g c -ve # Short notation |
| ng g c --change-detection # Change detection strategy |
| ng g c --dry-run # To only report files and don't write them |
| ng g c -d # Short notation |
| ng g c -m -d |
| # Name of module where we need to add component as dependency |
| Directives and services |
| ng generate directive # To generate directive |
| ng g d # short notation |
| ng g d -d # To only report files and don't write them |
| ng generate service # To generate service |
| ng g s # short notation |
| ng g s -d # To only report files and don't write them |
| ng g s -m |
| # Name of module where we need to add service as dependency |
| Classes, Interface, pipe, and enums |
| ng generate class # To generate class |
| ng g cl # short notation |
| ng generate interface # To generate interface |
| ng g i # short notation |
| ng generate pipe # To generate pipe |
| ng g p # short notation |
| ng generate enum # To generate enum |
| ng g e # short notation |
| Module and Routing |
| ng generate module # To generate module |
| ng g m # To short notation |
| ng g m --skipTests trus -d # To skip generate spec file for the module |
| ng g m --routing # To generate module with routing file |
| ng g guard # To generate guard to route |
Typescript Cheat Sheet Pdf
Angular 8 Cheat Sheet Pdf