ngRoute在AngularJS中不起作用

时间:2017-04-12 21:54:57

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

我正在尝试在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>
&#13;
&#13;
&#13;

enter image description here

1 个答案:

答案 0 :(得分:0)

在你的html中,应该是这个条目:

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

...更改为此,以便它将位置与其他角度文件匹配?

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