Exercise for building simple Angular 2 apps
MIT License
Exercise learning the foundations of Angular 2. This tutorial is based on Angular 2 alpha27 and the angular2-seed. In order to try it just clone the repo and follow the steps.
If you get stuck on any of the steps you can use the following branches, which contain the final solution for given chapter:
init.ts
import the module app
, which is located in the same directory. You can point it using its relative location.app/app.ts
component app
, using the selector property of the component annotation.View
annotation add property templateUrl
, which should point to the app
component's template.App
component's template add the following markup:<h1>Hello Angular2!</h1>
Congratulations! Now you already have a working Angular 2 application! You can test it by using the terminal. Go to the angular2-github-app-bootstrap
directory and type gulp serve.dev
inside your terminal window.
The result should be as follows:
app/app.ts
import the home
component and add it as dependency of the App
component.
components/home
. You can use its relative path.App
component requires Home
as dependency by adding the directive
property of the object passed to the component annotation. The directive property accepts an array of directives as value.home.ts
import the following annotations and directives from the module angular2/angular2
: Component
, View
, NgFor
, NgIf
.NgFor
and NgIf
as dependencies of the Home
component, the same way you added Home
as dependency for the App
component.templateUrl
property for the Home
component, which points to the appropriate location.selector
with value home
to the object passed to the component annotation of the Home
component.app/app.html
add the Home
component using home
element (remove the Hello Angular2!
heading).users
of the Home
class, it should be of type string[]
and inside the constructor of Home
it should be initialized with an empty array.Home
component and make the following changes:
#currentuser
to the input with id user-input
. This way you'll be able to reference the input using currentuser
.addUser
with the currentuser
text input*ng-for
directive to the first tr
element inside the body of the table under the All Users
legend. It should loop over all users
and display their name inside the link in the first cell (note: you can use the interpolate directive {{ }}
).selectUser
method should be invoked with the currentuser
as argument.removeUser
method with the current user as argument.Home
component and implement the methods addUser
, removeUser
as follows:
addUser(user)
should add the new user to the list of users (i.e. users
array). Optionally you can restrict the addUser
operation to only not existing users. Do not forget to reset the value of the currentuser
input once you add it to the list of users.removeUser(user)
should remove the given user from the users
array.Awesome! The second step is completed! If you haven't stopped gulp serve.dev
just save the files you changed and refresh http://localhost:5555
in order to see the functionality you just implemented!
Did you notice that when you click on any of the users in the list on the right-hand side of the screen an error occurred? Now we're going to fix this!
home.ts
import the UserDetails
component, which is located inside ../../components/user-details/UserDetails
and add it as dependency of the Home
component.selectUser(user:string)
, which implements the following logic:
selectedUser
to null
.loading
status to true.getUser
method with the current user
passed as argument. getUser
will return a promise, add resolve handler for the promise. The handler should accept a single argument - the user, which we got from the GitHub's API. Inside the callback set the value of the selectedUser
and change the loading
status to false
.Home
component uncomment the lines in the bottom and add *ng-if
directive to the .spinner
element with value loading
(i.e. the element should be visible when the loading
status is true
).user-details
component add two attributes:
[user]
attribute, which should point to the current selectedUser
*ng-if
attribute (directive), which should has as value the following boolean expression: selectedUser !== null
.UserDetails.ts
and add the property properties
to the object passed to the Component
annotation's call. It should be an array with a single value 'user'
. This way we state that we want to be able to pass properties to our UserDetails
component using the [user]
attribute.user-details.html
and make the following additions:
[src]
to the img
element. It should point to the user.avatar_url
.{{user.login}}
{{user.followers}}
{{user.following}}
{{user.public_repos}}
removeUser
method in the Home
component set the value of the selectedUser
to null
if it is equal to the user we want to remove.Thats it. You're done with this exercise! You can try it the same way you tried "Step 2"! Congratulations! Here is what you should see as final result:
This is the first iteration of the readme so there might be some typos, mistakes or tasks, which are not quite clear or too verbose. If you think you can improve the quality of the document just fork the repo and initiate a pull request, it will be greatly appreciated!
MIT