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.
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