Definition Of AngularJs

AngularJs:-  

1. Angular is a java script framework that is used to build  application that run on the browser.
2.  Angularjs is developed by Google
3. Angularjs ia an open source project that means free to use, changed

Benefit of using AngularJs:-

1. Dependency injection
2. Two way Data-binding
3. Easy to Test

You should have the knowledge:-

• HTML
• CSS
• JavaScript   

AngularJs Directory Structure

AngularJs Directory Structure:-

Download

Some people for the fast-developing code doesn’t think about directory structure. but for the long project it will affect the project maintainability. There are lots of way to structure the application.

In this article, we will learn how to structure the angularJs application. We will cover all the directory structure for both large and small application to increase project maintainability.

1.Standard Angular Directory Structure: -

In the standard directory structure, we will follow the following step: -

1.  Open Visual Studio -> click new Project-> Asp.net web application
2.  Give the Application Name that you want
3. Right Click Application-> Add Folder ‘App’
4. Right Click ‘App’->Add Folder ‘Content’, ‘Controller’, ’Service’, ‘View’
5.  For the better understanding, I have attached the Image of standard directory structure: -

Content Folder: - it contains Css and Js Folder and File.

Controller: - Contain the controller Js file

Service: - Contain the the service Js File.

View: - Contain the Html File.

Index.html: - it’s the master html and root of front end structure.

Assets Folder: - it contains all the assets you want in your application like css, js, image Folder and files.

App Folder: - app Folder contain the appModule.js and appRoute.js.

appModule.js handle the setup of your application and approute.js file will handle all the route and route configuration.

Note:- 

This is the normal standard angularJs directory structure.  When the controller and view folder size increase then it’s difficult to scroll down. Then we follow better structure foundation.

2. Better Structure Angular Structure directory: -

Index.html: - it’s the master html and root of front end structure.

Assets Folder: - it contains all the assets you want in your application like css, js, image Folder and files.

App Folder: - app Folder contain the appModule.js and appRoute.js.

appModule.js handle the setup of your application and approute.js file will handle all the route and route configuration.

Component Folder: - it is the actual folder in the application. It contains the view, controller, service in the specific site folder like ‘Home’, ‘Blog’ etc.

Shared folder: -it contains the directives and html that are used in the application multiple time.

Benefits of this: -

1    1.     Easy to maintain
2.       Easy to test
3.       Scalable
4.       Easy to debugger