How to understand the MVC architecture in Angular 4?

The angle does not have an MVC architecture, so if it is recommended in style guide it would be an architecture by feature .

In general the template is easy to define with typescript either with classes or preferably interfaces.

The control and view do not have a clear angular separation. This is because you can keep the state of the application in services or components if it is only used in the component. The same goes for functions if it is specific to a component it does not make much sense to put it in a service though in the style guide it recommends putting complex logic in services. You can also use something like ngrx to manage the state which generates a slightly different architecture and you can see their example application to have an idea.

In general an mvc architecture does not make sense in the angular because you will not go through all the services together or all components together separate from their respective html. This architecture is discouraged from the angular JS because it does not scale well. Imagine if you have 50 components you have to find it in the middle of 50 inside a folder, not a good components.

Another advantage of doing the architecture by features is that you can do a lazy-loading of your modules only when they are needed. Making a great application much faster. Imagine that you have a route / admin might be that 80% of your users never access that route and it might contain very heavy components that would slow your website to load. So it makes sense to load it only when that route is accessed leaving your site much lighter.

So it must be more specifically an architecture by routes. And consequently by features.

In this case if you have for example a route / users that lists users.

You would have a folder

user

• user.module.ts
• usuario.routing.module.ts
• usuario.container.component.ts
• user.container.component.scss
• user.container.component.html
• user.interface.ts - > this would be the equivalent of the model.
• usuario.service.ts

user-list within this user folder

• usuario.list.component.ts
• usuario.list.component.scss
• usuario.list.component.html

An Angle 4 project in eclipse has the following folder structure:

  

node_modules (where the node.js libraries are)

     

src (where all the source code files are)

     

"loose" files (here are some important files, such as package.json, tsconfig.json, tslint.json)

Inside the src folder, we have the following structure:

  

app (where all the components Angular will use)

     

assets (images, icons, everything stays here)

     

environments (production / development environment configuration files)

Within the folder src , there are files like favicon, index.html which is the basis of the project (here are the head and body tags of the application!).

Here, too, is the webconfig.xml to make the settings when doing a ZipDeploy in Azure, for example.

When it comes to making a module, you make two files, <modulo>-routing.ts and <modulo>-module.ts . Routing does the routing of the module and the module is the definition of the module itself, such as imports, declarations and providers.

When it comes to components, you must have a .ts file to define it, and you can put all the HTML and CSS inside that file, doing the following:

@Component({
selector: 'app-department',
template: '<código HTML aqui>',
styles: '<código CSS aqui>'
})

Or with external files, like this:

@Component({
   selector: 'app-department',
   templateUrl: './department.component.html',
   styleUrls: [
       './department.component.css',
       '../../app.component.css'
   ]
})

And there are still other properties to use in the components, which you can check in the Angle 4 API page .