javascript - 从 ngRoute 切换后,AngularJS、Rails 和 ui-router 不显示模板

标签 javascript ruby-on-rails angularjs angular-ui-router

您好,我正在尝试从 ngRoute 切换到 ui-Router,但切换后,模板不再加载。

我在 application.html.erb 中添加了 ui-Router:

<%= javascript_include_tag 'application' %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>

这是我的 app.js 中的代码

var app = angular.module("alliance",['ui.router', 'ui.bootstrap']);

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider, 

$urlRouterProvider) {

  $stateProvider
    .state('dashboard', {
      url:'/',
      templateUrl: "<%= asset_path('pages/dashboard.html') %>",
      controller:   "DashboardController"
    });

  $urlRouterProvider.otherwise("dashboard");
}]);

可以正常工作的原始 ngRoute 代码。

var app = angular.module("alliance",['ngRoute', 'ui.bootstrap']);

app.config(['$routeProvider',function($routeProvider) {
   $routeProvider
     .when('/', {
       templateUrl:  "<%= asset_path('pages/dashboard.html') %>",
       controller:   "DashboardController"
     })

现在显示默认的 Rails View 。

我检查了 ui 路由器脚本是否已加载。顺序重要吗?

我也玩过州名、网址,但似乎不是这样。

感谢任何帮助。预先非常感谢。

编辑:

我更改了 application.js 的加载顺序

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-ui-router
//= require angular-ui-bootstrap-tpls
//= require_tree .

我将配置中的 url 更改为/dashboard,但它仍然为我提供默认的 Rails View 。

最佳答案

顺序很重要,您需要在 Angular 之后、应用程序之前加载 ui-router。

此外,$urlRouterProvider.otherwise("dashboard");也是错误的,您的状态称为dashboard,但网址是/。 您需要将仪表板的 url 定义为 /dashboard ,然后 $urlRouterProvider.otherwise("/dashboard");

关于javascript - 从 ngRoute 切换后,AngularJS、Rails 和 ui-router 不显示模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33404346/

相关文章:

javascript - Aurelia 在 repeat.for 之前附加触发器

sql - 对于性能问题,在数据库中保留记录而不是删除它是否有好处?

javascript - angular js结合了异步和同步代码

javascript - 使用字符串与属性名称进行 Angular 绑定(bind)

php - jQuery Ajax = 成功返回页面

javascript - 匹配线性渐变及其字符串内容的正则表达式

javascript - python bcrypt 和 node.js bcrypt

ruby-on-rails - 我应该把模型访问的函数放在哪里? -- rails 3.1

sql - 如何在 Postgres/Rails 中禁用 OR 条件优化

javascript - AngularJS 架构