3
I studied the Angular Js 1.x and I was able to understand perfectly where the architecture fits MVC in the framework, but I didn’t feel the same Angular 4. Yeah, I know, that’s pretty crazy, but could someone explain to me.
I have this little doubt and I thank you.
3
Angular does not have an MVC architecture, so if recommended in the style guide would be an architecture by Feature.
Overall the template is easy to define with typescript either with classes or preferably by interfaces.
Control and view do not have a clear separation at the angle. This is because you can keep the application status in services or Components if it is only used in the component. The same goes for functions if it is specific of a component does not have much sense to put it in a service although in the style guide it recommends put complex logic in the 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 get an idea.
Overall, a mvc architecture makes no sense at all because you won’t put all the services together or all the components together separate from their respective html. This architecture is discouraged since the Angularjs because it does not scale well. Imagine if you have 50 Components you have to find it in the middle of 50 inside a Components folder is not a good one.
Another advantage of making architecture by Features is that you can make one Lazy-loading of your modules only when they are needed. Making a great application much faster. Imagine that you have a route /admin may be that 80% of your users never access that route and it may contain very heavy Components that would slow your site to load. So it makes sense to carry it only when that route is accessed making your site much lighter.
So it should 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.
Voce would have a folder
user
user-list inside this user folder
0
An Angular 4 eclipse project has the following folder structure:
node_modules (where the Node.js libraries are located)
src (where all source files are located)
"loose" files (this is where some important files like package.json, tsconfig.json, tslint.json)
Inside the src folder, we have the following structure:
app (where all the components Angular will use are located)
Assets (images, icons, everything stays here)
Environments (production/development environment configuration files)
Inside the folder src, are files like favicon, the index.html that is the basis of the project (here are the tags head and body of the application!).
Here too is the webconfig.xml to make settings when making a Zipdeploy on Azure, for example.
When it comes to making a module, you make two files, the <modulo>-routing.ts and the <modulo>-module.ts. routing routes the module and module is the definition of the module itself, such as Imports, declarations and providers.
When it comes to components, you must have a file. ts to define it, and can put all the HTML and CSS code inside that same file, doing so:
@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 other properties to use in the components, which you can check on Angular 4 API page.
Browser other questions tagged javascript angularjs mvc angular
You are not signed in. Login or sign up in order to post.
Okay, I get it. But it’s like I said in the question, right, I started with Angularjs. I had taken a course where the guy did all the application in MVC and soon after I adventured at the angle in version 4. I felt a lot of difficulty to understand this.
– Mayro Myller