Question

我是角色新手，我尝试创建一个应用程序来添加，更新和删除有关实验室测试的信息。但是当页面加载时会发生一个错误。如果有人知道原因，请帮助我。谢谢。

ManageLabTest.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Lab Test Management</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.css">

    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>

    <script src="../app.module.js"></script>
    <script src="../Controller/LabController.js"></script>
    <script src="../Controller/main.route.js"></script>


</head>
<body ng-controller="ManageLabTest">
<div id="page">
    <div class="header"><img src="../img/logoPCU%20(2).jpg" height="174" width="721"/>
        <h1 class="text-info">Lab Test Details Management</h1>

    </div>
</div>

<div class="container">
    <div class="navigation">
        <div class="page-header">
        </div>

        <div class="well well-lg">
            <div class="container-fluid">
                <h3><strong>Lab Test Details</strong></h3>
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Patient ID </label>
                                <input type='text' class="form-control" ng-model="Test.patientID"/>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Test Code</label>
                                <input type='text' class="form-control"ng-model="Test.testCode" />
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Test Name</label>
                                <input type='text' class="form-control" ng-model="Test.testName"/>
                            </div>
                        </div>

                        <div class="container">
                            <div class='col-md-3 '>
                                <div class="form-group">
                                    <label>Type</label>
                                    <select ng-model="Test.type"  class="form-control">
                                        <option>Select Type</option>
                                        <option>Critical</option>
                                        <option>Non-Critical</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Date</label>
                                    <div ng-model="Prescription.date">{{date | date:'yyyy-MM-dd'}}</div>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group pull-right" ng-submit="addNew()">
                                    <input type="submit" class="btn btn-primary addnew pull-right" value="Add New"/>
                                    <button class="btn btn-warning" id="clear" ng-click="clear()" onclick="enableAddButton()">
                                        Clear
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-header">
            <h3><strong>Add Lab Test</strong></h3>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover" id="data-table2">

                        <tr>
                            <th> Patient ID </th>
                            <th> Type </th>
                            <th> Test Code </th>
                            <th> Test Name </th>
                            <th> Date</th>
                            <th> Edit </th>
                            <th> Delete</th>
                        </tr>

                        <tr ng-repeat="Test in Tests">
                            <td> {{Test.patientID}} </td>
                            <td> {{Test.type}} </td>
                            <td> {{Test.testCode}} </td>
                            <td> {{Test.testName}} </td>
                            <td> {{Test.date}} </td>
                            <td>
                                <button class="btn btn-warning btn-sm" ng-click="editLab(Test._id)"
                                        onclick="enableUpdateButtons()">Edit <span
                                        class="glyphicon glyphicon-pencil"></span></button>
                            </td>
                            <td>
                                <button class="btn btn-danger btn-sm" ng-click="deleteLab(Test._id)">Delete <span
                                        class="glyphicon glyphicon-trash"></span>
                                </button>
                            </td>

                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-group pull-right">


                    <button class="btn btn-success btn-sm" ng-click="" onclick="">Save/Send</button>

                </div>
            </div>
        </div>

        <div class="page-header">
            <h3><strong>Lab Test Details</strong></h3>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover" id="data-table">

                        <tr>
                            <th> Patient ID </th>
                            <th> Type </th>
                            <th> Test Code </th>
                            <th> Test Name </th>
                            <th> Date</th>
                            <th> Edit </th>
                            <th> Delete</th>
                        </tr>

                        <tr ng-repeat="Test in Tests">
                            <td> {{Test.patientID}} </td>
                            <td> {{Test.type}} </td>
                            <td> {{Test.testCode}} </td>
                            <td> {{Test.testName}} </td>
                            <td> {{Test.date}} </td>
                            <td>
                                <button class="btn btn-warning btn-sm" ng-click="editLab(Test._id)"
                                        onclick="enableUpdateButtons()">Edit <span
                                        class="glyphicon glyphicon-pencil"></span></button>
                            </td>
                            <td>
                                <button class="btn btn-danger btn-sm" ng-click="deleteLab(Test._id)">Delete <span
                                        class="glyphicon glyphicon-trash"></span>
                                </button>
                            </td>

                        </tr>

                    </table>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-group pull-right">


                    <button class="btn btn-success btn-sm" ng-click="" onclick="">Save changers</button>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

LabController.js

'use strict';

