Angular 4 Notes (Part 2) - Installing Angular 4 & Creating your 1st App
Installing Angular 4
There are 2 ways to install Angular4
There are 2 ways to install Angular4
- Using Angular CLI - Recommended (https://cli.angular.io/)
- Quickstart seed
So in this blog I will use the recommended way; using the CLI.
In order to use CLI you have to have Nodejs installed in your pc.
If you have not installed Nodejs; download and install it from their website: https://nodejs.org/en/download/
Ok let's install Angular CLI globally by executing following command in node command prompt:
npm install -g @angular/cli
Create new Application
I'm going to use Visual Studio Code as the IDE for develop this application.
1. Open VS Code
2. Open the application folder
3. Open the terminal in VS Code and execute the following command
ng new MyAngular4App
ngCommands
Find this command in package.json under scripts
Ex: ng serve - start the app
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Important Files in the Project
MyAngular4App à src à app
1. app.module.ts
- Meeting place for everything in your app.
- everything need to import to this file and add to @ngModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
- Each thing goes into different array:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
- Components - will go inside declarations
- Modules - will go into imports
- Services - will go into providers
- Bootstrap - Add the main app component, because it is like the root component
NOTE: When you create anything, you need to bring that into this file.
And the rest of the files are related to root app component.
- app.component.ts - typescript file
- app.component.spec.ts - use in testing
- app.component.html - template of the component
- app.component.css - style sheet of the component which use to style the template
Ok, lets run the app by executing the following command in the terminal:
ng serve
Now go to localhost:4200
You will see the following output:
How Angular show the result
Now, you might wonder how this happen. Where is this screen came from.
Actually it is simple.
In-order to work angular you have to import core module
import { Component } from '@angular/core';
Now, Go to your app.component.ts
Inside the @Component section you can see the name of the component; which is defined in selector:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
Next go to index.html
There you can see, that particular component: app-root has used.
Let's Create new Component
1. Create a folder called Component in src à app
2. Create a component called 'user' by executing following command in the VS Code's terminal
ng g component components/user (g means generate)
This will create component and its related files in the given path as bellow.
It will arrange in the solution explorer as bellow.
NOTE: If you go to app.module.ts file; you can see, it has been updated according to the modification.
Component that we created has been imported and added to declarations.
NOTE: If you create a component manually (by creating physical file creation without using the ng command), you have update this app.module.ts file manually to replicate the changes.
3. Change the template of the component
4. Add component to app.component.ts
5. Now Save the changes and go to localhost:4200
You can see the screen bellow
Properties
Properties are equal to variables. You can create properties and assign values to it.
Create a property called name in user.component.ts
NOTE: If you create a property and:
1. If you have not assigned any values to it, it will hold the type of 'any'
2. If you have defined a value, it will set the type according to the value.
In this case name will hold the type of 'string'
3. Or, you can defined a strongly typed properties like bellow:
Use the defined property in the template.
Go to user.component.html and add following.
And this will result the following:
You can change the value of properties within methods like bellow:
Error Messages
Since Angular 4 uses TypeScript; it is capable of throwing error messages on the go.
Lets try it out.
1. Add another property called age which holds type of number.
2. Within any method (I'll use ngOnInit()) try to assign string value to age property.
You will get an error as bellow, which complains that you cannot assign string value to a number type property.
3. If you save; you app will not get compile and it will throw an error on the browser window as bellow:
Object Types
TypeScript is capable to cater object types. Lets create an object type called address.
Object type will define using { }
Interfaces
What would happen if we need to add like 100 different addresses?
Do we need to keep this going?
No, actually there is a better way to do this.
You can use interfaces in this context.
Create an interface called iAddress outside the class.
Then we can simply remove the properties inside the address object as bellow:
NOTE: You can create the interfaces in a separate file and you can import that file for the components which you need to use that interfaces.
Arrays
You can initialize an array as bellow:
Then you can add values to it.
Show array values in the screen by using the object.
Any
This type is use to store single value of any type.
Happy Angular 4 start !!!
There you can see, that particular component: app-root has used.
<body>
<app-root></app-root>
</body>
Let's Create new Component
1. Create a folder called Component in src à app
2. Create a component called 'user' by executing following command in the VS Code's terminal
ng g component components/user (g means generate)
This will create component and its related files in the given path as bellow.
It will arrange in the solution explorer as bellow.
NOTE: If you go to app.module.ts file; you can see, it has been updated according to the modification.
Component that we created has been imported and added to declarations.
NOTE: If you create a component manually (by creating physical file creation without using the ng command), you have update this app.module.ts file manually to replicate the changes.
3. Change the template of the component
<h2>Hello user...</h2>
4. Add component to app.component.ts
<app-user></app-user>
5. Now Save the changes and go to localhost:4200
You can see the screen bellow
Properties are equal to variables. You can create properties and assign values to it.
Create a property called name in user.component.ts
NOTE: If you create a property and:
1. If you have not assigned any values to it, it will hold the type of 'any'
2. If you have defined a value, it will set the type according to the value.
In this case name will hold the type of 'string'
3. Or, you can defined a strongly typed properties like bellow:
name: string;
or
name: string = 'Prageeth Roshane';
Use the defined property in the template.
Go to user.component.html and add following.
<h2>Hello {{name}}...</h2>
And this will result the following:
You can change the value of properties within methods like bellow:
export class UserComponent implements OnInit {
name: string = 'Prageeth';
constructor() {
console.log('constructor executed !')
}
ngOnInit() {
this.name = 'Roshane';
}
}
Error Messages
Since Angular 4 uses TypeScript; it is capable of throwing error messages on the go.
Lets try it out.
1. Add another property called age which holds type of number.
age: number;
2. Within any method (I'll use ngOnInit()) try to assign string value to age property.
You will get an error as bellow, which complains that you cannot assign string value to a number type property.
3. If you save; you app will not get compile and it will throw an error on the browser window as bellow:
Object Types
TypeScript is capable to cater object types. Lets create an object type called address.
Object type will define using { }
Interfaces
What would happen if we need to add like 100 different addresses?
Do we need to keep this going?
No, actually there is a better way to do this.
You can use interfaces in this context.
Create an interface called iAddress outside the class.
interface IAddress{
no: number,
street: string,
city: string
}
Then we can simply remove the properties inside the address object as bellow:
address: IAddress
NOTE: You can create the interfaces in a separate file and you can import that file for the components which you need to use that interfaces.
Arrays
You can initialize an array as bellow:
hobbies: string[];
Then you can add values to it.
this.hobbies = ['gamming', 'travelling', 'coding'];
Show array values in the screen by using the object.
<h2>Details Details: {{name}}</h2>
<ul>
<li>Address: {{address.no}},
{{address.street}}, {{address.city}}</li>
</ul>
Any
This type is use to store single value of any type.
data: any;
constructor() {
this.data = 'some data';
console.log('constructor executed !')
}
ngOnInit() {
this.data = 24;
}
Happy Angular 4 start !!!
Comments
Post a Comment