如何正确配置 AngularJS 应用程序以在 plunker 中显示结果

Question

我的新 Angular 应用程序遇到了一个奇怪的问题：

我的所有组件似乎都在适当的位置（在 plunker 中），但结果中绝对没有显示任何内容 window。在这里徘徊我所缺少的。这是 app.js 代码：

'use strict';
var app = angular.module('myApp', [
  'ngRoute',
  'ui.bootstrap',
  'angularFileUpload'
]).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/Quote', {templateUrl: "tabcontrol/tabcontrol.html", controller: 'TabController'})
          .otherwise({redirectTo: '/Quote'});
    }])
    .controller("TabController", ['$scope','$http', function ($scope, $http) {
      console.log("This is TabController");
      var setAllInactive = function() {
        angular.forEach($scope.workspaces, function(workspace) {
          workspace.active = false;
        });
      };

      var Site = {
        numberOfMainframes: undefined,
        numberOfStorageFrames:  undefined,
        numberOfUnixServers:  undefined,
        numberOfBladeCenters: undefined,
        numberOfX86Servers: undefined
      };

      var addNewWorkspace = function() {
        var id = $scope.workspaces.length + 1;
        $scope.workspaces.push({
          id: id,
          name: "Site " + id,
          active: true
        });
      };

      $scope.workspaces =
          [
            { id: 1, name: "Site 1" ,active:true  },
            { id: 2, name: "Site 2" ,active:false  }
          ];

      $scope.addWorkspace = function () {
        setAllInactive();
        addNewWorkspace();
      };

      $scope.removeWorkspace = function() {
        angular.forEach($scope.workspaces, function(workspace) {
          if(workspace.active){
            var index = $scope.workspaces.indexOf(workspace);
            console.log('Active Workspace id: ' + index);
            $scope.workspaces.splice(index,1);
          }
        })
      };

      $scope.collectValuesFromEachTab = function(){

        $scope.quote = new Object();
        $scope.quote.SalesForceId = $scope.salesForceId;
        $scope.quote.AccountName = $scope.accountName;
        $scope.quote.siteCollection = [];

        angular.forEach($scope.workspaces, function(workspace) {
          //console.log("Site: " + workspace.name);
          //console.log("Number of Mainframes: " + workspace.numberOfMainframes);
          //console.log("Number of Starage Frames" + workspace.numberOfStorageFrames);
          //console.log("Number of Unix/AIX Servers: " + workspace.numberOfUnixServers);
          //console.log("Number of Blade Centers: " + workspace.numberOfBladeCenters);
          //console.log("Number of x86 Servers: " + workspace.numberOfx86Servers);

          var site = new Object();
          site.SiteName = workspace.name;
          site.NumberOfMainframes = workspace.numberOfMainframes;
          site.NumberOfStorageFrames = workspace.numberOfStorageFrames;
          site.NumberOfUnixServers = workspace.numberOfUnixServers;
          site.NumberOfBladeCenters = workspace.numberOfBladeCenters;
          site.NumberOfX86Servers = workspace.numberOfx86Servers;

          $scope.quote.siteCollection.push(site);
        });
        var res = $http.post('http://10.211.55.26:8081/api/dcquote/testquote', $scope.quote);
        res.success(function(data, status, headers, config) {
          $scope.message = data;
        });
        res.error(function(data, status, headers, config) {
          alert( "failure message: " + JSON.stringify({data: data}));
        });
      }

    }])
    .controller("TabsChildController", ['$scope',function($scope){

    }])
    .controller('FileUploadController', ['$scope', 'FileUploader', function($scope, FileUploader) {
      var uploader = $scope.uploader = new FileUploader({
        url: 'http://10.211.55.26:8081/api/test/files'
      });

      // FILTERS

      uploader.filters.push({
        name: 'customFilter',
        fn: function(item /*{File|FileLikeObject}*/, options) {
          return this.queue.length < 10;
        }
      });

      // CALLBACKS

      uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
        console.info('onWhenAddingFileFailed', item, filter, options);
      };
      uploader.onAfterAddingFile = function(fileItem) {
        console.info('onAfterAddingFile', fileItem);
      };
      uploader.onAfterAddingAll = function(addedFileItems) {
        console.info('onAfterAddingAll', addedFileItems);
      };
      uploader.onBeforeUploadItem = function(item) {
        console.info('onBeforeUploadItem', item);
      };
      uploader.onProgressItem = function(fileItem, progress) {
        console.info('onProgressItem', fileItem, progress);
      };
      uploader.onProgressAll = function(progress) {
        console.info('onProgressAll', progress);
      };
      uploader.onSuccessItem = function(fileItem, response, status, headers) {
        console.info('onSuccessItem', fileItem, response, status, headers);
      };
      uploader.onErrorItem = function(fileItem, response, status, headers) {
        console.info('onErrorItem', fileItem, response, status, headers);
      };
      uploader.onCancelItem = function(fileItem, response, status, headers) {
        console.info('onCancelItem', fileItem, response, status, headers);
      };
      uploader.onCompleteItem = function(fileItem, response, status, headers) {
        console.info('onCompleteItem', fileItem, response, status, headers);
      };
      uploader.onCompleteAll = function() {
        console.info('onCompleteAll');
      };

      console.info('uploader', uploader);
    }])
    .run(function(){
      console.log("starting myApp");
    });

这是我的观点：

http://plnkr.co/edit/6nltAAmXLrguGqbxFz91?p=preview

Answer 1

<script type="javascript" src="script.js"></script>

无效，因此未加载您的脚本。将其更改为以下之一：

<script type="text/javascript" src="script.js"></script>
<script src="script.js"></script>

type 属性是 no longer required，但如果您仍然想使用它，您应该使用 text/javascript 而不是 javascript。

如何正确配置 AngularJS 应用程序以在 plunker 中显示结果

how to properly configure AngularJS app to have the results show up in plunker

angularjs

plunker