This lesson is to learn more about Angular, TypeScript-based open-source web application framework which generates part of the website into components for the Front End & Back End. Below are the steps to set up Angular locally; however, for this lesson we are going to use Stackblitz. Stackblitz will allow for us to work with Angular and look at other frameworks without having to download anything.
Visit [https://stackblitz.com/] to check out what can be created! This will link to your GitHub account to save progress on your projects so it is recommended to have a GitHub account.
-
First install Angular with npm install -g @angular/cli
-
Create a new project with ng new βnameβ. Example, ng new ToDoList
-
To run and serve the application locally, ng serve
-
Check out localhost:4200
- When you get to Stackblitz look in the far left corner and click on Angular. This will direct you to a new Angular Project
Lets take about what we see!
- On the left hand side we have the files for our project, the middle is the text editor, and the far right is the ouput console
- All of our code is in the source folder and we have a angular.json file
- Inside of the source folder we have the app folder which will hold all of our components. This folder houses:
- app.component.css - This is the css file for the app and Angular allows for other style sheets such as Sass
- app.component.html - This is the html for the app
- app.component.ts - The typescript file for the components
- app.module.ts - This will load in all of the Angular components
- hello.component.ts - This has the hello page
- index.html - We need to set the app to travel through this page
- main.ts - The main typescript
- polyfills.ts - This are needed for Angular and we are not going to adjust them
- styles.css - The main styles for the app
- Now it is time to add components and model! Everything in Angular is broken down into components. So for us at the moment we are going to to and program 1 componentand 1 model. To add a component in Stackblitz, right click on the app folder and you should see Angular Generator. Click on that and you should be able to add a component along with a few other things. Name the component list.
Let's take a look at what these things are!
- Component This will give us all of the files we need to add a component
- Service A class with a specific purpose of sharing data, can be used to send data between the back end and front end
- Directive : A function that executes whenever the Angular compiler finds it in the DOM (Direct Object Model)
- Module : This is used to group components, directives, pipes and services that are related
- Pipe : Used to transfer values in another template
- Guard : Code that is executed before the route is loaded
- Interface : Abstract type that does not contain any class code
- Class : Can be used to bind muiltple classes together, in Angular, can be useful to bind CSS classes to HTML
- Enum : A set of named constants
After the list component is created, right click on the app folder and add a new folder called model. Add a file called task.model.ts in this folder
- Let's add the model code first. This is a representation for every item that we are adding to the list
public title: string;
public description: string;
}
- After the model is done, let's look at the code that has been given to us for the component
- list.component.css - Has all of the css for the file
text-align: center;
}
.task {
background-color: #dbc5f7;
}
- list.component.html
<h1>What do we have to do today?</h1>
<div>
<button (click)="addTask()" style="background-color: #bfe5f6">Add Task</button>
<!--This will add the next task-->
</div>
<div class="task" *ngFor="let task of taskList; let i = index">
<!--Angular for loop to display all of the tasks; could implement database -->
<div>
<span class="title">Task number:</span> {{i +1}}
<!-- Giving the task an ID-->
<span class="remove">
<button (click)='removeTask(i)'> X</button> <!--Button to remove the task-->
</span>
</div>
<div>
<span class="title"> Title:</span>
<!--Each task has a title an description -->
<input [(ngModel)]="task.title" type="text">
</div>
<div>
<span class="title"> Description:</span>
<input [(ngModel)]="task.description" type="text">
</div>
</div>
- list.component.ts
@Component({ selector: "app-list", templateUrl: "./list.component.html", styleUrls: ["./list.component.css"] }) export class ListComponent implements OnInit { constructor() {} public taskList: Task[] = []; ngOnInit() {} addTask() { //Add task to the stack this.taskList.push(new Task()); } removeTask(index: number) { //Remove with splice if (index > -1) { this.taskList.splice(index, 1); } } }
5.That is it! We should have a working Angular application in Stackblitz! If things do not work out, the code in this repo can be downloaded locally.
Here are additionally resources :
Angular Tutorial - [https://github.com/8Tesla8/to-do-list]
Medium Angular Tutorial - [https://medium.com/weekly-webtips/simple-to-do-list-in-angular-247cdad31280]
Angular To Do List with Material - [https://stackblitz.com/edit/angular-todolist-materialui]
Final Result - [https://stackblitz.com/edit/angular-testlesson1117?file=src%2Fstyles.css]