{"id":59624,"date":"2018-05-02T16:02:11","date_gmt":"2018-05-02T10:32:11","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59624"},"modified":"2024-04-12T14:13:20","modified_gmt":"2024-04-12T08:43:20","slug":"angular-application-structure","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-application-structure\/","title":{"rendered":"Angular Application Structure"},"content":{"rendered":"

Angular Application Structure<\/h1>\n

An Angular project is the foundation for both quick experiments and enterprise solutions.<\/p>\n

The first file you should check out is README.md. It has some basic information on how to use CLI commands. Whenever you want to know more about how Angular CLI works make sure to visit the Angular CLI repository and Wiki.<\/p>\n

Some of the generated files might be unfamiliar to you.<\/p>\n

The src<\/code> folder<\/h3>\n

Your app lives in the src<\/code> folder. All Angular components, templates, styles, images, and anything else your app needs go here. Any files outside of this folder are meant to support building your app.<\/p>\n

\n
\n
\n

Let’s get to best practices and what you should be doing to build scalable and maintainable AngularJS apps that your coworkers will love you for. An ideal AngularJS app structure should be modularized into very specific functions. We also want to take advantage of the wonderful AngularJS directives to further compartmentalize our apps. Take a look at a sample directory structure below:<\/p>\n

app\/
\n—– shared\/ \/\/ acts as reusable components or partials of our site
\n———- sidebar\/
\n————— sidebarDirective.js
\n————— sidebarView.html
\n———- article\/
\n————— articleDirective.js
\n————— articleView.html
\n—– components\/ \/\/ each component is treated as a mini Angular app
\n———- home\/
\n————— homeController.js
\n————— homeService.js
\n————— homeView.html
\n———- blog\/
\n————— blogController.js
\n————— blogService.js
\n————— blogView.html
\n—– app.module.js
\n—– app.routes.js
\nassets\/
\n—– img\/ \/\/ Images and icons for your app
\n—– css\/ \/\/ All styles and style related files (SCSS or LESS files)
\n—– js\/ \/\/ JavaScript files written for your app that are not for angular
\n—– libs\/ \/\/ Third-party libraries such as jQuery, Moment, Underscore, etc.
\nindex.html<\/p>\n

This directory structure is much harder to read and understand from the get go. A newcomer to Angular may be completely turned off by this complex approach, and that is why you see tutorials and examples in Angular<\/p>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.<\/strong><\/p>\n

\"\"<\/a><\/p>\n