Learn #Angular JS2 with Paras Mendiratta in 31 days — Day #10

Goal Model and Goal Service Layer

For those who are coming first time to my this blog: We are building an online planner similar to Google Keep. You can see more details over here: Tutorial Series

Today we will be doing two important things:

1. Creating data model for Goal
2. Creating service layer for Goal

We need to define the bodies of our application entities. In our application, we have three main entities:

• Goal
• Task
• User

Goal Model

Since we are working on Angular 2 for first time, so let’s start with simple entity model for Goal. Let’s have only two properties for now:

1. title — title of the goal
2. archived — whether the goal is archived by end user

see the class structure below:-

goal.model.ts

Goal Mock Data

Right now instead of getting the data from server, we will be creating some mock data and we will using it in our application.

goals.mock.ts

The structure of mock data is very simple as of now. It just exports an array of goals; which is nothing but bunch of JSON data.

Goal Service Class

In Angular 2, view components are not suppose to directly deal with data. We need to create service class to supply data to view components. Let’s create service also for goal.

goal.service.ts

Notice that we imported the Angular Injectable function and applied that function as an @Injectable() decorator.

Don’t forget the parentheses! Neglecting them leads to an error that’s difficult to diagnose.

TypeScript sees the @Injectable() decorator and emits metadata about our service, metadata that Angular may need to inject other dependencies into this service.

We’re ready to use the GoalService in other components starting with our GoalManagerComponent.

Using Service Class

Declare the service in the module. To do that, import the service in module and mention it in the providers block. See code below:

goal.module.ts

Now in GoalManagerComponent, import the service.

Now the question arises, how to use this service. Do we need to create the instance of Service class. Well NO. We will never create the instance of service class. We will only inject the service class in the component class. To do that inject the service in constructor of the component:-

Last thing that we need to do it to populate the list from service. We can do that when component is initialised. Each component has 4 life-cycle methods:-

1. OnInit — calls when component is initialised
2. DoCheck — calls every time when an event happens
3. OnChanges — calls when @Input variable has some changes
4. OnDestroy — calls when component is destroyed

We will using OnInit as we want the data when component is initialised. To do so first we need to implement OnInit interface and define the body of function ngOnInit:void. There we can simply get the goals:

Get the goals using service class

See the complete code

goalmanager.component.ts

Try adding or removing new goals in the mock data. You can see the changes reflected in the application. Well that’s all for today. Tomorrow we will be working Task Model and we will work also on creating an editor for goal. Meanwhile you can download the code for today from day 10 branch (link given below).

Download Day #10 Code:

Day #10 Branch — CodeSnooker/silver-doe

Journey Links:

• Gear up: Prologue
• Day #1: Introduction to AngularJS 2
• Day #2: Component & HTML Designs
• Day #3: Introduction to NgModule
• Day #4: Introduction to Components
• Day #5: Introduction to Directives
• Day #6: Revisit Planner HTML
• Day #7: Revisit Planner Component — Communicating between components within Module
• Day #8: Introduction to Pipes
• Day #9: Building GoalManagerComponent & GoalComponent
• Day #10: Goal Model and Goal Service Layer
• Day #11: Task Model and Goal Editor
• Day #12: Enhancing Goal Editor
• Day #13: Managing Goals
• Day #14: Displaying TaskList in GoalManager View
• Day #15: Syncing, Copying and Deleting Goals