Architecting an angular CLI project – App (Part 3)

In the two previous article I talked about creating the app, the basic folder structure and I also implemented the basic core structure to provide a framework of development. In this last post I’ll be briefly go over the app folder.

Inside de app folder we have the following:

  • components (we’ll use it to store all the non-screen components we create)
    • common (general, reusable components we use inside the screens)
    • layouts (the layouts components of our app like full layouts, footer and navigation bars)
  • directives (official docs)
  • pipes (official docs)
  • views (all the screens/partial screens of our app)

Let’s start with components. Inside components we’ll add the layouts, or wrappers, of our application. In my example I created two layout variants, blank layout and basic layout. Blank layout is a simple layout with nothing in it. It only serves as an outlet for the pages using it. Basic layout, on the other hand, provides a more comprehensive layout with navigation, main screen wrapper and footer. These can be seen here:

<router-outlet></router-outlet>
<div id="wrapper">
    <div class="my-side-bar-class">
        My side bar
    </div>

    <div class="my-main-div-class">
        <router-outlet></router-outlet>
    </div>

    <div class="my-footer-class">
        My footer
    </div>
</div>

To make use of these layouts we need to wrap the views inside them in the app.routes file, like:

export const AppRoutes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },

    {
        path: '',
        component: BasicLayoutComponent,
        children: [
            { path: 'home', component: HomeComponent }
        ]
    },

    {
        path: '', component: BlankLayoutComponent,
        children: [
            { path: 'login', component: LoginComponent },
        ]
    },

    {
        path: '**',
        redirectTo: 'home'
    }
];

In this example the HomeComponent will use the basic layout and LoginComponent the blank layout.

Moving on to the common folder. Here we add any components that are reusable in our application. Let’s say we have a custom header, or a grid, or form and so on. We’d add them here.

Now we have the views folder. Here we store all the components that are views, like the home screen, the dashboard, the login screen, etc. A good practice is to have each component inside folders, so the home screen would be on the root folder, but the login screen would have its own folder named login. If we have a records screen with CRUD operations we might use the structure:

This way we won’t lose track of our views… Also important to remember while using this approach is that whenever we create a view, we should use the –flat option to prevent Angular CLI from creating a folder with the name of our component. Since the “correct” name would be something like AddRecordComponent and our folder is named add, we’d break the concept.

It’s also important to remember that in order to avoid clutter and help to maintain the code, we might want to create modules for some folders like common components, layouts, pipes and directives. Please check the LayoutsModule example. By doing so, we can simply import our module where needed.

That was it! The idea of this series was not to have a properly working demo, (although if you run npm start you might have a pleasant surprise ^.^”) but instead to demonstrate some good practices and provide a basic framework on which to start developing our angular apps.

Here’s the GitHub repository with the working project: https://github.com/eestein/cli-architecture




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *