2017-10-14 38 views
0

我是Meteor新手。 我實現angularui:angularui路由器,但我有一個問題,我告訴你:Meteor JS中的負載控制器

我有以下文件夾:

客戶

- > main.js

- > index.html

- >登錄

- > l ogin.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文件時出現該錯誤。 問題是,在流星我試圖做同樣的事情,它並沒有爲我工作。

總結:我需要一種方法來加載代表控制器的JS文件。

我嘗試添加一行代碼的文件服務器/ 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. 

[email protected]    # Packages every Meteor app needs to have 
[email protected]  # Packages for a great mobile UX 
[email protected]     # The database Meteor supports right now 
[email protected]   # Reactive variable for tracker 
[email protected]     # Meteor's client-side reactive programming library 

[email protected] # CSS minifier run for production mode 
[email protected] # JS minifier run for production mode 
[email protected]   # Server-side component of the `meteor shell` command 

[email protected]    # Allow all DB writes from clients (for prototyping) 
twbs:bootstrap 
jquery 
fourseven:scss 
angular 
es5-shim 
angularui:angular-ui-router 
babel-compiler 

回答

0

它的工作如下:

我修改了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> 

是否真的正確的方式?

0

問題出現在這一行:

import template from './login.html'; 

它應該是這樣的:

import './login.html'; 

這裏沒有實際進口(應該不是),除非你使用nathantreid:blaze-modules

至於$ is not defined:此代碼在服務器上運行(server/main.js),沒有jQuery。

+0

它顯示了同樣的錯誤,更多「警告:試圖加載角度不止一次。」 –