1
\$\begingroup\$

https://plnkr.co/edit/bOZW1a9u62W1QA6cYjYj?p=preview

My goal has been to separate the Dashboard states from the Feed state. Inside the Dashboard state these are the following views: Tickers, Tags, Social.

Changes in those 3 should not effect the Feed module. (However changes from the Feed will eventually need to update the other 3)

I finally achieved this by adding the <feed-module></feed-module> to the root of the index file. Right underneath the first <div ui-view></div>.

<!-- MAIN CONTENT -->
<div class="container">
  <div ui-view></div>
  <feed-module></feed-module>
</div>

This is of course not ideal, because (1): There should only be 1 ui-view on the index, and (2): This exposes the feedModule outside of the login state.

I have an idea of perhaps going from the login state to a container state that will hold the dash-module and feed-module together, but have gotten no success yet. You can see an attempt here.

enter image description here

Full code to top Plnkr link here:

// Feed module
////////////////////////////////////////////////////////////////////////////////
var feed = angular.module('feed', ['ui.router'])

feed.config(function($stateProvider) {

  const feed = {
    name: 'feed',
    url: '/feed',
    templateUrl: '<em>Feed items go here.</em>'
  }

  $stateProvider.state(feed);

})

feed.component('feedModule', {
  templateUrl: 'feed-module-template.html',
  controller: function($scope, $state) {
    console.log('Feed init (only once)', $state.params);
  }
})

// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var routerApp = angular.module('routerApp', ['ui.router', 'feed']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/login');

    const login = {
      name: 'login',
      url: '/login',
      templateUrl: 'login.html',
      bindToController: true,
      controllerAs: 'l',
      controller: function($state) {
        this.login = function() {
          $state.go('dashboard', {});
        }
      }
    }

    const dashboard = {
      name: 'dashboard',
      url: '/dashboard',
      params: {
        ticker: {},
        tags: {}
      },
      views: {
        '' : {
          templateUrl: 'dashboard.html',
        },
        'tickers@dashboard': {
          templateUrl: 'tickers-module-template.html',
          controller: function($scope, $state) {
            console.log('Tickers init', $state.params);

            $scope.tickers = [
              { id: 1, ticker: 'AAPL' },
              { id: 2, ticker: 'GOOG' },
              { id: 3, ticker: 'TWTR' }
            ];

            $scope.clickTicker = function(ticker) {
              console.log(' ')
              console.log('Ticker clicked!')
              $state.go('dashboard', { ticker: ticker });
            }
          }
        },
        'tags@dashboard' : {
          templateUrl: 'tags-module-template.html',
          controller: function($scope, $state) {
            const tags_model = [
              {
                ticker: 'AAPL',
                tags : [{ id: 1, term: 'iPhone 7' }, { id: 2, term: 'iPhone 8' }, { id: 3, term: 'Tim Cook' }]
              },
              {
                ticker: 'GOOG',
                tags : [{ id: 4, term: 'Pixel' }, { id: 5, term: 'Pixel XL' }, { id: 6, term: 'Chrome Book' }]
              },
              {
                ticker: 'TWTR',
                tags : [{ id: 7, term: 'tweet' }, { id: 8, term: 'retweet' }, { id: 9, term: 'moments' }]
              }
            ];

            function matchTags(ticker, model) {
              return model.filter(function(obj){
                if (obj.ticker === ticker) { return obj; }
              });
            }

            $scope.tags_model = matchTags($state.params.ticker.ticker, tags_model)[0];

            $scope.clickTag = function(tag) {
              $state.go('tags', { tag: tag });
            }

            console.log('Tags init', $state.params);
            // console.log(' Tags model', tags_model);
          }
        },
        'social@dashboard' : {
          templateUrl: 'social-module-template.html', 
          controller: function($state) {
            console.log('Social init', $state.params);
          }
        }
      }
    }

    $stateProvider
      .state(login)
      .state(dashboard);
});
\$\endgroup\$

closed as unclear what you're asking by Jamal Apr 16 '17 at 22:04

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • \$\begingroup\$ The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. \$\endgroup\$ – Jamal Mar 18 '17 at 4:47
0
\$\begingroup\$

I was able to accomplish this by creating a new module called container which you are redirected to from the login state.

https://plnkr.co/edit/ivpBrncRKAXxhoYlm6uY?p=preview

// Container module
////////////////////////////////////////////////////////////////////////////////
var container = angular.module('container', [ 'ui.router' ])
    container.config(function($stateProvider) {
      const container = {
        name: 'container',
        url: '/container',
        templateUrl: 'app.container.html'
      }

      $stateProvider.state(container);
    });

And the app.container.html looks like so:

<div>
  <dashboard-module></dashboard-module>
  <feed-module></feed-module>
</div>

I'm still having problems with sibling and parent -> child $state communication, but those are different questions.

\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged or ask your own question.