Getting started with Angular CLI - Angular2, AngularJS Malmö Meetup at FooCafe

1. Getting started with
Angular CLI

2. Sasha Vinčić
Digital Viking

3. servitant.se

4. ngVikings
The Northernmost Angular Conference
February 11-12, Copenhagen
ngvikings.org

5. Angular CLI
A command line interface for Angular

6. Why Angular CLI?
• Easy to create
• Works
right out of the box
• Follows best practices
Photocred: Malmö Eastern egg, Susanne Nilsson, CC BY

7. Angular CLI

8. Lets start
• ng new
Create a new project
• ng serve
Start it
Photocred: Double powered start, flickr.com/brandsvig, CC BY

9. Lets test
• ng test
Runs test suite
• ng e2e
Runs end to end tests
Photocred: Lego People, Peter Dutton, CC BY

10. ng generate
• ng g component main-header
MainHeaderComponent
• ng g service login
LoginService
• ng g module shared
src/app/shared
Photocred: Wheel of Malmö, Frank Scmidt, CC BY
Components, Services and Module

11. ng generate
• ng g interface shared/city
app/shared/city
• ng g class shared/models/user
app/shared/models/user
Photocred: Non Human Device, Boris Chimp, CC BY
Interfaces, Classes

12. 3rd Party lib installation
npm install @ng-bootstrap/ng-bootstrap
import {NgbModule} from ‘@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Photocred: Enlightenment, Camilla Nilsson, CC BY

13. Global lib installation
npm install bootstrap@4.0.0-alpha.5
“styles”: [
“../node_modules/bootstrap/dist/css/bootstrap.css
]
Photocred: Enlightenment, Camilla Nilsson, CC BY

14. Under the hood
Angular 2.1.0
Webpack 2.1.0-beta
TypeScript 2.0.3
karma, less, sass, tslint
Photocred: Pop the hood, Jesper Yu, CC BY

15. new projects
• ng new —prefix=ngmalmo
• ng new —style=sass
• ng new —style=less
• ng new —skip-git=true —skip-npm=true
Photocred: Stamps, Michelle, CC BY

16. More features
• ng init —mobile true
• ng g route
• ng completion 1>> ~/.bashrc 2>>&1
• ng github-pages:deploy
Photocred: Toolbox, Florian Richter, CC BY
some disabled

17. building
ng build -prod
ng build -t production
ng build —target=production
Build for production
Photocred: Ikea, Junky Pamies Alcubilila CC BY

18. Faster
ng build —aot=true
Faster & “smaller”
Photocred: Mellisuga helenae, Ekaterina Chernetsova CC BY

19. Proxy
proxy.conf.json
{
“/api”: {
“target”: “http://localhost:3000”,
“secure”: false
}
}
Photocred:réfraction champêtre, Hervé Laville, CC BY

20. AngularJS Malmö
Meetup
Go now to www.menti.com and use the code 80 19 01
Photocred: In the city, Maria Eklind, CC BY