Angular Application Folder Structure
Today, We want to share with you Angular Application Folder Structure.
In this post we will show you AngularJs Application Folder Structure, hear for AngularJs Application Structure we will give you demo and example for implement.
In this post, we will learn about AngularJS Folder Structure with an example.
Simple Way AngularJS – Directory Structure for Angular Apps
I shall cover best practices to perfect regarding directory(folder) structures for both small-apps and large-apps AngularJS application.
We have a parts – separation of concerns parts like controllers,modules,views, controllers specific have their own folder all the controllers, views have their add on own folder(partial), external libraries have theiradd on own folder(dir.), etc.
imp points Once you have more than 12 or more controllers, services,views(partial,tpl) and directives so, you are going to all files have to do a lot of all the scrolling in your project directory(folder) tree to find the must required files.
second things, An ideal AngularJS application structure should be different types of module(ng-app) modularized into best specific functions.
Goals – why structure?
The Main goals I want for any application or project structure are:
*)There must be consistency in the File structure in your project
*)we must be able to find what we are looking for quickly and fast.
*)I must be able to find all the php we are looking for based on file names and file location
*)It has to scale
Angularjs File : Naming convention List
One of the first best things you must be notice is that we have a any very strict (special )naming convention for application files:
1st)The Controllers – [FileName].ctrl.js
2nd)The Templates-[FileName].tpl.html
3rd)The Directives-[FileName].drct.js
4th)The Factories-[FileName].fct.js
5th)The Values-[FileName].val.js
6th)The Services-[FileName].srv.js
7th)The Modules-[apps_name].[modules_name].js
Simple AngularJS Project Structure
->index.html (or index.php)
->/resources
–>/css
–>/fonts
–>/images
–>/js
—>/controllers
—>/directives
—>/filters
—>/services
–>/partials (views pages)
Standard Structure in angularjs
[php]
root-application-folder(root folder Like cricmaster)
├── index.html or index.php
├── scripts(js files)
│ ├── controllers(AngularJS controllers)
│ │ └── main.js(routing files)
│ │ └── …
│ ├── directives(AngularJS directives)
│ │ └── myDirective.js
│ │ └── …
│ ├── filters(AngularJS filters)
│ │ └── myFilter.js
│ │ └── …
│ ├── services(AngularJS services)
│ │ └── myService.js
│ │ └── …
│ ├── vendor(AngularJS libs)
│ │ ├── angular.js(basic js)
│ │ ├── angular.min.js(minify js)
│ │ ├── es5-shim.min.js
│ │ └── json3.min.js
│ └── app.js(routing js libs)
├── styles(css external files)
│ └── …
└── views(partials or templates)
├── main.html(index.html)
└── …
[/php]
Directory Structure in angularJs
[php]
app/
—– controllers/
———- homeController.js
———- conatctController.js
———- mainController.js
———- productController.js
———- aboutController.js
———- otherController.js
—– directives/
———- homeDirective.js
———- conatctDirective.js
———- mainDirective.js
———- otherDirective.js
———- aboutusDirective.js
—– services/
———- loginService.js
———- registerService.js
———- itemService.js
———- userService.js
———- checkoutService.js
—– js/
———- custom.js
———- bootstrap.js
———- validation.js
———- jquery.js
———- logicdata.js
—– app.js
views/
—– home.html
—– contact.html
—– mainView.html
—– about.html
—– salesorder.html
—– otherView.html
—– index.html or index.php
[/php]