Angularjs模块无法识别 [英] Angularjs module not being recognized
问题描述
我正在制作一个有角度的应用程序到目前为止我已经制作了一个带有控制器视图和路由提供程序的模块。但是我在开始时遇到错误说
angular.js:4588未捕获错误:[$ injector:modulerr]由于以下原因无法实例化模块mainM:错误:[$ injector:nomod]模块'mainM'不可用!
我在两个脚本中都发出警报,因此它们正在运行,我导入了anguler和anguler-route,然后导入我的java脚本,所以我不确定为什么它不被识别?
我是棱角分明的JS sohelp的新手获得传递的hello world将非常感激! :)
提前致谢
我尝试过: < br $>
// Javascript
var mainM = angular.module(' mainM',[' ngRoute'])
.config([ $ routeProvider, $ locationProvider, function ($ routeProvider,$ locationProvider)
{
$ routeProvider
// 主页的路由
.when(' / ',{
controller: homeController,
templateUrl:' ../ index.html'
} )
// 关于页面的路线
$ routeProvider .when(' / signIn',{
controller: controllSignIn,
templateUrl:' ../ Public / partials / MainPage / signIn.html'
})
$ routeProvider.when(' / signUp',{
controller: controllNewProject,
templateUrl:' ../ Public / partials / MainPage / newProject.html'
})
// 联系页面的路线
$ routeProvider.when(' / newProject',{
controller: controllSignUp,
templateUrl:' ../ Public / partials / MainPage / signUp.html'
});
$ locationProvider.html5Mode({enabled: true ,requireBase: false } );
}]);
<! - HTML CODE - >
< html lang = zh ng-app = mainM > ;
< head >
< title > Project Buddy < / title >
< link rel = stylesheet href < span class =code-keyword> = bower_components / bootstrap / dist / css / bootstrap.min.css >
< link rel = stylesheet href = bower_components / font-awesome / css / font-awesome.min.css >
< link rel = stylesheet href = Public / css / mainPage.css >
< meta name = viewport content = width = device-width, initial-scale = 1.0 >
< meta charset = utf-8 / >
< / head > ;
< body background = img / background.jpg >
< div class = dropDown >
< ul id = drop-nav >
< li > < a href = 跨度> # > 新项目< < span class =code-leadattribute> / a >
< ul > < li > < a href = # > 搜索项目 < / a > < / li > < 小号pan> / ul >
< / li >
< li > < a href = # > 我的帐户< / a >
< span class =code-keyword>< ul >
< li > < a href = # > Joomla < / a > ; < / li >
< li > < a < span class =code-attribute> href = # > Drupal < / a > < / li >
< li > < a href = # > WordPress < / a < span class =code-keyword>> < / li >
< li > < a href = # > 具体5 < / a > < / li >
< / ul >
< / li >
< li > < a href =< /跨度> # > 设计文档< < span class =code-leadattribute> / a >
< ul >
< li > < < span class =code-leadattribute> a href = # > 创建文档< / a > < / li >
< li > < a href = # > 上传文件< / a > < / li >
< / ul >
< / li > ;
< / ul & gt;
<! - 徽标在这里 - >
< img src = img / Logo.jpg alt = 徽标 样式 = width:汽车;高度:150; align = left class < span class =code-attribute> = make-it-fit < span class =code-keyword>> < / img >
< ul id = drop-nav >
< li > < a href = # > 。关于< / a > < span class =code-keyword>< / li >
< li > < a href = # > 跨度>。论坛< / a >
< ul >
< li > < a href = # > Joomla < / a > < / li >
< li > < a href = # > Drupal < / a > < / li >
< li < span class =code-keyword>> < a href = # > WordPress < / a > < / li >
< li > < a href = # > 具体5 < / a > < / li >
< / ul >
< / li >
< < span class =code-leadattribute> li > < a href = # > 聊天< ; / a >
< ul >
< li > < ; a href <小号pan class =code-keyword> = # > 创建文档< span class =code-keyword>< / a > < / li >
< span class =code-keyword>< li > < a href = # > 上传文档< / a > < / li > ;
< / ul >
< / li >
< / ul >
< / div >
<! - 下拉菜单结束 - >
<! - 测试链接 - >
< a href = #// > Root < / a >
< a href = #/ signIn > 登录< / a >
< a href = #/ signUp > 注册< / a >
< a href = #/ newProject > 新项目< / a >
< ng-view > < / ng-view >
< div class = chatBox > 后台聊天< / div >
< script src = bower_components / angular / angular.js > < / script >
< script src = bower_components / angular-route / angular-route.js > < / script >
< script src = scripts / module.js > < / script >
< / body >
< / html >
injector:modulerr]由于以下原因无法实例化模块mainM:错误:
injector:nomod] Mo dule'mainM'不可用!
我在两个脚本中都发出警报,因此它们正在运行,我在导入我的java脚本之前导入了anguler和anguler-route所以我不确定为什么它不会被识别出来?
我是棱角分明的JS新手,所以通过hello world会非常感激! :)
提前致谢
我尝试过: < br $>
// Javascript
var mainM = angular.module(' mainM',[' ngRoute'])
.config([
routeProvider,
Hi, i'm making an angular app so far I have made a module with controllers views and route provider.. However i'm getting an error at the beginning saying
"angular.js:4588 Uncaught Error: [$injector:modulerr] Failed to instantiate module mainM due to: Error: [$injector:nomod] Module 'mainM' is not available!"
I put an alert in both scripts so they are being ran and I imported anguler and anguler-route before importing my java script so i'm not sure why it's not being recognized?
I'm new to angular JS sohelp getting passed hello world would be vastly appreciated! :)
Thanks in advance
What I have tried:
//Javascript
var mainM = angular.module('mainM', ['ngRoute'])
.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider)
{
$routeProvider
// route for the home page
.when('/', {
controller: "homeController",
templateUrl : '../index.html'
})
// route for the about page
$routeProvider.when('/signIn', {
controller: "controllSignIn",
templateUrl : '../Public/partials/MainPage/signIn.html'
})
$routeProvider.when('/signUp', {
controller: "controllNewProject",
templateUrl : '../Public/partials/MainPage/newProject.html'
})
// route for the contact page
$routeProvider.when('/newProject', {
controller: "controllSignUp",
templateUrl : '../Public/partials/MainPage/signUp.html'
});
$locationProvider.html5Mode({enabled: true, requireBase: false});
}]);
<!-- HTML CODE -->
<html lang = "en" ng-app ="mainM">
<head>
<title>Project Buddy</title>
<link rel = "stylesheet" href = "bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel = "stylesheet" href = "bower_components/font-awesome/css/font-awesome.min.css">
<link rel = "stylesheet" href = "Public/css/mainPage.css">
<meta name ="viewport" content = "width=device-width, initial-scale = 1.0 ">
<meta charset=utf-8 />
</head>
<body background = "img/background.jpg">
<div class="dropDown">
<ul id="drop-nav">
<li><a href="#">New Project</a>
<ul><li><a href="#">Search For Project</a></li></ul>
</li>
<li><a href="#">My Account</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
<li><a href="#">Design Documents</a>
<ul>
<li><a href="#">Create Document</a></li>
<li><a href="#">Upload Document</a></li>
</ul>
</li>
</ul>
<!-- Logo goes here -->
<img src="img/Logo.jpg" alt="Logo" style="width:auto; height:150;" align="left" class = "make-it-fit"></img>
<ul id="drop-nav">
<li><a href="#">. About</a></li>
<li><a href="#">. Forum</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
<li><a href="#">Chat</a>
<ul>
<li><a href="#">Create Document</a></li>
<li><a href="#">Upload Document</a></li>
</ul>
</li>
</ul>
</div>
<!-- End of drop down menu -->
<!-- Test links-->
<a href="#//">Root</a>
<a href="#/signIn">Sign In</a>
<a href="#/signUp">Sign Up</a>
<a href="#/newProject">New Project</a>
<ng-view></ng-view>
<div class="chatBox">Back ground chat</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="scripts/module.js"></script>
</body>
</html>
injector:modulerr] Failed to instantiate module mainM due to: Error:
injector:nomod] Module 'mainM' is not available!"
I put an alert in both scripts so they are being ran and I imported anguler and anguler-route before importing my java script so i'm not sure why it's not being recognized?
I'm new to angular JS sohelp getting passed hello world would be vastly appreciated! :)
Thanks in advance
What I have tried:
//Javascript
var mainM = angular.module('mainM', ['ngRoute']) .config(["
routeProvider", "
这篇关于Angularjs模块无法识别的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!