Question

所以我最近用angularjs制作了一个待办事项应用程序，我想通过使用angularjs作为FE和ROR作为BE api进行一些练习。我很难让他们一起工作。我基本上遵循了这个https://thinkster.io/tutorials/angular-rails/getting-started-with-rails教程，但是基本上将我的代码输入了项目而不是那里。我修改了那里的代码以使用es6语法，因此我可能错过了一些东西。当我运行Rails服务器时，页面上没有任何显示，并且在Error: [$injector:nomod]上方出现了意外的反义词错误。拥有所有待办事项功能的待办事项文件夹位于javascripts文件夹下。

application.html.erb：

<!DOCTYPE html>
<html>
  <head>
    <title>DylansToDoApp</title>
    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>
    <%= csrf_meta_tags %>
  </head>

  <body ng-app='app'>
    <ui-view></ui-view>
  </body>
</html>

application_controller.rb：

class ApplicationController < ActionController::Base
  def angular
    render 'layouts/application'
  end
end

gemfile：

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.0'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2', '>= 5.2.2.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.3.0'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
gem 'font-awesome-rails'
gem 'angular-rails-templates'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

app.js：

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import uiBootstrap from 'angular-ui-bootstrap';
import templates from 'angular-rails-templates';
import toDoCtrl from './todo/toDoCtrl.js'
import todoTemp from './todo/_todo.html'
import AppComponent from './AppComponent.js';
import 'normalize.css';

angular.module('app', [
    uiRouter,
    Common,
    Components,
    uiBootstrap,
    templates
  ])
  .config(($locationProvider, $stateProvider, $urlRouterProvider) => {
    "ngInject";
    // @see: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
    // #how-to-configure-your-server-to-work-with-html5mode
    $locationProvider.html5Mode(true).hashPrefix('!');
    $stateProvider
      .state('todo', {
        url: '/todo',
        templateUrl: todoTemp,
        controller: toDoCtrl
      })
      $urlRouterProvider.otherwise('/');
  });

  .component('app', AppComponent);

application.js：

//= require angular
//= require angular-rails-templates
//= require angular-ui-router 
//= require_tree .

将ruby api与angularjs集成

0 个答案: