For this activity, we will set up and get started with Angular. You should do this activity individually.
To deploy and test your program, please refer to Angular deployment.
Refer to Angular setup to set up Node.js and install Angular.
mkdir webpl-angular
cd webpl-angular
ng new
command to create a new workspace (folder with the app name) and an initial applicationng new angular-example
ng new
command may prompt you for information about features to include in the initial app project.
N
to the question about generating a routing moduleEnter
or Return
keyangular-example
directory
and see what has been created.
You should have the following initial workspace and starter project files.
angular-example
src
foldere2e
foldercd angular-example
ng serve
ng serve --open
--open
flag opens a web browser to http://localhost:4200/
http://localhost:4200
Ctrl+c
src/app/
folder.
We will work with the following files:
app.component.ts
— the component class,
written in TypeScriptapp.component.html
— the component template,
written in HTMLapp.component.css
— the component's CSS stylesapp.component.ts
,
change the value of the title
property to your-name
app.component.html
,
replace the default template generated by the Angular CLI with
<body> <div> <h1> {{ title }}! </h1> </div> </body>
src
folder.
Open styles.css
and add the following code.
/* general styles of angular-example app */ h1 { color: #00264d; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #004080; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; color: #333333; background-color: ghostwhite; font-family: Cambria, Georgia; }
src
folder.
Open index.html
and add a link.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
angular-example
).
Generate a new component named friends
ng generate component friends
or
ng g component friends
friends
in src/app/
.
friendname
property to the friends
component.
Open friends.component.ts
and add
friendname = 'somename';
to the export class
code block as follow: export class FriendsComponent implements OnInit { friendname: string; constructor() { this.friendname = 'somename'; } ngOnInit(): void { } }The
export
property describes the component that is visible and
can be used by other components or modules.
Now, the FriendsComponent
is made avaialble.
friends.component.html
template file.
Replace the default text generated by the Angular CLI with a data binding to
display the friendname
property Hello {{ friendname }}
friends
component view in the main
angular-example
view.
Go to the src/app/
folder, open app.component.html
template
and add the app-friends
(which is the element selector for
the friends
component) to it.
<app-friends></app-friends>
You may modify your interface the way you like. Get creative. Feel free to add additional elements you feel should be included and have fun!
Released under the CC-BY-NC-SA 4.0 license.
Last updated 2022-06-05 14:17