Angular - The Complete Guide (2021 Edition)
this note covers Section 1 - Getting Started (Parts 5 till 13).
(parts 1 -> 4 are just introductory notes. Remeber that it is called Angular, not AngularJS. AngularJS was angular version 1, which is no longer used and deprecated. Everything from version 2 and above is normal Angular, which you'll use).
You have to install the following for any angular project:
NodeJS NPM
And of course, the Angular CLI: npm install -g @angular/cli
So normally: create a repo, clone it locally, open the cloned folder in visual studio code, open the command line, do the cli install. That's it.
First of all, try to use a different source of internet (becuase your ISP provider is f***ed up.)
A lot of problems are solved by making sure you're using the latest version of NodeJS, npm and the CLI itself.
Updating NodeJS:
Go to nodejs.org and download the latest version - uninstall (all) installed versions on your machine first.
[Actually, some said that installing node again will just overwrite the old version so you don't need to uninstall it first. You are lazy and you tried it
To view the version of NodeJS that you have:
node -v
Updating npm:
Run [sudo] npm install -g npm (sudo is only required on Mac/ Linux)
To view the version of npm that you have:
npm -v
Updating the CLI
[sudo] npm uninstall -g angular-cli @angular/cli
npm cache verify
[sudo] npm install -g @angular/cli
To view the version of CLI that you have:
ng -v
Problem not solved? Try to follow the steps in this video (the second half):
Installing Angular CLI getting stuck: this link helped you once: https://stackoverflow.com/questions/54989329/npm-install-angular-cli-stuck
To run an existing project: I guess it is ng serve. Now, if we did npm start,
it will do the ng serve by default for us. Make sure this is correct.
Also don't run an 'ng serve' command before actually creating an Angular project :p
It will usually not run automatically in your browser, just gives you the link to it, usually this:
So yeah.
Some notes on how to install the needed stuff, then:
Make sure to organize the git folders and stuff. Maybe you will need to move everything outside or whatever. If you are following the steps below, then start it form inside the github folder directly, and create the repo later on, and put the stuff inside it (or whatever).
1- ONLY DO THIS STEP If you haven't installed cli globally yet:
npm install -g @angular/cli
2- ng new ghadir-app [+ --no-strict]
Navigate to wherever you want the project to live (ex: github folder, open command line ther - better to
be with admin priviliges - and run thsi command). This will ask you a number of stuff:
When we were learning, we put no for first option (the router one), and chose css for the second. We
will choose differently for a real project.
3- cd ghadir-app
Well, yep, move to it
4- ng serve
And we did it baby.
Note: if you have ended development for the day, you can quit
ng servewith ctrl+c. I am not really sure but that's what he said.
Now, the starting screen will differ depending on the Angular version. So if you want to follow along with how he (Maximillianus) is editing the starting page, better start with his starting page. Just grab it from the course resources and put it instead of the one you have in the src folder.
The things you are currently interested in editing are found inside the src/app
app.component.html
This is the thing currently outputting the page we see in the broswer.
If you noticed, this file name ends with .html. This file actually belongs to the
app component in this angular project. Each componenet in an angular project has several files
(unline react where a componenet is kind of a closed thing inside a file).
So the file we're seeing here (app.component.html) is the html part of the app
component. The app componenet is made up of other parts too, and they all work together.
Other parts are: (optionally) a styling file (.css or whatever). Also, a typescript file.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
displayedText = 'Max';
}
This has the definition of the component. It will be converted to normal JS.
We will be going into these in more details later on, but for now, here are some quick stuff regarding
the .ts file:
Inside @Component object, we have a property called selector. If I understood
this correctly, the selector specifies the part of the html where this component will be injected (in
the main page).
Okay. More importantly, we have export class AppComponent. Inside it, we can create
properties and assign values to them, and then use those values inside the .html part of
the component.
Let's create a property called displayedText.
Now if we go back to the .html component, we can insert this property by using its name
inside double curly brackets:
<p>{{displayedText}}</p>
Important Note
Unline React, the .html part of Angular components does not need to be a wrapped in one
major parent (you can have sibling elements stacked above each other without them being wrapped in a
wrapper div or whatever).
Okay, so what he is trying to do is adding an input field, and have the displayedText show
what will be typed into that field.
Starting:
app.component.html
<input type="text" [(ngModel)]="displayedText">
<p>{{ displayedText }}</p>
So here we are using a tool provided by Angular called a directive - the ngModel
part.
The directive basically tells Angular to listen to any changes in the input field, and store
them inside the displayedText property. So it essentially changes the value of the
displayedText property found inside the .ts file.
Now this will not work.
Because to be able to use ngModel we have to import it (keep in mind: it is built in into
Angular, but you have to import it to use it).
Okay, to this (add a feature/import it), we have to go to the app.module.ts file (this is
basically the part where we tell angular which pieces belong to our app).
We should import the package at the top first, along with the imports, then add it inside the
imports property inside @NgModule:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//below line is added
import { FormsModule} from '@angular/forms'
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule //this line was added
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
That's it, now it will work :)
We're just going over the structure here.
The usual. Follow along. Do the assignments. Try to do things yourself.
Also he said we might do different things while we learn so it might be a good idea to restart a project (ng new bla-bla) whenever we start a new 'idea'. Ghadir does not agree with that as it took here around 4 hours to do the first ng new bla-bla install. [And remember: it worked after you ran it as administrator].
You don't need to learn typescript for this course - you should be able to pick it up along the way. And anyhow: you can cover Section 32 of the course which is about Typescript if you ever felt like you need to know it more.
Nothin here.
We'll be using Boostrap to speed things up:
npm install --save bootstrap
he installed version 3 but I don't think I need to install it.
Now, just like in React we needed to 'import' boostrap to use, here we need to do something similar:
After it's installed, go angular.json file (which is outside the src folder). Note a place
where there is the following code:
"styles": [
"src/styles.css"
],
This means that we are using the styles.css inside the src folder to specify the global
styles (remember that we can also specify styles unique to each and every component).
Now, we want to add the boostrap to the global styles usage. We do it as follows:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
Make sure to add before the normal stylesheet (styles.css) so that it can overwrite anything you want to overwrite in boostrap.