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 | ├─── 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
Let’s look at each folder and file included in the Angular JS app directory structure.
The folder app is the core part of Angular JS app. All angular js files are placed within the app folder.
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.
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_test.js consisting of unit tests
This is the default CSS style sheet for the Angular JS application.
The app.js is the main application module for the Angular JS app.
This is the main HTML template layout file for the Angular JS application.
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.
The protractor is an end-to-end test framework for AngularJS applications.
This is an end to end scenarios which run by protractor framework.
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.
This file includes the configuration for the bower package managing using JSON.
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.
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.
The bower.json is a package file which is defined by a manifest file. This is similar to package.json.
This is the MIT license of Angular JS.
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 is used to generate the HTML summary of the project.