繁体   English   中英

对角度和导轨布线在一起感到困惑

[英]Confused about angular and rails routing together

我正在尝试将AngularJS集成到我的应用程序中,其中我在url /events/something下有任何内容,可以通过角度路由来解决。 不过,我一直在关注角度的教程和只是我似乎无法得到渲染视图。 我认为自己在路由中做错了,但似乎无法弄清楚。 谁能帮我吗?

样本链接: http://localhost:3000/events/events1

Rails路线:

get '/events/:id' => 'event#event'

角度代码:

var app = angular.module('eventsApp', ['ngRoute', 'templates']);

app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.when('events/:id', {
            templateUrl: 'eventTemp.html',
            controller: 'EventsCtrl'
        });
    }
]);
app.controller('EventsCtrl', function($scope, $http){
    console.log('yo!'); //this is never logging
});

外部模板:

<div class = "event" ng-app="eventsApp">
    <div ng-view></div>
</div>

eventTemp.html

<h1>Text</h1>

我正在使用angular-rails-templates gem,并且所有模板都在app/assets/javascripts/templates 这是application.js样子:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
//= require angular-rails-templates
//= require_tree ./templates
//= require turbolinks

我曾经遇到过类似的问题,解决方法是-使用:

$routeProvider('/events/:id')

代替

$routeProvider('events/:id')

显然,角度要求是路由路径以/开头。

您的Angular应用与模板位于同一目录吗? 如果不是,则templateUrl必须是正确的路径。

templates/eventTemp.html

我玩了一下,结果发现问题出在

$routeProvider.when('events/:id' 

当我将方法更改为此:

var app = angular.module('eventsApp', ['ngRoute', 'templates']);

app.config([
  '$routeProvider', function($routeProvider) {      
    $routeProvider.
     when('/', {
        templateUrl: '../templates/eventTemp2.html',
        controller: 'EventsCtrl2'
     }).
     otherwise({
        templateUrl: '../templates/eventTemp.html',
        controller: 'EventsCtrl'
     });
  }
]);
app.controller('EventsCtrl', function($scope, $http){
    console.log('yo!');
});

app.controller('EventsCtrl2', function($scope, $http) {
    console.log('yo2');
});

将渲染EventsCtrl2eventTemp.html2

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM