title: Angular 2, using Angular Cli, and Ui Router Ng2, Resolve/Reject
body: <p>I a have a question for you guys. I am using Angular 2, set up with Angular-CLI, with the UiRouter (ui-router-ng2). All of which are fantastic, and I am making progress. But, I've run into a problem, that I'm sure is easily resolvable, I just don't know how to do it.</p>
  
  <p>So I have a "menu service" which grabs categories from a mock db I've set up. The service works great, and I am able to list out the categories, and use those categories to get sub categories and items. I am using URL-less paramaters, i.e. I am declaring them as objects, and passing them using [UiParams]. All of that is working well, and I can even use a back button 'uiSref="^"' to get to the parent state. All awesome. BUT! For testing purposes, I am using the ui-router-visualizer, and I've come into the issue where I can still transition into a state, even though the object is empty. See, from my understanding, the object is resolved, and returned empty. This prevents errors, surely, but if a user magically ends up in a sub state, an empty object is placed in, then nothing shows. This causes errors in its own right, since the view has nothing to interpolate upon. This also leads to the back button malfunctioning, since ui-params aren't available.</p>
  
  <p>Now, all of that being said, how do I reject the state transition if the return object from my menu service is empty?</p>
  
  <p>CODE For the state. I am using Ng2StateDeclaration for this.</p>
  
  <pre><code>{
      name:'category',
      parent:'main.categories',
      params:{
          categoryid:{}
      },
      views:{
          '$default@main': { component: SubcategoryComponent },
          receipt: { component: ReceiptComponent }
      },
      resolve:[
          {
              token:'category',
              deps: [Transition, MenuService],
              resolveFn: (trans, menuSvc) =&gt; {
                  menuSvc.getCategory(trans.params().categoryid)
              }
  
          }
      ]
  }`
  </code></pre>
  
  <p>Here is the code for the menu service in its entirety. It's super simple.</p>
  
  <pre><code>import { Injectable, Inject } from '@angular/core';
  import { Headers, Http, Response} from '@angular/http';
  import 'rxjs/add/operator/toPromise';
  
  @Injectable()
  export class MenuService {
  
  constructor(@Inject(Http) public http:Http) { }
  
  getCategories() {
      return this.http.get('api/menu')
              .map(this.extractData)
              .toPromise();
  
  }
  private extractData(res: Response) {
      let body = res.json();
      return body.data || { };
  }
  getCategory(id){
      console.log(id);
      return this.getCategories()
          .then(cats =&gt; cats.find(cat =&gt; cat.id == id));
  }
  }
  </code></pre>
  
  <p>And also the component, also very basic. I am using their quickstart-app as my main learning tool.</p>
  
  <pre><code>import { Component, Input, Inject } from '@angular/core';
  
  @Component({
    templateUrl: './subcategory.component.html',
    styleUrls: ['./subcategory.component.css'],
      inputs: ["category"],
  })
  export class SubcategoryComponent {
  
  category;
  }
  </code></pre>
  
  <p>If anyone could either point me to somewhere that answers this question, or tell me where and how to put in an If/Else statement that returns either the object or rejects the state transition, that'd be amazing. I am also structuring things like the quickstart example, so this is all housed within a separate module from the main app's module.</p>
  
  <p>I am still very green to this whole process, so I am not too sure on where exactly to do work when it comes to business logic controlling state transitions.</p>
  
  <p>Thanks in advance!</p>