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="[email protected]" 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.
Is it the right approach of leaving
ui-router
empty as a hack?Is there a way to make
ui-router
NOT requireui-view
?