Challenge Overview
Abstract
We are launching series of fun challenges to help introduce you to Angular. This is first challenge of the series and will be good first step in helping you become acquainted with Angular.
Important Note:
This is a fun challenge. No prize money will be awarded for completing this challenge successfully.
Challenge Details
What is AngularJS?
Angular is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
Requirements for this challenge
As your introduction to Angular you will build "Hello World" application and submit it's code for verification. For this challenge, you will be using following (Hello World) tutorial as a guide. By end of this tutorial you will learn to set-up dev env for angular and build an angular application.
Step 1:Environment Setup
-
Install Node.js and NPM.
-
Install Angular globally with following command
-
npm install -g angular
-
-
Install Angular CLI globally by following command. - It will help you to configure new app with required dependency.
-
npm install -g @angular/cli
-
-
install TypeScript - It's a andvanced javascript where you can incorporate oops.
-
npm install -g typescript
-
-
Verify the installation by following command
ng -v
Step 2:Create the app using CLI
-
Create the app by using following command
-
ng new HelloWorld-App
-
The above command will create a HelloWorld-App folder which will have all the required depnedency which a angular app should have.Let's crete some files which will cater for our need of hello world application.
Step 3: Create app.component.html file
-
Open a text editor and copy following simle Html code with header tags
<div>
<h1>Hello World!</h1>
<h2>Welcome to my first angular app</h2>
</div>
-
Save the file with name component.html.
-
Open a text editor to create a fresh app.component.ts file which will act as a behaviour unit for index.html file.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
title = 'Hello World!';
}
You can think of component.ts file as a class in which you can define behaviour for the view(In this app for index.html file). We are importing component class module which is defined in angular core with the help of Import tag(import { Component } from '@angular/core';). The component class help us to bind/embed/target the view we want to set behaviour for. Save the file as component.ts.
Now it's time to look for index.html in the project directory you had created.
The index.html already have some code. The important part to observe is the body tag. It has a tag written <app-root> which gives us a clear idea that component.ts will impact body of HTML code.But how?
Let's take closer look at
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
The selector acts as an instructor which will redirect the compiler within body part. The templateUrl is an url which will point out to the property which we would like to embed. In our app we want to embed component.html in <body> tag of index.html.
So, the above two lines will make our index.html code look like - Just mentioning the body part
<body>
<div>
<h1>Hello World!</h1>
<h2>Welcome to my first angular app</h2>
</div>
</body>
Step 4: Make quick changes to component.html file.
-
Replace Hello world with variable we defined in component.ts file which will look like following.
-
<h1> {{title}} </h1>
-
Step 5: Copy and paste the files you created
-
Open HelloWorld-App>src>app
-
Paste app.component.ts and app.component.html file in app folder.
Step 6: Run the app by following command
-
cd HelloWorld-App
-
npm start or ng serve
-
Look for the port number where the output being served.
The npm start/ng serve command builds your angular and launch the server. Make not of the the port number specified in command prompt in green font color, copy and paste it in the browser to see the output.
Note:- You can also use ng serve -o to launch the browser automatically after the app being built.
You will see following output
Hello World!
Welcome to my first angular app.
We have learnt
-
How to set-up dev env for angular.
-
How to define a component.
-
Significance of componet.
-
How to run an angular app
Final Submission Guidelines
Submit component.ts and component.html file zipped in a folder.
Important Note:
This is a fun challenge. No prize money will be awarded for completing this challenge successfully.