Angular js structure in .Net MVC 5

Question

I have been new to angular js. My structure of Angular JS in MVC5 is in the picture below

I need to create a simple application that has CRUD for a single entity. So far, I have created only single controller in Angular folder.

I have put all the directives, filters and functions in the Website.js file. I need to create different pages like add/edit/details.

The CRUD operations are not only simple, but i have to put some extra logics in them. I need some process where either deletion, addition or updating in model do changes everywhere on the page.

Question

Should i place all the directives, functions to the same controller? Or i should create seperate files for each CRUD operation? Please guide me to the structure of this application.

Ankit K · Accepted Answer · 2016-09-21 08:46:29Z

1

You should create seperate files for directives, filters, services and controllers like this:

app(folder inside scripts)
----- controllers/(folder inside app)
---------- userController.js
---------- itemController.js
----- directives/(folder inside app)
---------- mainDirective.js
---------- otherDirective.js
----- services/(folder inside app where all the services will go)
---------- userService.js
---------- itemService.js
----- app.js(main file where you will declare angular module and other application configurations which are common)

Create module wise controllers and service like for user module i have created one service named userService and one controller userController now in this user controller i will implement all business logic related to user and all CRUD operations. It is good practice to specify all $http requests for CRUD in a service and call that service from controller.

answered Sep 21, 2016 at 8:46

Ankit K

1,3261 gold badge11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

CodeGenius Over a year ago

Where would i register all the controllers, directives, services? would i be adding there dependencies in app.js file?

CodeGenius Over a year ago

since I have only one CRUD thing i added as Angular (root folder) -- controllers -- directives -- services -- app.js

Ankit K Over a year ago

you will register all controllers, directives, services etc in your app like this: var app=angular.module('myApp',[]); Now all other things will be created like app.controller......app.service....app.directive

CodeGenius Over a year ago

and when i need to use service in controller. i would pass that to controller. Why is that so? If i have created service for app as app.service('xyz',[]). why should add its dependency to controller if i have already added it to app?

Ankit K Over a year ago

In the app we have declared our service. All controllers, services, filters and directives are declared in app. we can not use a service directly in a view.. so we should create a controller for every view and then we can pass service as a dependency in that controller. Service are also used for reusability propose so we can pass one service in multiple controllers also.

|

Collectives™ on Stack Overflow

Angular js structure in .Net MVC 5

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related