Avoid using ui-view in Angular ui-router

Problem

It seems like Angular.js ui-router must have ui-view in order to have the whole thing to work. Here is an example without ui-view and routing is NOT working (no alert): http://plnkr.co/edit/e1vzj6pDdqADKJ2LSsd3?p=preview

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.12/angular.js" data-semver="1.2.12"></script>
    <script data-require="ui-router@*" data-semver="0.2.8" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <a href="#/link">Test</a>
    <!--div ui-view></div-->
  </body>

</html>

Javascript:

var app = angular.module('plunker', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

  $stateProvider
    .state("link", {
      url: "/link",
      resolve: {
        test: function() {
          alert("Triggered resolve /link");
          return true;
        }
      }
    });
}]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

If you put <div ui-view></div> back in, it would work.

This is not big deal because I could leave that ui-view empty. I don't use ui-view (may sound strange) because ui-view replace DOMs. I just want to toggle my container instead of doing completed rip-and-replace.

  1. Is it the right approach of leaving ui-router empty as a hack?

  2. Is there a way to make ui-router NOT require ui-view?

Problem courtesy of: HP.

Solution

You can use ng-show or ng-if to achieve toggling of dom elements. But I do get your point that sometimes you need to just use ui-router as an object oriented location management tool.

You can use the ui-sref attribute on your <a> instead of a pure href as a hack to get to a state that doesn't know where to get rendered.

I edited your plunkr to demonstrate:

http://plnkr.co/edit/KLm8HTIkvnbGzhzmwSwG?p=preview

basically change

  <a href="#/link">Test</a>

to:

 <a ui-sref="link">Test</a>

I am not sure of best practices or anything. It is a good question and I am sorry I can't completely answer on the 1-st point that you made. Not sure if it is the right approach, it all depends on how you use ui-router. In a rather big app we have somewhat many named views and then we do use ui-view, but I can see how sometimes it would be useless.

Solution courtesy of: Nikola Yovchev

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.