我是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
答案 0 :(得分:1)
问题出在这一行:
import template from './login.html';
应该是这样的:
import './login.html';
此处没有实际导入(不应该),除非您使用的是nathantreid:blaze-modules
。
至于$ is not defined
:这个代码在服务器(server/main.js
)上运行,没有jQuery。
答案 1 :(得分:1)
它的工作原理如下:
我修改了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>
这真的是正确的方式吗?