Angularjs 角度路由和控制器不工作_Angularjs_Controller_Routing

Angularjs 角度路由和控制器不工作

angularjs routing

Angularjs 角度路由和控制器不工作,angularjs,controller,routing,Angularjs,Controller,Routing,我是个新手，一辈子都搞不懂为什么路由不适合我。它工作了一段时间，然后由于某种原因迅速停止此外，我的控制器似乎也不工作，因为当我将表单HTML复制到index.HTML文件并尝试上载文件时，它似乎没有运行uploadFile（）函数这是我的密码： js/app.js angular.module('packager', ['ngRoute', 'MainCtrl', 'appRoutes', 'ngFileUpload']) angular.module('appRoutes', []).

我是个新手，一辈子都搞不懂为什么路由不适合我。它工作了一段时间，然后由于某种原因迅速停止

此外，我的控制器似乎也不工作，因为当我将表单HTML复制到index.HTML文件并尝试上载文件时，它似乎没有运行uploadFile（）函数

这是我的密码：

js/app.js

angular.module('packager', ['ngRoute', 'MainCtrl', 'appRoutes', 'ngFileUpload'])

 angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/', {
        templateUrl: './views/home.html',
        controller: 'MainController'
    })
    .when('/package', {
        templateUrl: './views/package.html',
        controller: 'MainController'
    });

}]);

 angular.module('MainCtrl', []).controller('MainController', [$scope, $location, Upload, function($scope, $location, Upload) {
    $scope.upload = {};
    $scope.uploads = [];

    $scope.uploadFile = function() {
        Upload.upload({
        url: '/upload'
        method: 'post'
        data: $scope.upload
    }).then(function (response) {
        console.log($scope.upload)

        $scope.id = $scope.upload.id
        $scope.uploads.push(response.data);
        $scope.upload = {};

        $location.path('/package')
    }
}]);

<form ng-submit="uploadFile()">
    <input type="file" name="file" id="file" ngf-select required ng-model="upload.file"> <br>
    <input type="submit" value="Upload">
</form>

js/appRoutes.js

angular.module('packager', ['ngRoute', 'MainCtrl', 'appRoutes', 'ngFileUpload'])

 angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/', {
        templateUrl: './views/home.html',
        controller: 'MainController'
    })
    .when('/package', {
        templateUrl: './views/package.html',
        controller: 'MainController'
    });

}]);

 angular.module('MainCtrl', []).controller('MainController', [$scope, $location, Upload, function($scope, $location, Upload) {
    $scope.upload = {};
    $scope.uploads = [];

    $scope.uploadFile = function() {
        Upload.upload({
        url: '/upload'
        method: 'post'
        data: $scope.upload
    }).then(function (response) {
        console.log($scope.upload)

        $scope.id = $scope.upload.id
        $scope.uploads.push(response.data);
        $scope.upload = {};

        $location.path('/package')
    }
}]);

<form ng-submit="uploadFile()">
    <input type="file" name="file" id="file" ngf-select required ng-model="upload.file"> <br>
    <input type="submit" value="Upload">
</form>

控制器/MainCtrl.js

angular.module('packager', ['ngRoute', 'MainCtrl', 'appRoutes', 'ngFileUpload'])

 angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/', {
        templateUrl: './views/home.html',
        controller: 'MainController'
    })
    .when('/package', {
        templateUrl: './views/package.html',
        controller: 'MainController'
    });

}]);

 angular.module('MainCtrl', []).controller('MainController', [$scope, $location, Upload, function($scope, $location, Upload) {
    $scope.upload = {};
    $scope.uploads = [];

    $scope.uploadFile = function() {
        Upload.upload({
        url: '/upload'
        method: 'post'
        data: $scope.upload
    }).then(function (response) {
        console.log($scope.upload)

        $scope.id = $scope.upload.id
        $scope.uploads.push(response.data);
        $scope.upload = {};

        $location.path('/package')
    }
}]);

<form ng-submit="uploadFile()">
    <input type="file" name="file" id="file" ngf-select required ng-model="upload.file"> <br>
    <input type="submit" value="Upload">
</form>

index.html

<html>
<head>
    <base href="/">
    <title>Packager</title>

    <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>
    <script src="libs/ng-file-upload/ng-file-upload.min.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers/MainCtrl.js"></script>
    <script src="js/appRoutes.js"></script>
</head>

<body ng-app="packager" ng-controller="MainController">
    <div class="container">
        <div ng-view> </div>
    </div>
</body>
</html>


包装工

views/home.html（两种表单之一）

修复了它。有两个语法错误：

忘记上载对象中的逗号

Upload.upload({
    url: '/upload',
    method: 'post',
    data: $scope.upload
})

忘了把注射剂串起来：

“$scope”、“$location”、“Upload”

控制器中的

Upload

是什么？它似乎没有定义。另外，

ngFileUpload

模块来自哪里？没有看到相应的

标记one@Phil我已经更新了帖子，按照注入上传，并添加了ngFileUpload的脚本。然而，控制器仍然无法正常工作。