Angular UI-Router is not inserting templates into ng-view element

Question

I'm trying to build a very simple app using angular UI-Router.

My index.html file:

<!DOCTYPE html>
<html ng-app="elara">
<head>
<script type="text/javascript" src="/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/ctrl/indexCtrl.js"></script>
<script type="text/javascript" src="/js/ctrl/registerCtrl.js"></script>
</head>
<body>
    <ng-view>   </ng-view>
</body>
</html>

app.js file

angular.module('elara', ['ui.router'])

.run(
    ['$rootScope', '$state', '$stateParams',
        function($rootScope, $state, $stateParams) {

            // It's very handy to add references to $state and $stateParams to the $rootScope
            // so that you can access them from any scope within your applications.For example,
            // <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
            // to active whenever 'contacts.list' or one of its decendents is active.
            $rootScope.$state = $state;
            $rootScope.$stateParams = $stateParams;
        }
    ]
)

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

            .state('home', {
                url: '/',
                templateUrl: '/tmpl/index.html',
                controller: 'indexCtrl'
            })

            .state('register', {
                url: '/register',
                templateUrl: '/tmpl/register/register.tmpl.html',
                controller: 'registerCtrl'
            })
        }
    ]);

The indexCtrl.js file

app = angular.module('elara', []);

app.controller('indexCtrl', ['$scope', function($scope){
    $scope.message = "index"
}])

and registerCtrl.js is same. Just controller name and message is different.

in my x.tmpl.html files i just want to write message variable.

{{message}}

Problem is, when I navigate to url / or #/register I am always getting empty page. message variable is not in the page or my template htmls are not loaded.

Also there are not errors in the console.

Radim Köhler · Accepted Answer · 2015-10-17 15:06:58Z

1

The target for states is ui-view

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

In case, we use named views : {'myName': { ... } } we provide the name like this

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

answered Oct 17, 2015 at 15:06

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

9 Comments

Sefa Over a year ago

I have changed my ng-view element as ui-view as you show but i still have the same problem.

Radim Köhler Over a year ago

Missing line to make that all running is also $urlRouterProvider.otherwise("/"); I created fully working example here plnkr.co/edit/Xnncd8g4UQOh0OW9QpkH?p=preview

Radim Köhler Over a year ago

Here is a bit more complex solution example with kind of parent state and layout views ... stackoverflow.com/q/28800644/1679310 it could give some insight into UI-Router named views

Sefa Over a year ago

Thanks for the plunker! I still can't get mine working. I added the missing line and compared our codes. Added '<a ui-sref="home">home</a>' to my index.html file and realized it's not getting "href" property when the page is rendered. Can this give us a clue?

Radim Köhler Over a year ago

I would suggest.... really take my stuff, into your local. Then, try step by step replace original pieces. Also, observe console log for messages. You are really close...

|

Collectives™ on Stack Overflow

Angular UI-Router is not inserting templates into ng-view element

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related