角度路由和控制器不起作用答案

【问题标题】：Angular routing and controller not working角度路由和控制器不起作用
【发布时间】：2017-11-10 20:48:18
【问题描述】：

Angular 新手，我一辈子都无法弄清楚为什么路由对我不起作用。它工作了一段时间，然后由于某种原因立即停止。

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

这是我的代码：

js/app.js

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

js/appRoutes.js

 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'
    });

}]);

控制器/MainCtrl.js

 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')
    }
}]);

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（两种形式之一）

<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>

【问题讨论】：

您的控制器中的Upload 是什么？它似乎没有被定义。另外，ngFileUpload 模块来自哪里？看不到那个人的<script> 标签
@Phil 我已经更新了帖子，按照github.com/danialfarid/ng-file-upload 注入 Upload，并添加了 ngFileUpload 的脚本。然而，控制器工作仍然没有运气。

标签： angularjs controller routing

【解决方案1】：

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

忘记上传对象中的逗号

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

忘记将注入放在字符串中：

"$scope", "$location", "Upload"

【讨论】：