第一次写前端项目使用AngularJS,能力比较差,技术比较笨拙,将angular.js文件导入项目之后,添加ng-app和ng-controller,本以为会一帆风顺,没想到爆出了一连串的错误。
我的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body background="images/background.png" ng-app="sale-app" ng-controller="sale-app-controller">
</body>
</html>
然后运行的时候就爆出了下面的错误:
Uncaught Error: [$injector:modulerr] Failed to instantiate module sale-app due to:
Error: [$injector:nomod] Module 'sale-app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.6.9/$injector/nomod?p0=sale-app
at http://localhost:8020/MobileSaleApp/js/angular.js:116:12
at http://localhost:8020/MobileSaleApp/js/angular.js:2303:17
at ensure (http://localhost:8020/MobileSaleApp/js/angular.js:2224:38)
at module (http://localhost:8020/MobileSaleApp/js/angular.js:2301:14)
at http://localhost:8020/MobileSaleApp/js/angular.js:4999:22
at forEach (http://localhost:8020/MobileSaleApp/js/angular.js:408:20)
at loadModules (http://localhost:8020/MobileSaleApp/js/angular.js:4983:5)
at createInjector (http://localhost:8020/MobileSaleApp/js/angular.js:4900:19)
at doBootstrap (http://localhost:8020/MobileSaleApp/js/angular.js:1955:20)
at bootstrap (http://localhost:8020/MobileSaleApp/js/angular.js:1976:12)
http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=sale-app&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'sale-app'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.9%2F%24injector%2Fnomod%3Fp0%3Dsale-app%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A116%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A2303%3A17%0A%20%20%20%20at%20ensure%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A2224%3A38)%0A%20%20%20%20at%20module%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A2301%3A14)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A4999%3A22%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A408%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A4983%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A4900%3A19)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A1955%3A20)%0A%20%20%20%20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A1976%3A12)
at http://localhost:8020/MobileSaleApp/js/angular.js:116:12
at http://localhost:8020/MobileSaleApp/js/angular.js:2303:17
at ensure (http://localhost:8020/MobileSaleApp/js/angular.js:2224:38)
at module (http://localhost:8020/MobileSaleApp/js/angular.js:2301:14)
at http://localhost:8020/MobileSaleApp/js/angular.js:4999:22
at forEach (http://localhost:8020/MobileSaleApp/js/angular.js:408:20)
at loadModules (http://localhost:8020/MobileSaleApp/js/angular.js:4983:5)
at createInjector (http://localhost:8020/MobileSaleApp/js/angular.js:4900:19)
at doBootstrap (http://localhost:8020/MobileSaleApp/js/angular.js:1955:20)
at bootstrap (http://localhost:8020/MobileSaleApp/js/angular.js:1976:12)
http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=sale-app&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'sale-app'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.9%2F%24injector%2Fnomod%3Fp0%3Dsale-app%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A116%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A2303%3A17%0A%20%20%20%20at%20ensure%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A2224%3A38)%0A%20%20%20%20at%20module%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A2301%3A14)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A4999%3A22%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A408%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A4983%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A4900%3A19)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A1955%3A20)%0A%20%20%20%20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A8020%2FMobileSaleApp%2Fjs%2Fangular.js%3A1976%3A12)
at http://localhost:8020/MobileSaleApp/js/angular.js:116:12
at http://localhost:8020/MobileSaleApp/js/angular.js:5023:15
at forEach (http://localhost:8020/MobileSaleApp/js/angular.js:408:20)
at loadModules (http://localhost:8020/MobileSaleApp/js/angular.js:4983:5)
at createInjector (http://localhost:8020/MobileSaleApp/js/angular.js:4900:19)
at doBootstrap (http://localhost:8020/MobileSaleApp/js/angular.js:1955:20)
at bootstrap (http://localhost:8020/MobileSaleApp/js/angular.js:1976:12)
at angularInit (http://localhost:8020/MobileSaleApp/js/angular.js:1861:5)
at http://localhost:8020/MobileSaleApp/js/angular.js:34354:5
at HTMLDocument.trigger (http://localhost:8020/MobileSaleApp/js/angular.js:3488:5)
查了好多资料之后,发现是缺少AngularJS模块和控制器结合控制。
因此需要添加如下的代码:
<script>
var app = angular.module("sale-app", []);
app.controller("sale-app-controller", function($scope) {});
</script>
于是问题就这样解决了。