How to Angular JS- Angular JS app directory structure

In this tutorial, we are going to learn Angular js app directory structure. The Angular JS app has set up with a good organized files and folders structure. The knowledge about directory structure allows the developer to code rapidly.

There are many ways to structure an Angular JS app. Here, we use the default structure of Angular JS app by Webstorm IDE. You can also download the project structure from github.com/angular/angular-seed.

 

Angular JS App directory structure

The following tree diagram shows the directory structure of the Node.js Express app.

App Directory Structure
     ├─── app
     |    ├─── bower_components
     |    |
     |    ├─── components
     |    |
     |    ├─── view1
     |    |
     |    ├─── view2
     |    |
     |    ├─── app.css
     |    |
     |    ├─── app.js
     |    |
     |    ├─── index.html
     |    |
     |    └─── index-async.html
     |
     ├─── e2e-tests
     |    ├─── protactor.conf.js
     |    |
     |    └─── scenarios.js
     |
     ├─── node_modules(library root)
     |
     ├─── .bowerrc
     |
     ├─── .gitignore
     |
     ├─── .jshintrc
     |
     ├─── .travis.yml
     |
     ├─── bower.json
     |
     ├─── karma.conf.js
     |
     ├─── LICENSE
     |
     ├─── package.json
     |
     └─── README.md

 

Angular JS app directory structure

 

Let’s look at each folder and file included in the Angular JS app directory structure.

 

app

The folder app is the core part of Angular JS app. All angular js files are placed within the app folder.

app/bower_components

The bower_components are used for package managing. These components are keeping track of all these packages and making sure they are up to date.   You can install bower manually using  $ npm install -g bower npm command.

The main assets files are loaded from bower compnent folder.

app/components

You can add components to within app/components folder. This folder includes multiple versions of components. You can decide to separate these components by version.

app/view1 and app/view2

Inside app directory, you’ve 2 view folders which are app/view1, app/view2 with each of them consisting of following files:

view.html file that consists of the view that to render on the webpage.

view.js file that consists of javascript code related with view file

view_test.js consisting of unit tests

app/app.css

This is the default CSS style sheet for the Angular JS application.

app/app.js

The app.js is the main application module for the Angular JS app.

app/index.html

This is the main HTML template layout file for the Angular JS application.

app/index-async.html

This HTML file loads JavaScripts asynchronously.

e2e-tests

The end to end (e2e) test is Software Testing methodology which validates the software system under test and also checks its integration with external interfaces.

protractor.conf.js

The protractor is an end-to-end test framework for AngularJS applications.

scenarios.js

This is an end to end scenarios which run by protractor framework.

node_modules

Node_modules are the addition modules in addition to core modules. All of the core modules are loading from external libraries. You can any node_modules to the library using package.json. We will discuss it in coming tutorials.

 

.bowerrc

This file includes the configuration for the bower package managing using JSON.

 

.gitignore

This file is used for Git version control system. Git uses it to determine which files and directories to ignore before you make a commit.

 

travis.yml

This is a configuration file for Travis CI. Travis CI is a hosted distributed continuous integration service used to test software projects hosted on GitHub.

 

bower.json

The bower.json is a package file which is defined by a manifest file. This is similar to package.json.

 

karma.conf.js

It is a configuration file for running unit tests with karma. Karma allows you to execute JavaScript code in multiple real browsers.

 

LICENSE

This is the MIT license of Angular JS.

 

package.json

The package.json is present in the root directory of Angular JS app and is used to define the properties of a package. The package.json file main purpose is to remember your application dependencies and their respective versions.

 

README.md

README.md is used to generate the HTML summary of the project.

 

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...