Angular JS错误:$ injector:modulerr模块错误

时间:2016-05-30 14:54:29

标签: angularjs angular-services

我正在使用角度JS创建一个服务并试图运行,但它给我的错误如下

Failed to instantiate module myapp due to:
Error: [$injector:nomod] Module 'myapp' 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.5.5/$injector/nomod?p0=myapp
at file:///D:/Angular/First/lib/angular.js:68:12
at file:///D:/Angular/First/lib/angular.js:2070:17
at ensure (file:///D:/Angular/First/lib/angular.js:1994:38)
at module (file:///D:/Angular/First/lib/angular.js:2068:14)
at file:///D:/Angular/First/lib/angular.js:4564:22
at forEach (file:///D:/Angular/First/lib/angular.js:322:20)
at loadModules (file:///D:/Angular/First/lib/angular.js:4548:5)
at createInjector (file:///D:/Angular/First/lib/angular.js:4470:19)
at doBootstrap (file:///D:/Angular/First/lib/angular.js:1746:20)
at bootstrap (file:///D:/Angular/First/lib/angular.js:1767:12

我已经分享了下面的js和html文件,请参阅。我试图创建一个新的js和html但同样的错误是非常奇怪的。

"use strict";

angular.module('myapp', []);

angular.module('myapp').controller('MainController', ['$scope', function($scope) {

    $scope.message = 'Hello';

    $scope.sayHello = function(name){
        return $scope.message + ' ' + name;
    };

}]);

angular.module('myapp').controller('IntController', ['$scope', '$interval', function($scope, $interval){

    var items = ['bananas', 'apples', 'pears', 'mango', 'peeches'];

    $scope.itemIndex = null;
    $scope.currentItem = '';

    $scope.getItem = function(){
        $scope.currentItem = items[$scope.itemIndex];
    };

    $interval(function(){
        $scope.itemIndex = Math.round(Math.random() * (items.length - 1));
        $scope.getItem();
    }, 2000);

}]);

angular.module('myapp').controller('ExpressionController', ['$scope', '$interval', function($scope, $interval){

    $scope.randomValue = -999;

    $scope.names = ['Nikhil', 'Ankit', 'Yaghwinder'];

    $scope.qty = 2;
    $scope.cost = 12.7;

    $scope.pWidth = 100;

    $interval(function(){
        $scope.randomValue = Math.round(Math.random() * 100000);
    }, 2000);

}]);

angular.module('myapp').controller('ParentController', ['$scope', function($scope){

    $scope.object = {
        name: 'Nikhil Gupta'
    };

}]);

angular.module('myapp').controller('ChildController', ['$scope', function($scope){



}]);

angular.module('myapp').controller('SuperController', ['$scope', function($scope){

    $scope.object = {
        name: 'Nikhil Gupta'
    };

}]);

angular.module('myapp').controller('FirstController', ['$scope', function($scope){

}]);

angular.module('myapp').controller('SecondController', ['$scope', function($scope){

}]);

angular.module('myapp').service('SharedService', fuction($http){
return {name: 'Yaghwinder Bhatti'};
});

angular.module('myapp').controller('SFirstController', ['$scope', 'SharedService', function($scope, SharedService){
    $scope.object = SharedService;
}]);

angular.module('myapp').controller('SSecondController', ['$scope', 'SharedService', function($scope, SharedService){
    $scope.object = SharedService;      
}]);

而Html文件是

<html ng-app="myapp">
<head>
    <title>Angular Setup</title>
    <script type="text/javascript" src="../lib/angular.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>  
    <div ng-controller="MainController">
        <p>{{ sayHello('Nikhil') }}</p>
    </div>  
    <br></br>
    <div ng-controller="IntController">
        <!--ng-model is an data way data binding -->
        <p><input type="text" ng-model="itemIndex"> <input type="button" value="Get Item" ng-click="getItem()"></p>
        <p>Current Item : {{ currentItem }} </p>
    </div>  
    <br></br>
    <div ng-controller="ExpressionController">
        <p>Standard Bracket Expression</p>
        <p>{{ randomValue }}</p>
        <p>One Time Bracket Expression</p>
        <p>{{ ::randomValue }}</p>
        <p>Array Bracket Expression</p>
        <p>{{ names[1] }}</p>
        <p>operation Bracket Expression</p>
        <p>{{ qty * cost }}</p>
        <p>Greater than 50000?</p>
        <p>{{ randomValue > 50000 }}</p>
        <p>Enter Width: <input type="text" ng-model="pWidth"></p>
        <p style="background:#ff0000;width:{{pWidth}}px">
        This is a Test for the width.
        </p>
    </div>

    <br></br>

    <div ng-controller="ParentController">

        <input type="text" ng-model="object.name">
        <p>This is Parent : {{object.name}}</p>

        <div ng-controller="ChildController">

            <input type="text" ng-model="object.name">
            <p>This is Child : {{object.name}}</p>  

        </div>

    </div>

    <div ng-controller="ParentController">

        <input type="text" ng-model="object.name">
        <p>This is Second Parent : {{object.name}}</p>

    </div>

    <br></br>

    <div ng-controller="SuperController">

        <div ng-controller="FirstController">

            <input type="text" ng-model="object.name">
            <p>This is Child : {{object.name}}</p>  

        </div>

        <div ng-controller="SecondController">

            <input type="text" ng-model="object.name">
            <p>This is Child : {{object.name}}</p>  

        </div>

    </div>

    <br></br>

    <div ng-controller="SFirstController">

        <input type="text" ng-model="object.name">
        <p>This is Child : {{object.name}}</p>  

    </div>

    <div ng-controller="SSecondController">

        <input type="text" ng-model="object.name">
        <p>This is Child : {{object.name}}</p>  

    </div>

    <br></br>

</body>

</html>

我有角度js版本1.5.x,我试图在chrome控制台上搜索错误,发现下面的错误但是没有任何意义

app.js:80 Uncaught SyntaxError: missing ) after argument list
Uncaught Error: [$injector:modulerr] Failed to instantiate module myapp due to:
Error: [$injector:nomod] Module 'myapp' 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.5.5/$injector/nomod?p0=myapp
at file:///D:/Angular/First/lib/angular.js:68:12
at file:///D:/Angular/First/lib/angular.js:2070:17
at ensure (file:///D:/Angular/First/lib/angular.js:1994:38)
at module (file:///D:/Angular/First/lib/angular.js:2068:14)
at file:///D:/Angular/First/lib/angular.js:4564:22
at forEach (file:///D:/Angular/First/lib/angular.js:322:20)
at loadModules (file:///D:/Angular/First/lib/angular.js:4548:5)
at createInjector (file:///D:/Angular/First/lib/angular.js:4470:19)
at doBootstrap (file:///D:/Angular/First/lib/angular.js:1746:20)
at bootstrap (file:///D:/Angular/First/lib/angular.js:1767:12)
http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=myapp&p1=Error%3A%2…p%20(file%3A%2F%2F%2FD%3A%2FAngular%2FFirst%2Flib%2Fangular.js%3A1767%3A12)

1 个答案:

答案 0 :(得分:1)

你拼错了function这个词:

angular.module('myapp').service('SharedService', function($http){ //was fuction
    return {name: 'Yaghwinder Bhatti'};
});