ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Ng2 cli v1

?Download as PPT, PDF?
?
Abbas Zahir
Abbas Zahir

This document provides instructions for setting up and using the Angular CLI tool. It outlines prerequisites like Node.js and NPM, and commands for installing the CLI globally and generating a new Angular application. It also describes the basic file structure generated by the CLI, including files for routing, modules, components, styles, tests, and more. The next session will cover generating a new component and communication between components.

1 of 15
Download to read offline
Angular 2 - CLI
Prerequisites: Node 6.9.0 or higher NPM 3 or higher
npm install ¨Cg @angular/cli Windows: Start > Node.js command prompt (Run as administrator) MAC: Terminal window > sudo npm install ¨Cg @angular/cli
¡­ ng help ng new ng serve
IDE Editor Online Editor https://code.visualstudio.com/ Available for macOS, Linux, and Windows VS Code includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring.
View Menu > Integrated Terminal PS H:angular2movie>ng serve http://localhost:4200
e2e End-to-end?(e2e)?tests?of?the?application,?written?in?Jasmine?and? run?by?the?protractor?e2e?test?runner. node_modules The?npm?packages?installed?with?the?npm?install?command. karma.config.js Configuration?for?the?karma?test?runner?described?in? the?Testing?guide. package.json Identifies?npmpackage?dependencies?for?the?project. protractor.conf.js Configuration?for?the?protractor?end-to-end?(e2e)?test?runner. tsconfig.json Tells?the?TypeScript?compiler?how?to?transpile?TypeScript?source? files?into?JavaScript?files?that?run?in?all?modern?browsers. tslint.json The?npm?installed?TypeScript?linter?inspects?your?TypeScript?code? and?complains?when?you?violate?one?of?its?rules. Folder structure
angular-cli.json
index.html The application host page. It loads a few essential scripts in a prescribed order. Then it boots the application, placing the root AppComponent in the custom <my-app> body tag. favicon1.ico The application icon that appears in the browser tab. styles.css Global styles for the application. main.ts Compiles the application with the JIT compiler and bootstraps the application's main module (AppModule) to run in the browser app.module.ts Defines AppModule, the root module that tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare. app.component.ts Defines the same AppComponent as the one in the QuickStart playground. It is the root component of what will become a tree of nested components as the application evolves.
Focus on the following files in the /src folder.
main.ts app.module.ts app.component.ts index.html
Ng2 cli v1
app.component.js app.component.html app.component.css up-icon down-icon star1-icon star0-icon
Generating Components, Directives, Pipes and Services Creating a new component movie-rating: ng generate component movie-rating https://www.npmjs.com/package/ng-cli-2
Next Session: Implement movie-rating component Communication between component ng generate component movie-rating

More Related Content

Ng2 cli v1