getting started with the angular 2 cli
TRANSCRIPT
![Page 1: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/1.jpg)
Getting Started With The
Angular 2 CLIJuly 2016
by Jim Lynch
![Page 2: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/2.jpg)
Jim LynchFront-End Engineer at Altered Image
@webWhizJim
http://www.slideshare.net/JimLynch22/getting-started-with-the-angular-2-cli
WebStorm Ambassador
“The BDD Angular Guy”Slides available here:
![Page 3: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/3.jpg)
Resources for Learning Angular 2
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 - UdemyFree with the link below!
![Page 4: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/4.jpg)
Resources for Learning Angular 2
2. Accelerating Through Angular 2 - CodeSchool.com
https://www.codeschool.com/courses/accelerating-through-angular-2
(First level free, then requires pro membership)
![Page 5: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/5.jpg)
Resources for Learning Angular 2
3. Pluralsight Courses(requires pluralsight membership)
![Page 6: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/6.jpg)
Resources for Learning Command Line / BASH
2 Free Code School Courses!
- Shell Productivity Elective Course
- Unix Basics Elective Course
https://www.codeschool.com/
![Page 7: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/7.jpg)
Resources for Learning Command Line / BASH
Free Code Camp Backend Challenges
Free!
![Page 8: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/8.jpg)
Resources for Learning Command Line / BASH
• Reference guide of the common Unix / Linux commands.
• Physically small book.
• Humorous yet informative and technical descriptions.
![Page 9: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/9.jpg)
Resources Specifically For Learning Angular 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/)
![Page 10: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/10.jpg)
The Importance of Having 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.
![Page 11: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/11.jpg)
So, What is Angular 2?
![Page 12: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/12.jpg)
What Is a SPA Framework?
Routing
- Illusion of Pages
- Deep Linking
- Layers of HTML
Components
- Ties HTML to JS
- Data Binding
- Modular Code
![Page 13: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/13.jpg)
Angular 2 Building Blocks
• Pipes
• Services
• Routes
• Components• Directives
(Eerily similar the building blocks of AngularJS)
• Filters
• Services
• Routes
• Controllers• Directives
![Page 14: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/14.jpg)
Differences From Angular 1• 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!
![Page 15: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/15.jpg)
If You Can’t Beat 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.
![Page 16: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/16.jpg)
The Angular CLI!!Are you as excited as this guy?
![Page 17: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/17.jpg)
Use the command line to generate folders and files for you.
…or even generate an entire starter project.
The Main Idea
![Page 18: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/18.jpg)
The Initiation Ceremony (Installing angular-cli)
This is where your Angular 2 CLI journey begins!
![Page 19: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/19.jpg)
If You Get This 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
![Page 20: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/20.jpg)
ng new
![Page 21: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/21.jpg)
ng init
![Page 22: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/22.jpg)
What Just Happened?
An entire starter project was scaffolded!
![Page 23: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/23.jpg)
All these files and folders
were generated by
ng new!
![Page 24: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/24.jpg)
A Closer Look
a What Was Created
![Page 25: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/25.jpg)
ConfigEnvironment files for setting production boolean
environment variable.
Configuration files for automated test runners.
![Page 26: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/26.jpg)
DistFolder that gets written to by build task
Contains final, minified files that get hosted to be the final, live product.
![Page 27: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/27.jpg)
E2e
Contains files for e2e and integration tests run by Protractor.
![Page 28: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/28.jpg)
node_modulesContains all the npm libraries that are dependencies
for your application.
![Page 29: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/29.jpg)
PublicContains the .gitignore file.
A place for images and other static assets.
Some people like to put manually added libraries here.
![Page 30: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/30.jpg)
SrcContains all of your source code!
![Page 31: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/31.jpg)
TmpContains temporary files that Angular CLI
generates and uses to runs its tasks.
![Page 32: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/32.jpg)
typingsContains TypeScript type definition files.
![Page 33: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/33.jpg)
Other files
Other configuration files.
![Page 34: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/34.jpg)
Workflow Commands
- ng serve
- ng test
- ng e2e
- ng build
![Page 35: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/35.jpg)
ng serve
![Page 36: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/36.jpg)
ng test
![Page 37: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/37.jpg)
ng e2e
![Page 38: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/38.jpg)
ng build
![Page 39: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/39.jpg)
ng deploy gh:pages
![Page 40: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/40.jpg)
Creating a Github TokenIt’s easy!
![Page 41: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/41.jpg)
ng Generate!
• Scaffold individual 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.
![Page 42: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/42.jpg)
ng g component
![Page 43: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/43.jpg)
ng g service
![Page 44: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/44.jpg)
ng g pipe
![Page 45: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/45.jpg)
ng g directive
![Page 46: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/46.jpg)
ng g route
![Page 47: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/47.jpg)
CLI Bonus Commands!
![Page 48: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/48.jpg)
ng-lint
![Page 49: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/49.jpg)
ng help
![Page 50: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/50.jpg)
ng doc <keyword>
![Page 51: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/51.jpg)
ng version
![Page 52: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/52.jpg)
Things You Might Consider Adding to An
Angular 2 Project
• Angular Universal / App Shell
• CucumberJS / Acceptance tests
• Redux or any other Flux Store
• Ionic / Angular for Native Apps
![Page 53: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/53.jpg)
Other Generators
Do Exist!
![Page 54: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/54.jpg)
Angular Universal Starter
![Page 55: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/55.jpg)
FountainJS
![Page 56: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/56.jpg)
Questions?
twitter.com/webWhizJim
www.wisdomofjim.com
Slides available here: www.slideshare.net/JimLynch22/getting-started-with-the-
angular-2-cli
github.com/JimTheMan
![Page 57: Getting Started with the Angular 2 CLI](https://reader035.vdocuments.us/reader035/viewer/2022081512/58ec856d1a28ab250e8b4645/html5/thumbnails/57.jpg)
Thanks!