MCSD MCSD - 2 months ago 22
AngularJS Question

MVC5 + Angular JS folder structure

I'm new to angular and trying to learn best practises. what is the best practice for a folder structure for an ASP.NET MVC5 AngularJS application.

MVC5 default structure
- Controllers Folder
- Models Folder
- Views Folder ---> Action Name Folder


(now to bring in Angular)In the scripts folder in the project would we then have:

controller folder
Module folder
Views Folder etc


Your help will be truly appreciated

Answer

If you are creating AngularJs app first time then follow simple steps.

  1. Create one index.JSP file where you should run your app using ng-app directive and add all scripts and files.
  2. create one Js file app.js.
    add all module name in app.js and run your js using .run method.
  3. maintain services, controllers and filters, directives, templates seperately in different folders and in different files.
    And dont forget to add module name in app.js and add path in index.jsp
  4. In your services files write only sharing business logic.
    All other business logic related to particular file write it in controller.
    Here your are maintaining ajax calls so dont meshup it with controllers.

Service

.factory('angularService', function () {
  return {
    // Write business logic
  }
})
  1. Declare $starteProvider and define .states in your controller.

For ex.

$stateProvider.state('xyz_state', function () {
   // add url,
   // templateUrl,
   // controller
})
.controller('myFirstController', function () {
   // Add your business logic
   // scope variables
});  

6. Maintain view pages separately.
7. Maintain Directives and Filters separately.

View simply renders your model and you can control both model and view using controller and services.