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. — , Jun 22 '13 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. — , Jun 22 '13 at 16:55

score 1 · Accepted Answer · edited May 23 '17 at 12:05

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 '17 at 12:05

Community

1
1

answered Jun 24 '13 at 17:44

Mark Rajcok

362,217
114
495
492

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? – Wottensprels Jun 25 '13 at 08:15
1

@Sprottenwels, see http://stackoverflow.com/questions/15666048/angular-js-service-vs-provide-vs-factory – Mark Rajcok Jun 25 '13 at 15:04
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? – Wottensprels Jun 27 '13 at 12:27
@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. – Mark Rajcok Jun 27 '13 at 14:40

score 0 · Answer 2 · answered Oct 10 '13 at 11:46

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

Basic behaviour and structure of an angularjs app

2 Answers2