在我运行应用程序时，将无法从JS文件中获取任何内容.如果有人帮助我，会更好

为什么运行应用程序时我无法获取JS文件。

index.html

<!DOCTYPE html>
<html ng-app="movieApp">
    <head>
        <title> Movies I like..</title>
        <base href="/">
    </head>
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
    <body>
        <div style="text-align: center;">
            <a ui-sref="movies">Movies</a>
        </div>
        <div ui-view></div>
    </body>
    <script src="js/app.js"></script>
    <script src="js/movies.js"></script>
</html>

app.js

var movieApp = angular.module('movieApp', ['ui.router']);
movieApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('movies');
    $stateProvider
    .state('movies', {
        'url' : '/movies',
        templateUrl : '/views/movies.html'
    });
    $locationProvider.html5Mode(true);
});

Movie.html

    <div>
        <input type="text" ng-model="movie" placeholder="Enter the Movie Name..">
        <button ng-click="createMovie()" 
        ng-show="isEditting">Create Movie</button>
        <button ng-click="updateTask(movie, 'save')" 
        ng-show="!isEditting">Save Movie</button>
        <br>
        <br>
        <div ng-show="movies.length > 0">
            <table border="1px solid" style="border-collapse: collapse;margin-bottom: 30px;">
                <tr><th>Movies</th><th>Edit</th><th>Delete</th></tr>
                <tr ng-repeat="movie in movies">
                    <td>{{movie.movieName}}</td>
                    <td><button ng-click="edit(movie)">Edit</button></td>
                    <td><button ng-click="delete(movie)">Delete</button></td>
                </tr>
            </table>
        </div>
    </div>
</div>

movie.js文件

var app= angular.module('movieApp');
app.controller('Moviecntrl',function($scope) {
    $scope.movies=[
     {movieName: 'DDLJ'},
     {movieName: 'Jack Reacher'},
     {movieName: 'Mission Impossible'}
];
});

对于某些参考，我已将文件夹的图像

附加了

任何人都可以帮我解决这个问题。

我在服务器端使用了节点JS

server.js

var express = require("express");
var path=require('path')
var app = express();
var PORT = process.env.PORT || 3000;
app.use(express.static(path.join(__dirname + '/../client')));
app.listen(PORT, function() {
	// body...
	console.log("We are connected to PORT-",PORT);
});

检查您定义其与文件所在的路径匹配的基本HREF路径，我将基本和HTML5模式删除为false，并且相对路径可行。我说示例

index.html

<!DOCTYPE html>
<html ng-app="movieApp">
    <head>
        <title> Movies I like..</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
    <script src="app.js"></script>
    <script src="movies.js"></script>
    </head>
    <body>
        <div style="text-align: center;">
            <a ui-sref="movies">Movies</a>
        </div>
        <div ui-view></div>
    </body>
</html>

app.js

    angular.module('movieApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('movies');
    $stateProvider
    .state('movies', {
        'url' : '/movies',
        templateUrl : 'movies.html'
    });
    $locationProvider.html5Mode(false);
});

MOVIES.JS

angular.module('movieApp').controller('Moviecntrl',function($scope) {
    $scope.movies=[
     {movieName: 'DDLJ'},
     {movieName: 'Jack Reacher'},
     {movieName: 'Mission Impossible'}
];
});

相关内容

最新更新

热门标签：