Meteor JS 中的负载控制器

Question

我是 Meteor 的新手。我实现了 angularui: angular-ui-router 但是我有一个问题，我告诉你：

我有以下文件夹：

客户

-> main.js

-> index.html

-> 登录

-> login.js

-> login.html

-> 主页

-> home.html

-> 兼容性

main.js 包含以下内容：

import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';

angular.module('angularUPF', [
  angularMeteor,
  uiRouter
]);

angular.module('angularUPF').config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/");

  $stateProvider
    .state('home', {
      url: "/",
      templateUrl: "client/home/home.html"
    })
    .state('login', {
      url: "/login",
      templateUrl: "client/login/login.html",
      controller: "loginCtrl"
    });
});

模板加载我很好，但是控制器告诉我它不存在，

loginCtrl.js

import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';

import template from './login.html';

angular.module('angularUPF', [])
    .controller('loginCtrl', function($scope) {
      'ngInject';

      $scope.firstName = "Anthony";
    $scope.lastName = "Camus";
    });

错误：

Uncaught SyntaxError: Unexpected token <
    at eval (<anonymous>)
    at Function.globalEval (modules.js?hash=acbbea235a5e860a943adbe75f051d48f27c799a:56114)
    at text script (modules.js?hash=acbbea235a5e860a943adbe75f051d48f27c799a:64984)
    at ajaxConvert (modules.js?hash=acbbea235a5e860a943adbe75f051d48f27c799a:64019)
    at done (modules.js?hash=acbbea235a5e860a943adbe75f051d48f27c799a:64483)
    at XMLHttpRequest.<anonymous> (modules.js?hash=acbbea235a5e860a943adbe75f051d48f27c799a:64899)
    at Object.send (modules.js?hash=acbbea235a5e860a943adbe75f051d48f27c799a:64951)
    at Function.ajax (modules.js?hash=acbbea235a5e860a943adbe75f051d48f27c799a:64432)
    at Function.jQuery._evalUrl (modules.js?hash=acbbea235a5e860a943adbe75f051d48f27c799a:64595)
    at domManip (modules.js?hash=acbbea235a5e860a943adbe75f051d48f27c799a:61058)


Error: [ng:areq] Argument 'loginCtrl' is not a function, got undefined
http://errors.angularjs.org/1.4.8/ng/areq?p0=loginCtrl&p1=not%20aNaNunction%2C%20got%20undefined
    at http://localhost:3000/packages/angular_angular.js?hash=b4b9bf43d4c591e6e90c1fe259c40d8bb252d2e8:93:12
    at assertArg (http://localhost:3000/packages/angular_angular.js?hash=b4b9bf43d4c591e6e90c1fe259c40d8bb252d2e8:1840:11)
    at assertArgFn (http://localhost:3000/packages/angular_angular.js?hash=b4b9bf43d4c591e6e90c1fe259c40d8bb252d2e8:1850:3)
    at http://localhost:3000/packages/angular_angular.js?hash=b4b9bf43d4c591e6e90c1fe259c40d8bb252d2e8:9183:9
    at http://localhost:3000/packages/modules.js?hash=acbbea235a5e860a943adbe75f051d48f27c799a:44724:28
    at invokeLinkFn (http://localhost:3000/packages/angular_angular.js?hash=b4b9bf43d4c591e6e90c1fe259c40d8bb252d2e8:8866:9)
    at nodeLinkFn (http://localhost:3000/packages/angular_angular.js?hash=b4b9bf43d4c591e6e90c1fe259c40d8bb252d2e8:8360:11)
    at compositeLinkFn (http://localhost:3000/packages/angular_angular.js?hash=b4b9bf43d4c591e6e90c1fe259c40d8bb252d2e8:7756:13)
    at publicLinkFn (http://localhost:3000/packages/angular_angular.js?hash=b4b9bf43d4c591e6e90c1fe259c40d8bb252d2e8:7636:30)
    at updateView (http://localhost:3000/packages/modules.js?hash=acbbea235a5e860a943adbe75f051d48f27c799a:44643:23)

我知道的多一些AngularJS而且我知道当我不加载index.html中的JS文件时会出现错误。问题是在 Meteor 中我尝试做同样的事情但它对我不起作用。

总结：我需要一种方法来加载代表控制器的 JS 文件。

我尝试在文件server/main.js中添加一行代码

import { Meteor } from 'meteor/meteor';
import '../imports/database/connect_db.js';
import '../imports/database/init_db.js';

Meteor.startup(() => {
  console.log('Server running!');
  $.getScript("../client/login/loginCtrl.js");
});

但是它告诉我 $ 没有定义

我的包裹：

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base@1.1.0             # Packages every Meteor app needs to have
mobile-experience@1.0.5       # Packages for a great mobile UX
mongo@1.2.2                   # The database Meteor supports right now
reactive-var@1.0.11            # Reactive variable for tracker
tracker@1.1.3                 # Meteor's client-side reactive programming library

standard-minifier-css@1.3.5   # CSS minifier run for production mode
standard-minifier-js@2.1.2    # JS minifier run for production mode
shell-server@0.2.4            # Server-side component of the `meteor shell` command

insecure@1.0.7                # Allow all DB writes from clients (for prototyping)
twbs:bootstrap
jquery
fourseven:scss
angular
es5-shim
angularui:angular-ui-router
babel-compiler

Answer 1

问题出在这一行：

import template from './login.html';

应该是这样的：

import './login.html';

这里没有实际导入（不应该），除非你使用 nathantreid:blaze-modules。

至于$ is not defined：此代码运行在服务器(server/main.js)上，没有jQuery.

Answer 2

它的工作原理如下：

我修改了loginCtrl.js:

Meteor.startup(function(){
  angular.module('angularUPF')
      .controller('loginCtrl', function($scope) {
        'ngInject';

        $scope.firstName = "John";
      $scope.lastName = "Doe";
      });
})

而 login.html 是这样的：

<div ng-controller="loginCtrl">
     First Name: <input type="text" ng-model="firstName"><br>
     Last Name: <input type="text" ng-model="lastName"><br>
     <br>
     Full Name: {{firstName + " " + lastName}}
</div>

这样的方法真的对吗？

Meteor JS 中的负载控制器

Load Controllers in Meteor JS

javascript

jquery

angularjs

meteor

angular-router