ngRoute 在 AngularJS 中不起作用答案

【问题标题】：ngRoute is not working in AngularJSngRoute 在 AngularJS 中不起作用
【发布时间】：2017-09-08 20:50:26
【问题描述】：

我正在尝试在我的 newEvent 页面中使用 Route。但它给了我 404 错误。我检查了我的代码，但我无法识别错误。谁能检查我的代码，让我知道我在这里做错了什么。我上传了 app.js 、 EditEventController.js 、 index.html 和 NewEvent.html 文件。我还上传了截图。请看一下，让我解决这个错误。

谢谢

'use strict';

var eventsApp = angular.module('eventsApp', ['ngResource', 'ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider.when('/newEvent', {
            templateUrl: 'templates/NewEvent.html',
            controller: 'EditEventController'
        });
    });
    .factory('myCache', function ($cacheFactory) {
        return $cacheFactory('myCache', {
            capacity: 3
        });
    });
........................

'use strict';

eventsApp.controller('EditEventController',
    function EditEventController($scope, eventData) {

        $scope.saveEvent = function (event, newEventForm) {
            if (newEventForm.$valid) {
                eventData.save(event)
                    .$promise
                    .then(
                        function (response) {
                            console.log('success', response)
                        })
                    .catch(
                        function (response) {
                            console.log('failure', response)
                        }
                    );
            }
        };
        $scope.cancelEdit = function () {
            window.location = "/EventDetails.html";
        };
    }
);
........................

<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">

<head>
    <meta charset="utf-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/app.css">
    <script src="lib/jquery.min.js"></script>
    <script src="lib/underscore-1.4.4.min.js"></script>
    <script src="lib/bootstrap.min.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-sanitize.js"></script>
    <script src="lib/angular/angular-resource.min.js"></script>
    <script src="angular/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/EventController.js"></script>
    <script src="js/controllers/EditEventController.js"></script>
    <script src="js/services/EventData.js"></script>


    <script src="js/filters.js"></script>

</head>

<body>
    <div class="container">
        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav">
                    <li> <a href="#/newEvent"> Create Event </a> </li>


                </ul>

            </div>
        </div>

        <ng-view> </ng-view>
    </div>

</body>

</html>

...................................

<div style="padding-left:20px; padding-right:20px">
    <div class="container">
        <h1> New Event</h1>

        <hr />
        <form name="newEventForm">
            <fieldset>
                <label for="eventName">Event Name: </label>
                <input id="eventName" type="text" required ng-model='event.name' placeholder="Name of your event...." />
                <label for="eventDate">Event Date: </label>
                <input id="eventDate" type="text" required ng-pattern="/\d\d/\d\d/\d\d\d\d/" ng-model='event.date' placeholder="format (mm/dd/yyyy)...." />
                <label for="eventTime">Event Time: </label>
                <input id="eventTime" type="text" ng-model='event.time' placeholder="Start and end time...." />
                <label for="eventLocation">Event Location: </label>
                <input id="eventLocation" type="text" ng-model='event.location.address' placeholder="Address of event...." />

                <br>
                <input id="eventCity" type="text" ng-model='event.location.city' class="input-small" placeholder="City ...." />
                <input id="eventProvince" type="text" ng-model='event.location.province' class="input-small" placeholder="Province ...." />

                <label for="eventImageUrl">Image</label>
                <input id="eventImageUrl" type="url" ng-model='event.imageUrl' class="input-xlarge" placeholder="Url of image ...." />

            </fieldset>

            <img ng-src="{{event.imageUrl}}" src="" />

            <br>
            <br>

            <button type="submit" ng-disabled="newEventForm.$invalid" ng-click="saveEvent(event, newEventForm)" class="btn btn-primary">Save</button>
            <button type="submit" ng-click="cancelEdit()" class="btn btn-primary">Cancel</button>

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

【问题讨论】：

标签： javascript angularjs routes angular-ui-router ngroute

【解决方案1】：

在你的 html 中，应该有这个条目：

<script src="angular/angular-route.js"></script>

... 改成这个，这样它的位置就可以和其他 angular 文件匹配了？

<script src="lib/angular/angular-route.js"></script>

【讨论】：