CODEWITHSUNDEEP
angularjs
DRNR
DRNR

Reputation: 453

"Header" controller which will always be present on top

Started learning AngularJS today, using webpack and ES6. I'm kind of stuck on a simple problem that I cannot figure out. I'm building a really simple SPA app, like a shopping cart app, which should have the "header" component with a couple of links to other pages and the sum and total of shopping cart.

One of these other controllers could be just a random dummy page, one could be the shopping cart summary, and the main controller would be where the user can actually add items to the shopping cart.

What I have thus far is just the following routes:

export default function routes($stateProvider) {
  $stateProvider
    .state('main', {
      url: '/',
      template: require('./main.html'),
      controller: 'MainController',
      controllerAs: 'main'
    })
    .state('other', {
      url:'/other',
      template: require('./other.html'),
      controller: 'OtherController',
      controllerAs: 'other',    
    })
}

index.js:

export default angular.module('app.main', [uirouter, productService])
  .config(routing)
  .controller('MainController', MainController)
  .controller('OtherController', OtherController)
  .name;

productService isn't relevant here, so I exclude that code.

Just as a test I tried to set the OtherController as a separate view in index.html:

<body>
  <div ui-view="other"></div>
  <div class="container" ui-view></div>
</body>

Kind of like suggested here: How to update partial of html using ES6 syntax with angular-webpack-seed

Also tried to use ng-controller="other" instead of ui-view="other", but that throws error:

The controller with the name 'other' is not registered

And I don't know where I would then register it...

Some places I read that you could use a directive for making a "header"/navbar, but that doesn't seem correct to me at all. Also tried that though, in this way: https://stackoverflow.com/a/33714913/6294072 Read about ng-include, but that wouldn't work, since I need the service for the shopping cart.

I am missing something fundamental here, but can't figure it out. My brain is also (unfortunately) wired on Angular (4), since I have some experience with that :)

Sorry for the noob question, I feel ashamed, but I have been struggling for this for hours now and therefore going crazy. Help is very much appreciated!

Upvotes: 0

Views: 69

Answers (1)

Mike Feltman
Mike Feltman

Reputation: 5176

Use components instead of controllers with controllerAs. You'll find it much more similar to Angular 4. Then depending on how you want to do it, you can use either bindings or requires to create relationships between your components.

Since you have tight control over this, I would go with requires. Create a component with your navbar and stuff in it, then create child components and require the parent in them. We have a generic in-house framework for this stuff. The outer component we call the site, so we get a reference to it in our child components like this:

require: { site: '^f1Site' }

If you're not already doing so, use ui-router 1.0.x and use route to component to handle navigation & state.

Index.html just has <f1-site>Loading</f1-site> in it's body.

The f1-site template has basic layout stuff in it - including navbars and such that we've moved off into their own components - and then the ui-view directive is on the tag where we want to load all of dynamic components.

Upvotes: 1

Related Questions