Getting started with Angular JS - Structure and other questions

Question

I'm new to AngularJS and have gone through its tutorial, read some of its documentation, and I understand the main aspects. But I'd like some help in organizing the structure of my project.

Basically, I want to have a single page app. There will be a few main sections, e.g: Customers, Sales, Reports, etc. Each section will have its own pages e.g 'Add a Customer', 'View Sales reports', etc.

1) So, should I make one module for my app, with different routes and controllers for every screen?

2) Or should I have multiple modules, e.g one module for 'Customers', one for 'Sales', etc?

3) Say I have a 'Add Customer' form which has a bunch of fields. I want this form to be interactive e.g if the user selects his country from a dropdown, I want to load the cities for that country via an ajax request. Would I do this event handling within my controller, or should I make a directive for it? What if I'm only ever going to need this functionality for one form, should I still go to the trouble of writing a directive?

4) I want to build a CRUD form builder type of library, where I would add the fields that are required, and it would in return generate the add/edit/delete/list views and forms, alongwith the required form validation. Something like this:

var crud = new CrudLib();
crud.addTextbox('first').label('First Name').rules('required');
crud.addTextbox('email').label('Email').rules('required,email');
//....
crud.init();

Should I make this a module, or a directive, or something else?

i'm new to angularjs too, hoping someone can provide an answer — user428517
– user428517, Commented Aug 1, 2013 at 18:14

Community · Accepted Answer · 2017-05-23 11:56:36Z

1

(Too many questions in one question.)

1) and 2): organize your controllers and services into modules however you like. I tend to put "related things" into a separate module. E.g., a LoginCtrl, LogoutCtrl, UserService, etc. I put into a User.js file, which is a module.

3) AJAX interactions should be put in a service/factory/provider. Event handling should be in directives. (Directives may seem a bit cumbersome/overkill at times, but use them whenever you need to manipulate the DOM, attach event handlers, or reuse a chunk of HTML.)

4) You will need to write a directive if you need custom form validation. See also How can I use Angular to output dynamic form fields?

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Aug 1, 2013 at 19:28

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

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

4 Comments

Ali Over a year ago

thanks. One thing.. is it possible to have nested partial views? I.e, I have a partial view in my div showing a screen, and the screen itself has tabs that you can switch through. I want the switching of tabs to trigger different partial views only under the tabs, but I want the rest of the partial view to be left alone. Any ideas how to do that?

Ali Over a year ago

One more thing that's really puzzling me. How do I simple form validation? I.e, I have a form. When its submit button is clicked, the info will be submitted via ajax to a server. (I know how to do this part so far).The server will return a JSON object of errors. E.g [errors {email: 'The email [email protected] is already in use' }]. I want this error to be shown beneath the email textbox. I suppose I'd have to write a directive for doing this?

Mark Rajcok Over a year ago

@ClickUpvote, partial views: I would use ng-switch to switch between tab view/partials. Inside each ng-switch-when, an ng-include would pull in the appropriate partial for that tab. Each partial will likely use ng-controller, so each tab can have its own controller.

Mark Rajcok Over a year ago

@ClickUpvote, form validation: see docs.angularjs.org/guide/forms#customvalidation Yes, you'll likely need your own directive if you want to display server-generated errors. Have your controller set $scope error properties that your directive can $watch for. The directive can then call $setValidity() for the element with the error.

Collectives™ on Stack Overflow

Getting started with Angular JS - Structure and other questions

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related