我在代码中有错误,我不知道如何解决

时间:2017-02-26 15:19:32

标签: javascript jquery html angularjs

我的网站只能使用fairfox,而不能使用chrom 但是当我在网络上使用netbeams运行html时,网络工作得很好

我不知道该怎么办,我需要在接下来的10个小时内提交 你可以在这里下载整个项目:

the project

the errores image:

index html:

<html ng-app="MyApp">
<head>
    <title>Web Site Student</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="_scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script src="_scripts/angular.min.js"></script>
    <script src="_scripts/angular-route.min.js"></script>
    <script src="_scripts/myapp.js"></script>
    <script src="_scripts/ctrols.js" type="text/javascript"></script>
    <script src="_scripts/json.js" type="text/javascript"></script>
    <link href="_css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">WebSiteStudent</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#/list">Data</a></li>
                    <li><a href="#/analysis">Analysis</a></li>
                    <li><a href="#/monitor">Monitor</a></li>
                </ul>
            </div>
        </nav>
    <div  ng-view>

    </div>
</body>

ctrols code:

    (function () {
    'use strict';

    angular
        .module('MyApp')
        .controller('ListCtrl', ListCtrl); // ControllerName & functionName can be the same name, but not required.

    ListCtrl.$inject = ['$scope'];
    function ListCtrl($scope) {
    $scope.personalDetails = json

        $scope.addNew = function(){
            $scope.personalDetails.push({ 
                'id':"", 
                'name':"",
                'lastName':"",
                'email':"",
                'grade':"",
                'subject':"",
            })
        } 
        $scope.addNew = function(){
            $scope.personalDetails.push({ 
                'id':"", 
                'name':"",
                'lastName':"",
                'email':"",
                'grade':"",
                'subject':"",
            })
        }    
        $scope.remove = function(){
            var newDataList=[]
            angular.forEach($scope.personalDetails, function(selected){
                if(!selected.selected){
                    newDataList.push(selected)
                }
            })
            $scope.personalDetails = newDataList
            json= $scope.personalDetails
        }
    }
})();

(function () {
    'use strict';

    angular
        .module('MyApp')
        .controller('AnalysisCtrl', AnalysisCtrl); // ControllerName & functionName can be the same name, but not required.

    AnalysisCtrl.$inject = ['$scope'];
    function AnalysisCtrl($scope) {
            $scope.personalDetails = json

$(document).ready(function() {
  $.getScript('http://www.chartjs.org/assets/Chart.js',function(){

      var data = {
          labels : ["January","February","March","April","May","June","July"],
          datasets : [
              {
                  fillColor : "rgba(220,220,220,0.5)",
                  strokeColor : "rgba(220,220,220,1)",
                  pointColor : "rgba(220,220,220,1)",
                  pointStrokeColor : "#fff",
                  data : [65,59,90,81,56,55,40]
              },
              {
                  fillColor : "rgba(151,187,205,0.5)",
                  strokeColor : "rgba(151,187,205,1)",
                  pointColor : "rgba(151,187,205,1)",
                  pointStrokeColor : "#fff",
                  data : [28,48,40,19,96,27,100]
              }
          ]
      }

      var options = {
          animation: true
      };
      var c = $('#myChart')
      var ct = c.get(0).getContext('2d')
      var ctx = document.getElementById("myChart").getContext("2d")
      new Chart(ctx).Bar(data,options)

  })
})
    }
})();

(function () {
    'use strict';

    angular
        .module('MyApp')
        .controller('MonitorCtrl', MonitorCtrl); // ControllerName & functionName can be the same name, but not required.

    MonitorCtrl.$inject = ['$scope'];
    function MonitorCtrl($scope) {
        $scope.student = json;
    }
})();          

myapp代码:

 (function () {
    'use strict';

    angular.module('MyApp', [
        "ngRoute"
    ]);
}());

(function () {
    angular.module('MyApp')
        .config(
            function ($routeProvider, $locationProvider) {
                $locationProvider.hashPrefix('');
                $routeProvider
                    .when("/list", {
                        templateUrl: "addon/list.html",
                        controller: "ListCtrl"
                    })
                    .when("/analysis", {
                        templateUrl: "addon/analysis.html",
                        controller: "AnalysisCtrl"
                    })
                    .when("/monitor", {
                        templateUrl: "addon/monitor.html",
                        controller: "MonitorCtrl"
                    })
                    .otherwise({
                        redirectTo: "/list"
                    })
            });
}());

1 个答案:

答案 0 :(得分:0)

简单地说,你的代码是一个基本的混乱。某些地方有额外的字符,而其他地方则缺少字符。你没有一个好的文件结构,你引用了不存在的文件(_css / stayle.css),并且你有不正确的缩进。

下次,请将您的代码上传到github,而不是随机等待下载的网站和外语。

为了更好地理解Angular及其文件结构,请阅读John Papa撰写的Angular 1 Style指南: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

和/或Todd Motto:https://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/

话虽如此,我认为你的主要问题在于ctrols.js和myapp.js文件。

我删除了&#39; SuperCtrl&#39;为简单起见。您可以在更好地理解Angular时添加它。你的myapp.js文件应该类似于:

(function () {
    'use strict';

    angular.module('MyApp', [
        "ngRoute"
    ]);
}());

(function () {
    angular.module('MyApp')
        .config(
            function ($routeProvider, $locationProvider) {
                $locationProvider.hashPrefix('');
                $routeProvider
                    .when("/list", {
                        templateUrl: "addon/list.html",
                        controller: "ListCtrl"
                    })
                    .when("/analysis", {
                        templateUrl: "addon/analysis.html",
                        controller: "AnalysisCtrl"
                    })
                    .when("/monitor", {
                        templateUrl: "addon/monitor.html",
                        controller: "RemoveCtrl"
                    })
                    .otherwise({
                        redirectTo: "/list"
                    })
            });
}());

ctrols.js文件中的每个控制器都应采用相似的格式:

(function () {
    'use strict';

    angular
        .module('MyApp')
        .controller('ControllerName', functionName); // ControllerName & functionName can be the same name, but not required.

    functionName.$inject = ['$scope'];
    function functionName($scope) {
        // Controller code here
    }
})();

这应该足以让你朝着正确的方向前进。

更新代码后,我能够看到数据和用户界面的UI。分析标签: enter image description here enter image description here