5 Basic things to know in angularjs-cli:

5 Basic things to know in angularjs-cli:

 

These are the few basic and must know things before starting with angularjs-cli. Assuming node js is installed already, if no please follow the steps in the below link and get it installed,

 

 

 

1. Command to install angular-cli:

 

npm install -g angular-cli

 

This installs angular-cli globally on your system.

 

2. Command to create angular-cli required files to run your first app

 

ng new Hello

 

This creates the folder named “Hello” and creates the files required to start working with angular-cli.

 

 

3. Command to start angular-cli development server:

 

ng serve

 

ng test

This is the command you can make use to run unit testing.

 

 

4. Default port number for angularjs 2:

 

By default 4200 is the port allocated for angularjs application. You can navigate to the below url once after the successful start of the development server,

http://localhost:4200/

But you can change the port like this

ng serve –port 13123

Now the application will be available in http://localhost:13123/

 

 

5. Command to run Production Build:

ng build –prod

 

ng serve –prod

Basically –prod minimizes the files, but there will not be any change in the output.

 

What is angular-cli.json file ?

angular-cli.json file is a important configuration file in angular-cli project which has the details like project name, angular-cli version, styles and scripts etc..

Note: Even though angular-cli uses live reload server, if you modify angular-cli.json file you need to restart the server to reflect the changes. But if you are making changes in .html, .css/.scss, .ts, .spec.ts not needed to restart the server.

 

 

Apart from the above 5 basic things know below comments as well for better knowledge in angular-cli:

Command to create classes, pipes, directives, components:

Generating components:

ng generate component Hello

 

Generating class:

ng generate class Hello –spec

 

–spec creates unit testing files as well.

 

Generating directive:

ng generate directive Hello

 

Generating pipe:

ng generate pipe Hello

 

Note:

• All this will create directly inside your root folder. If you like to create under any specific folder than do execute this command,
• .here all_pipes is a folder under your root folder.

ng generate pipe all_pipes/Hello

 

• You can also use only g instead of generate.

ng g component javadomain

 

• When you generate using above commands you will get basically .html file, .css/.scss, .ts, .spec.ts files.

 

• When you generate a component it will be imported automatically in app.module.ts, which is one of the great feature in angular-cli.

 

Few More Commands:

 

To know the version:

ng –version / ng -v

 

By default below command creates the styles file in .css, 

ng new myProject

 

if you want to create .scss file then,

ng new myProject –style=scss

 

 

Things to know in Angular – High Level:

1. Components
2. Data Binding
3. Directives
4. Pipes
5. Routing
6. Http
7. Observables

 

Understanding Angular-cli Folder structure:

Here,

• e2e -> end to end testing [just for testing angular projects – not needed atleast for now]
• node_modules -> NodeJS dependency [ Angular is not actually server side to dependent on nodejs, but for angular dependencies we make use of nodejs.]
• src -> Main source code files where we place our source codes components piples services etc. [Refer the below screenshot to understand what is inside the src]
• Rest all configuration files [We wont do anything in these files until and unless there is upgrade in the angular or some deeper configuration changes required for angular project.]

 

Inside src:

• app folder -> Where we place all our source code [components, pipes, controller, services etc.]
• assets -> Things like images can be placed inside [only in this are allowed by angular, you can not access other than assets]
• index.html -> Main index file
• Rest all some config files.

 

 

How to update your angular (like angular core to new versions available) ?

npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli@latest

 

we will face the below errors if we upgrade only angular core:

 

So always plan to run the below commands also as part of your upgrade:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

 

This post is written with the intention to provide you very basic things in more accessible way and as quick as possible. Feel free to share your comments below to add/modify/remove the content of the post.