Exercise: Angular part 2


Idea: Introduction to Angular (component, bindings).
Background: The Ultimate Angular-cli Reference and Angular.io

Relateret billede

In this exercise you have to build a simple calculator in 10 steps

Step 1 - Create a new Angular project - SimpleCalculator
Open VSCode.
Open your Angular folder (File -> Open Folder)
Open an integrated terminal window in VSCode (View -> Integrated Terminal)
Create a new project by running: ng new SimpleCalculator in the terminal window.

? Would you like to add Angular routing? Type 'N' - we don't need routing yet!
? Whitch stylesheet format would you like to use? Type return (just select 'CSS')


Step 2 - Add Bootsrap to your project

Open the index.html file and add Bootstrap to your SimpleCalculator project by adding the following lines in the header:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


Step 3 - Add a Jumbotron to the component.html file

Open app.component.html and replace the default html code with the following code:

 

Step 4 - Run the server
Navigate to the new project folder by running: cd SimpleCalculator
Verify that the application works by running: ng serve -o (-o opens and browse your application in your default Browser)

Verify that you get something like this:


After verification - stop the Server with: Ctrl + c


Step 5 - Create a new component

Create a new component Calculator by running: ng generate component Calculator (or just: ng g c Calculator)

Notice: The import of 'CalculatorComponent' and the declarations of 'CalculatorComponent' in @NgModule
'Component' is automatically appended to the name of the component.



Step 6
- Implement the CalculatorComponent class in calculator.component.ts
The class should have 3 properties: number1, number2 and result (all of the type number) and 4 functions Add( ), Sub( ), Mul( ) and Div( ) that uses number1 and number2 to calculate and update result.



 

Step 7a - Create the template to the new component (calculator.component.html)
Add to input-fields of the type "number" and make a two-way binding between the input-fields and the number-properties in the component class (used to update the view-model from the view (the template)).
Hint:
[(ngModel)]="Property".

Use interpolation {{ }} to make a one way binding from the result-property in the component and the DOM (in the template of the component)
Use event-binding to bind the functions (Add, Sub, Mul and Div) to the click-event on the buttons
Use Bootstraps grid-system to layout the component.:

 

Step 7b - Add import of the FormsModule in app.module.ts
To use input-fields in our app we have to import the FormsModule. Open the app.module.ts file - add the import { FormsModule } from '@angular/forms'; statement and add FormsModule in list of the imports property:


Forms

 



Step 8 Add child-component to the parent-component (RootComponent)
Insert <app-calculator> Loading ... </app-calculator> in the app.component.html file:

 




Step 9 - Styling the CalculatorComponent
Add some styling to calculator.component.css file, like:




Step 10
Start the server by running: ng serve to watch the result. It shoud look something like this:


Congratulation! - Angular is still rocking and you have made your second (but still very small) Angular App.

/ Henrik H