How to use component templates with ui-router AngularJS?

Question

I am experiencing problems with ui-router. If I change from template to component suddenly all routing breaks.

app.module.js:

(function(){
    angular.module('jigup', [
        'ui.router',
        'map',
    ]);
})();

app.config.js

(function(){
    angular
        .module('jigup')
        .config(function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.when("", "/map");
            $stateProvider
                .state("map", {
                    url: "/map",
                    template: '<span style="width:100px" ui-sref="map"><a href="">map</a></span><span style="width:100px" ui-sref=".about"><a href="">About</a></span> this is map <div ui-view=""></div>'
                })
                .state("map.about", {
                    url: "/about",
                    template: "about page"
                })
        });     
})();

and index.html:

<html lang="en" >
    <head>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.4.1/angular-google-maps.js"></script>
    </head>
    <body ng-app="jigup">
        <div data-ui-view=""></div>
        <script type="text/javascript" src="<?php echo base_url('app/app.module.js'); ?>"></script>
        <script type="text/javascript" src="<?php echo base_url('app/app.config.js'); ?>"></script>
    </body>
</html>

And routing gives me that map is allways displayed but about only if neccessary.

I then tried to change code a bit: app.config.js:

..
.state("map", {
    url: "/map",
    component: 'mapComponent'
})
...

and added files:

map.module.js:

(function(){
    angular.module('map', []);
})();

map.component.js:

    (function(){
        angular.module('map')
            .component('mapComponent', {
                template: '<span style="width:100px" ui-sref="map"><a href="">map</a></span><span style="width:100px" ui-sref=".about"><a href="">About</a></span> this is map <div ui-view=""></div>',
            });
   })();

but routing now breaks - I get blank page!

lin · Accepted Answer · 2017-03-27 14:54:58Z

2

Component templates in ui-router are not supported in v0.4.2 or earlier. You need to switch to the current RC candidate 1.0.0-rc.1 like in this runnable plnkr example.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script>

AngularJS application

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when("", "/PageTab");

    $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "mainTemplate.html"
        })
        .state("PageTab.about", {
            url: "/about",
            component: "about"
         }) 
});

myApp.component('about', {
  template: `<div>
                 <div>
                     <h1>About page</h1>
                 </div>
            </div>`
})

edited Mar 27, 2017 at 14:54

answered Mar 27, 2017 at 14:31

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use component templates with ui-router AngularJS?

1 Answer 1

AngularJS application

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

AngularJS application

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related