Download as PDF, PPTX
Uploaded byJim Lynch
Getting Started with the Angular 2 CLI
This document provides an overview of the Angular CLI and how to get started with it. It discusses how to install the Angular CLI, generate an initial project using the ng new command, and an overview of the file structure and common commands like ng serve, ng test, and ng build. It also briefly touches on generating components, services, pipes and more using the ng generate command.
Getting Started with the Angular 2 CLI
- 1. Getting Started With The Angular2 CLI July 2016 by Jim Lynch
- 2. Jim Lynch Front-End Engineer atAltered Image @webWhizJim http://www.slideshare.net/JimLynch22/getting-started-with- the-angular-2-cli WebStorm Ambassador “The BDD Angular Guy” Slides available here:
- 3. Resources for Learning Angular2 https://www.udemy.com/angular-2-crash-course/ learn/v4/? couponCode=blackhat&pmtag=CELEBRATE40 &utm_source=codek.tv 1. Angular 2 Crash Course with TypeScript - Udemy Free with the link below!
- 4. Resources for Learning Angular2 2. Accelerating Through Angular 2 - CodeSchool.com https://www.codeschool.com/courses/accelerating-through- angular-2 (First level free, then requires pro membership)
- 5. Resources for Learning Angular2 3. Pluralsight Courses (requires pluralsight membership)
- 6. Resources for Learning CommandLine / BASH 2 Free Code School Courses! - Shell Productivity Elective Course - Unix Basics Elective Course https://www.codeschool.com/
- 7. Resources for Learning CommandLine / BASH Free Code Camp Backend Challenges Free!
- 8. Resources for Learning CommandLine / BASH • Reference guide of the common Unix / Linux commands. • Physically small book. • Humorous yet informative and technical descriptions.
- 9. Resources Specifically For LearningAngular 2 CLI • Angular CLI Reference PDF (https://cli.angular.io/reference.pdf) • Angular 2 CLI Github Project Page (https://github.com/angular/angular-cli) • Official Angular CLI Website (https://cli.angular.io/)
- 10. The Importance ofHaving a Pretty Command Line • Your command line is a powerful tool. You should use it often and be comfortable with it. • Make the background and font color easy on the eyes and increase the font size. • Edit your ~/.bash_rc or ~/.bash_profile to make your text more colorful and change your BASH prompt. • Install vim plugins for syntax highlighting.
- 11. So, What isAngular 2?
- 12. What Is aSPA Framework? Routing - Illusion of Pages - Deep Linking - Layers of HTML Components - Ties HTML to JS - Data Binding - Modular Code
- 13. Angular 2 BuildingBlocks • Pipes • Services • Routes • Components • Directives (Eerily similar the building blocks of AngularJS) • Filters • Services • Routes • Controllers • Directives
- 14. Differences From Angular1 • No more “ng-“ directives! New syntax for binding directly to events instead. • Namespaced CSS / Sass • Simpler concept of Directives, No link functions in ng2! • Nice router with power and flexibility of UI-Router • Crazy fast with Shadow DOM under the hood. • And best of all, the Angular CLI! • Projects are written in TypeScript (usually). • Observables to handle streams and cancel requests!
- 15. If You Can’tBeat Em’, Join em’. (Or just copy ‘em) • Concept of “Shadow DOM” originally from React • Took Microsoft’s TypeScript and made it mainstream. • CLI tool ported from from Ember CLI.
- 16. The Angular CLI!! Areyou as excited as this guy?
- 17. Use the commandline to generate folders and files for you. …or even generate an entire starter project. The Main Idea
- 18. The Initiation Ceremony (Installingangular-cli) This is where your Angular 2 CLI journey begins!
- 19. If You GetThis Error: You might get this error: Error: EACCES: permission denied, open '/Users/jim/.config/ configstore/ember-cli.json' You don't have access to this file. Give your current user ownership of ember- cli.json sudo chown jim /Users/jim/.config/configstore/ember-cli.json
- 20.
- 21.
- 22. What Just Happened? Anentire starter project was scaffolded!
- 23. All these files andfolders were generated by ng new!
- 24. A Closer Look aWhat Was Created
- 25. Config Environment files forsetting production boolean environment variable. Configuration files for automated test runners.
- 26. Dist Folder that getswritten to by build task Contains final, minified files that get hosted to be the final, live product.
- 27. E2e Contains files fore2e and integration tests run by Protractor.
- 28. node_modules Contains all thenpm libraries that are dependencies for your application.
- 29. Public Contains the .gitignorefile. A place for images and other static assets. Some people like to put manually added libraries here.
- 30. Src Contains all ofyour source code!
- 31. Tmp Contains temporary filesthat Angular CLI generates and uses to runs its tasks.
- 32. typings Contains TypeScript typedefinition files.
- 33.
- 34. Workflow Commands - ngserve - ng test - ng e2e - ng build
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. Creating a GithubToken It’s easy!
- 41. ng Generate! • Scaffoldindividual components, routes, directives, services, or pipes! • Alias for the generate command is just the letter g. • The generated component has its own directory, unless the --flat options is specified.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52. Things You Might ConsiderAdding to An Angular 2 Project • Angular Universal / App Shell • CucumberJS / Acceptance tests • Redux or any other Flux Store • Ionic / Angular for Native Apps
- 53.
- 54.
- 55.
- 56. Questions? twitter.com/webWhizJim www.wisdomofjim.com Slides available here: www.slideshare.net/JimLynch22/getting-started-with-the- angular-2-cli github.com/JimTheMan
- 57.