angular.module('app').controller('ManageLabTest', ['$scope', function ($scope) {
    getLab();
    function getLab() {
        $http.get('/').then(response => {
            $scope.labs = labs;
            $scope.lab = null;
        });
    };

    $scope.clear=function(){
        $scope.lab=null;
    };

    $scope.addLab = () => {
        $http.post('/',$scope.lab).then(function(response){

            getLab();

        });
    };

    $scope.update = () =>{
        $http.put('/'+$scope.lab._id,$scope.lab).then(function(response){

            getLab();
            clear();
        });
    };

    $scope.edit = () =>{
        $http.get('/'+id).then(function(response){
            $scope.lab = response.data;

        });
    };

    $scope.remove = () =>{
        $http.delete('/'+id).then(function(response){

            getLab();

        });
    };

    $scope.Test = [];

    $scope.addNew = function (Test) {
        $scope.Test.push({

            'patientID':"",
            'testCode':"",
            'testName':"",
            'date':""
        });
    };
    $scope.date = new Date();

}]);

Lab.model.js

'use strict';

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const LabTestSchema = new Schema({
    patientID: {
        type: String,
        required: true
    },
    testCode: {
        type: String,
        required: true
    },
    testName: {
        type: String,
        required: true
    },
    date: {
        type: Date,
        required: true
    },
    type:{
        type: String,
        required: true
    }
});

var LabTest = mongoose.model('LabTest', LabTestSchema);

module.exports = LabTest;

app.module.js

angular.module('app',['ngRoute']);

server.js

const bodyParser = require('body-parser'),
    express = require('express'),
    mongoose = require('mongoose');

mongoose.Promise = global.Promise;

require('./Interface/DataModel/prescription.model.js');
require('./Interface/DataModel/Lab.model.js');

const PresRouter = require('./Interface/Routers/Prescription.route.js');
const LabRouter = require('./Interface/Routers/Lab.route.js')

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended':'true'}));
mongoose.connect('mongodb://localhost:27017/PCU', err => {
        if (err) {
            console.log(err);
            process.exit(1);
        }
    }
);

app.use(express.static(__dirname+'/Interface'));

app.get('/', (req, res) => {

    res.sendFile(__dirname + '/Interface/Pres&Labs/ManageLabTest.html');
});

app.use('/',PresRouter);
app.use('/',LabRouter);

app.listen(3000, err => {
    if (err) {
        console.error(err);
        return;
    }
    console.log('app listening on port 3000');
});

Lab.route.js

'use strict';

const express = require('express');
const mongoose = require('mongoose');

mongoose.set('debug', false);

const router = express.Router();
const LabModel = require('../DataModel/Lab.model.js');

router.get('/',function (req,res) {
    LabModel.find().then(labs => {
        res.json(labs);
    }).catch(err => {
        console.error(err);
        res.sendStatus(500);
    });
});

router.post('/',function (req,res) {
    const lab = new LabModel(req.body);
    labs.save().then(labs => {
        res.json(labs);
    }).catch(err => {
        console.error(err);
        res.sendStatus(500);
    });
});

router.get('/:id',function (req,res) {
    LabModel.findById(req.params.id).then(data=>{
        res.json(data || {});
    }).catch(err=>{
        console.error(err);
        res.sendStatus(500);
    });
});

router.put('/:id',function (req,res) {
    const data = req.body;
    delete data._id;
    const Id = req.params.id;
    LabModel.findByIdAndUpdate(Id,{$set:data}).then(db=>{
        res.json(data);
    }).catch(err => {
        console.error(err);
        res.sendStatus(500);
    });
});

router.delete('/:id',function (req,res) {
    LabModel.findByIdAndRemove(req.params.id).then(data=>{
        res.sendStatus(200,'success');
    });
});

module.exports = router;

main.route.js

angular.module('app').config(['$routeProvider'],function ($routeProvider) {
    $routeProvider

        .when('/ManagePrescription',{
            templateUrl : 'ManagePrescription.html',
            controller : 'ManagePrescription'
        })
        .when('/ManageLabTest',{
            templateUrl : 'ManageLabTest.html',
            controller : 'ManageLabTest'
        })
        .when('SearchPrescription',{
            templateUrl : 'SearchPrescription.html',
            controller : 'ManagePrescription'
        })
        .when('SearchLabTest',{
            templateUrl : 'SearchLabTest.html',
            controller : 'ManageLabTest'
        });
});

Answer 1

main.route.js 中存在语法错误你是用Array定义你的函数..

angular.module('app').config(['$routeProvider'],function ($routeProvider) { 
    //YOUR LOGIC
});

代码应如下所示

angular.module('app').config(['$routeProvider',function ($routeProvider) { 
    //YOUR LOGIC
}]);

Angular JS页面加载错误

1 个答案: