Uncaught Error: [$injector:modulerr]——方式一

最新推荐文章于 2021-06-07 18:09:22 发布

半哭语笑

最新推荐文章于 2021-06-07 18:09:22 发布

阅读量958

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_38295471/article/details/115951803

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用环境

前端：bootstrap3 + angular
后端：springmvc + spring + mybatis
数据库：mysql
项目类型：maven
其他技术框架：docker + dubbo（zookeeper)

前端界面如下（使用 bootstrap3 + angular）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!--引入bootstrap3 的依赖-->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

    <!--0、引入 angular 框架依赖-->
    <script src="../plugins/angularjs/angular.min.js"></script>
    <script src="../plugins/angularjs/angular-route.min.js"></script>
    <!--1、引入分页插件-->
    <!--注意：要先引入 angular 的依赖，在引入下面的依赖，是有顺序要求的-->
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
    <link rel="stylesheet" href="../plugins/angularjs/pagination.js">
    <script>
        //创建 angular 全局对象
        var app = angular.module("zyg", ["pagination"]);
        //创建控制器
        app.controller("brandController", function ($scope, $http) {
            // 1、分页查询所有品牌
            // 1.1）定义对应分页变量，并分页配置
            $scope.paginationConf = {
                currentPage: 1,      //当前页
                totalItems: 10,      //总记录数
                itemsPerPage: 10,    //每页记录数
                perPageOptions: [10, 20, 30, 40, 50], //页码选项
                onChange: function () {  //当页码发生变化的时候自动触发
                    //调用重新加载
                    $scope.reloadList();
                }
            }
            //1.2）重新加载
            $scope.reloadList=function(){
                $scope.findPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
            }
            //2、定义连个参数 page rows
            $scope.findPage = function (page,rows) {
                //使用 get 请求
                $http.get("../brand/findPage.do?page="+page+"&rows="+rows).success(function(response){
                    //定义变量
                    $scope.list=response.rows;                            //获取结果集里面嵌套的小集合
                    $scope.paginationConf.totalItems=response.total;     //将总记录数传给前端对象
                })
            }
        });
    </script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="zyg" ng-controller="brandController" ng-init="findAll()">
<!-- .box-body -->
<div class="box-header with-border">
    <h3 class="box-title">品牌管理</h3>
</div>
<div class="box-body">
    <!-- 数据表格 -->
    <div class="table-box">
        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">

            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">品牌ID</th>
                <th class="sorting">品牌名称</th>
                <th class="sorting">品牌首字母</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody>
            <!--循环遍历品牌列表-->
            <!--用于测试数据-->
            {{list}}
            <tr ng-repeat="brand in list">
                <td><input type="checkbox"></td>
                <td>{{brand.id}}</td>
                <td>{{brand.name}}</td>
                <td>{{brand.firstChar}}</td>
                <td class="text-center">
                    <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改
                    </button>
                </td>
            </tr>

            </tbody>
        </table>
        <!--数据列表/-->
        <!--使用分页-->
        <!--
            pageinationConf 为自定参数对象
            包括：每页记录数 、每页条数等
            在控制层定义该对象
         -->
        <tm-pagination conf="paginationConf"></tm-pagination>
    </div>
    <!-- 数据表格 /-->
</div>
</body>
</html>

有以下两种情况：
1、引用资源错误
2、使用资源错误

我的个人的解决方式是：
1、引用资源错误
将文中的

<link rel="stylesheet" href="../plugins/angularjs/pagination.js">

改成：

<script src="../plugins/angularjs/pagination.js"></script>

小结：完全是粗心，css 使用 link 引入，js 使用 script 引入

2、使用资源错误
将文中的

<body class="hold-transition skin-red sidebar-mini" ng-app="app">

改成：

<body class="hold-transition skin-red sidebar-mini" ng-app="zyg">

小结：app 只是变量名称，zyg 是模块名称

总结：也就是使用错误的方式引入或使用资源

仅限我个人所遇问题解决方案，仅参考，如有不足之处请多指教！

半哭语笑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Uncaught Error: [$injector:modulerr]——方式一

使用环境前端：bootstrap3 + angular后端：springmvc + spring + mybatis数据库：mysql项目类型：maven其他技术框架：docker + dubbo（zookeeper)前端界面如下（使用 bootstrap3 + angular）：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-
复制链接

扫一扫