javascript - AngularJS UI-Router does not work as the way ng-router works -

javascript - AngularJS UI-Router does not work as the way ng-router works -

i'm trying utilize angular ui-router library has more features ng-router. however, ng-router works in page while ui-router not work.

angular code

$stateprovider .state('map.main', { url: '/', template: '<h1>my contacts</h1>' }); //$routeprovider.when( //"/", { // template: '<h1>my contacts</h1>' //}); $locationprovider.html5mode(false);

html code simple div tag ng-view or ui-view.

anyone can think problems?

there a working plunker

you need adjust state def @ to the lowest degree this

.state('map', { abstract: true, template: '<div ui-view=""></div>', }) .state('map.main', { url: '/', template: '<h1>my contacts</h1>' });

what can see, there new state "map" parent of "map.main". must if want have state "map.main". dots (.) info ui-router, state built hierarchy (parent map, kid main)

also, in our index.html have create target:

<div ui-view=""></div>

this serve placeholder, our parent. kid injected parent's template: '<div ui-view=""></div>',

check here

try read more here:

ui-router wiki example application , great state defintion contact.js

javascript angularjs angular-ui-router angular-routing