Question

我正在尝试用$ http来构建ngRoute，当我访问网站时，我在控制台中出现错误：localhost：8080

未捕获的ReferenceError：未定义angularModule（匿名功能）@ item_controller.js：2 angular.js：38未捕获错误： [$喷油器：modulerr] http://errors.angularjs.org/1.5.5/ $注射器/ modulerr P0 = MyApp来＆安培; P1 =错误％3A％2 ... 2Flocalhost％3A8080％2Fbower_components％2Fangular％2Fangular.min.js％3A21 3A19％）

当我打开http://localhost:8080/home时，我会看到＆＃34; Whitable错误页面＆＃34;。我在Spring框架（Spring-boot）中编写我的API

我应该如何配置这两件事才能正常工作？我找不到任何好的例子，我该如何写好这个。

我的配置如下所示：

app.js

'use strict';

var App = angular.module('myApp', ['ngRoute', 'moduleItemController']);

App.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider
            .when( '/home', {
                templateUrl: '../item.html',
                controller: 'ItemController'
            }).
            when('/item/:itemCode',{
                templateUrl: '../../templates/item-detail.html',
                controller: 'ItemController'
            }).otherwise({
                redirectTo: '/home'
        });
    }]);

item_controller.js

'use strict';
var moduleItemController = angularModule.module('moduleItemController',[])

moduleItemController.controller('ItemController', ['$scope', 'ItemService', function ($scope, ItemService) {
    var self = this;
    self.item = {id: null, itemCode: '', itemName: '', price: ''};
    self.items = [];

    self.fetchAllItems = function () {
        ItemService.fetchAllItems()
            .then(
                function (d) {
                    self.items = d;
                },
                function (errResponse) {
                    console.error('Error while fetching Currencies');
                }
            );
    };

    self.createItem = function (item) {
        ItemService.createItem(item)
            .then(
                self.fetchAllItems,
                function (errResponse) {
                    console.error('Error while creating item.');
                }
            );
    };

    self.updateItem = function (item, id) {
        ItemService.updateItem(item, id)
            .then(
                self.fetchAllItems,
                function (errResponse) {
                    console.error('Error while updating item.');
                }
            );
    };

    self.deleteItem = function (id) {
        ItemService.deleteItem(id)
            .then(
                self.fetchAllItems,
                function (errResponse) {
                    console.error('Error while deleting item.');
                }
            );
    };


    self.updatePrice = function (newPrice, item, id) {
        ItemService.updatePrice(newPrice, item, id)
            .then(
                self.fetchAllItems,
                function (errResponse) {
                    console.error('Error while updating item.');
                }
            );
    };


    self.fetchAllItems();

    self.submit = function () {
        if (self.item.id === null) {
            console.log('Saving New item', self.item);
            self.createItem(self.item);
        }
        else {
            console.log('Sth went wrong!');
        }
        self.reset();
    };


    self.remove = function (id) {
        console.log('id to be deleted', id);
        if (self.item.id === id) {
            self.reset();
        }
        self.deleteItem(id);
    };


    self.reset = function () {
        self.item = {id: null, itemCode: '', itemName: '', price: ''};
        $scope.myForm.$setPristine();
    };

}]);

moduleItemController.controller('ItemController', ['$scope','$routeParams', function ($scope,$routeParams) {
    $scope.itemCode = $routeParams.itemCode;
}]);

item_service.js

App.factory('ItemService', ['$http', '$q', function ($http, $q) {

    return {

        fetchAllItems: function () {
            return $http.get('http://localhost:8080/api/item/all')
                .then(
                    function (response) {
                        return response.data;
                        console.success('Success');
                    },
                    function (errResponse) {
                        console.error('Error while fetching users');
                        return $q.reject(errResponse);
                    }
                );
        },
.
.
.
// other crud operations

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HOME</title>

    <link rel="stylesheet" type="text/css" href="bower_components/semantic/dist/semantic.min.css">
    <script src="bower_components/semantic/dist/semantic.js"></script>

    <!--Angular dependencies-->
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controller/item_controller.js"></script>
    <script src="js/service/item_service.js"></script>

</head>
<body ng-app="myApp">
 <div ng-view></div>
</body>
</html>

item.html - 这是我要使用ngRoute的文件的一部分

<table class="ui fixed table">
        <thead>
        <tr>
            <th>Id</th>
            <th>Code</th>
            <th>Name</th>
            <th>Price</th>
            <th>Quantity</th>
            <th width="20%"></th>
            <th width="20%"></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="i in ictrl.items | filter:query">
            <td><span ng-bind="i.id"></span></td>
            <td class="selectable">
                <a href="#/item/{{i.itemCode}}"><span ng-bind="i.itemCode"></span></a>
            </td>
            <td><span ng-bind="i.itemName"></span></td>
            <td><span ng-bind="i.price"></span></td>
            <td><span ng-bind="i.quantity"></span></td>
            <td>
                <button class="negative ui button" ng-click="ictrl.remove(i.id)">delete</button>
            </td>
            <td>
                <button class="ui secondary button">zp</button>
            </td>
        </tr>
        </tbody>
    </table>

项-detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Details</title>

    <!--SEMANTIC-->
    <link rel="stylesheet" type="text/css" href="bower_components/semantic/dist/semantic.min.css">
    <script src="bower_components/semantic/dist/semantic.js"></script>

    <!--ANGULAR-->
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-route/angular-route.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controller/item_controller.js"></script>
    <script src="js/service/item_service.js"></script>

</head>
<body ng-app="myApp">

<div class="item table container">
    <h1>TBD DETAILED VIEW FOR {{itemCode}}</h1>
</div>

</body>
</html>

Answer 1

item_controller.js的第2行引用了未定义的angularModule.module。我想你想要angular.module。

Answer 2

问题是您尝试在angular中使用item_controller.js而不是angular。 angular.js中的全局对象是angularModule而不是var moduleItemController = angularModule.module('moduleItemController',[]);

将以下行更改为：

var moduleItemController = angular.module('moduleItemController',[]);

到

int main(){

    char str[100];
    int i=0;

    printf("Enter any string: ");
    scanf_s("%s",str);

    printf("ASCII values of each characters of given string: ");
    while(str[i])
         printf("%d ",str[i++]);


    return 0;
}

使用$ http配置ngRoute

2 个答案: