Search code examples
angularumlclass-diagram

Classdiagram Angular2, association or dependency when injection and using routing

I need to create a class diagram of my newly created Angular2 application. I know the basic of creating class diagrams for a .NET application written in C#, but have never made one based on a Angular2 architecture.

Scenario 1: Class that depend on service

code:

@Injectable()
export class AmendmentAccountComponent implements OnInit 
{

    constructor(private accountService: AccountService) 
    {

    }
}

Lets say I have created a Component called AccountComponent. This component needs a service called AccountService that will be injected in the constructor. Right now I'm thinking of drawing a dependency (not association) from AccountComponent to AccountService that indicates it needs this dependency before the component will be executed.

A dependency compared to how it looks in this article

Is a dependency the correct way of showing (what i explained) in a class diagram?

Scenario 2: Component uses routing (RouteConfig)

Lets say I have a component named PageComponent. It has a class named the same. The component got some routing like resented in the RouteConfig code under here:

@RouteConfig([
    { path: '/', name: 'Bookings', component: BookingsComponent },
    { path: '/bookings', name: 'Bookings', component: BookingsComponent, useAsDefault: true },
])

So a child of this component is the BookingsComponent. How should I draw this relationship in a class diagram? just with a normal association?

Hope someone can help, specially with scenario 2, which I'm not sure how to draw it.

Solution

  • Scenario 1: Yes, a dependency from AccountComponent to AccountService is correct.

    Scenario 2: A dependency from PageComponent to BookingComponent is appropriate in this case too. A normal association (with the arrowhead pointing to BookingComponent) would imply that an instance of PageComponent could have a link (in the UML sense of the word) to an instance of BookingComponent. In Angular2, I would use an association only if class PageComponent would have a field of type BookingComponent.

    For more information about UML modeling for Angular software, see Technical design in UML for AngularJS applications