Rails with Angular - uiView undefined

Question

I'm following this tutorial for making a rails app with angular and have got as far as this section: https://thinkster.io/angular-rails/#integrating-the-front-end-with-the-asset-pipeline-moving-angular-templates-into-the-asset-pipeline-and-structuring-the-javascripts-folder

Nothing is showing up on my page though it says

< !-- uiView: undefined -->

Here's the HTML:

<html>
<head>
  <title>TestApp</title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
</head>
<body ng-app="sfslaps">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <ui-view></ui-view>
    </div>
  </div>


</body>
</html>
</html>

And the angular:

angular.module('sfslaps', ['ui.router', 'templates'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home/_home.html',
      controller: 'MainCtrl'
    })
    .state('posts', {
      url: '/posts/{id}',
      templateUrl: 'posts/_post.html',
      controller: 'PostsCtrl'
    });

  $urlRouterProvider.otherwise('home');
}]);

What's causing it to say this and not display any of my UI view? all the HTML is there in the ui-view, but it says undefined beforehand.

enter image description here

Gregory Brown · Accepted Answer · 2015-05-09 20:51:49Z

6

Don't know if you figured it out already... From what I see, you're following this tutorial: https://thinkster.io/angular-rails/

You did everything right, but when you placed your template in the "_home.html" file, you must remove the "script" tags around your code. Otherwise, you are basically including an inline template rather than HTML code.

answered May 9, 2015 at 20:51

Gregory Brown

811 silver badge3 bronze badges

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

Comments

Christoph · Accepted Answer · 2015-04-03 16:40:30Z

1

In your HTML you are not referring to a specific view, so it will state that the view is undefined, what is correct, because you did not define a specific view. Hence the:

<!-- uiView: undefined -->

Your coding itself is actually correct, but you are missing some great functionality here. You can direct your output to a specific view, so you can have more than one template (view) for each state.

HTML

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

JS

.state('home', {
    url: '/',
    views: {
        'main': {
            templateUrl: 'views/home.html'
            controller: 'MainCtrl'
        },
        'alternate': {
            templateUrl: 'views/home2.html'
            controller: 'MainCtrl'
        }
    }
}

This way you can easily direct which templates/partials you want to use based on e.a. set parameters and the undefined comment will now show:

<!-- uiView: main -->

edited Apr 3, 2015 at 16:40

Christoph

4,4013 gold badges26 silver badges38 bronze badges

answered Apr 3, 2015 at 16:18

therebelcoder

1,02814 silver badges28 bronze badges

4 Comments

Mikhail Sokolov Over a year ago

I have the same issue with ui-view. I specified the name of view and now I can see . But still don understand how can I place home.html instesd this

therebelcoder Over a year ago

Can you post some of your code, so I can see the context of your problem?

Mikhail Sokolov Over a year ago

Completely the same code as above but instead  I want to see home.html as a partial page

therebelcoder Over a year ago

@Mikhail - Assuming you defined <div ui-view="main"></div> in your index.html and you are entering the root of your app ("/"). Did you set this > $urlRouterProvider.otherwise('home'); within your stateprovider function?

Collectives™ on Stack Overflow

Rails with Angular - uiView undefined

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related