Basic behaviour and structure of an angularjs app

Question

I am trying to introduce myself into angularjs.

Although i have worked through the tutorial and watched the basic building videos, i am still struggling with the behaviour and architecture of a more-or-less large scale application.

My application has a menubar that includes an add-button. If the user clicks the button, i want a dialog to pop-up. That dialog is not part of the menu:

<!-- The menu -->
<header class="mod modHeader" ng-controller="HeaderCtrl">
  <div class="modHeader__addProject" ng-click="openAddDialog()">
    <i class="icon-plus icon-2x"></i>
  </div>
</header>

<!-- the dialog -->
<div class="modNewProject" ng-show="properties.AddDialogVisibility" ng-controller="HeaderCtrl">
    <!-- content stripped out -->
</div>

My intention was to create a properties object inside the scope of my HeaderCtrl controller, then change a boolean value on click of the said button.

// HeaderCtrl
function HeaderCtrl($scope){
  $scope.properties = {
    "AddDialogVisibility": false
  };

  $scope.openAddDialog = function () {
    $scope.properties.AddDialogVisibility = true;
  };

}

Now, there are multiple issues and questions:

I have to apply HeaderCtrl to my dialog in order to get access to the properties object. This is nasty to me, HeaderCtrl should control only my header module, shouldn't it?
The dialog won't show up on click. I found out that this is because the property gets checked only once, on page load, and that i would have to use a function. What is a proper way to achieve my goal?

Conclusion:

I would say that i can summarize my question to:
I use a Controller for each section of my page. How do they communicate?

There's no AngularJS tag because this is programmers.SE, not StackOverflow. I've flagged this question for migration to that community. — user677526
– user677526, Commented Jun 22, 2013 at 16:53
Additionally - your issue is that you're using two instances of the same controller, meaning that they have two different scopes. They don't communicate. I would recommend using a single ng-controller to wrap both your header and dialog. — user677526
– user677526, Commented Jun 22, 2013 at 16:55

Community · Accepted Answer · 2017-05-23 12:05:26Z

1

In the sample code you provided, two HeaderCtrls will be created. Each use of ng-controller will create a controller.

To share data in Angular, use a service. Inject that service where needed – into controllers, directives, etc.

When designing an Angular app, try to think in terms of models (which are often contained in services, and those services then expose model APIs to the rest of the application) and views. A controller is just the glue that allows us to project the relevant parts of our models into a view.

Dialogs are a special/unique case, since they don't take up a specific place in the rest of the application. Listen to a few minutes of Misko regarding this subject. I would also recommend looking at how the Angular-UI team implemented dialogs: http://angular-ui.github.io/bootstrap/#dialog

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Jun 24, 2013 at 17:44

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

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

4 Comments

Wottensprels Over a year ago

I looked up that service stuff and found that there are services, factories and providers. I understand that they differ from each other in functionality and that services may be the easiest to use. But how do i decide which one to choose?

Mark Rajcok Over a year ago

@Sprottenwels, see stackoverflow.com/questions/15666048/…

Wottensprels Over a year ago

Thank you again, but may i ask one last question? How would you scale that service? One large $objects that serves data application wide, simply enough?

Mark Rajcok Over a year ago

@Sprottenwels, I'm not sure I understand your question. What do you need to scale? A service/factory/provider can be injected wherever you need it (e.g., into multiple controllers, other services, multiple directives, etc.). A service/factory/provider is a singleton. Your singleton can contain a collection of things, or you can have one singleton per collection item.

Nishchit · Accepted Answer · 2013-10-10 11:46:10Z

0

angular structure

app-> 

    assets->
           css -> all css file
           js  -> all js file

    partials-> all html files
    vender -> third party file (like angular.js , jquery.js)

      router.js
      services.js
      filter.js
      directives.js
      controllers.js

      index.html

answered Oct 10, 2013 at 11:46

Nishchit

19.2k12 gold badges58 silver badges81 bronze badges

Collectives™ on Stack Overflow

Basic behaviour and structure of an angularjs app

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related