Question

你能帮帮我吗？我尝试使用AngularJS渲染页面。页面已经渲染，但在浏览器的控制台中，它给了我错误。

app.js （主要角度文件）

var DevApp = angular.module("DevApp", [ 'ngRoute' ])

.config(['$routeProvider',function($routeProvider) {
    $routeProvider.when('/', { templateUrl: 'tpl/index.html', controller: "MainCtrl" })
    .otherwise({
            url: '/',
            controller: "MainCtrl",
            templateUrl: "tpl/index.html"
        });
}])

.controller('MainCtrl', [
    '$scope',
    '$http',
    '$routeParams',
    '$element',
    '$timeout',
    function($scope, $http, $routeParams, $element, $timeout) {
        console.log(1);
    }
]);

tpl / index.html （MainCtrl的temppate）

<div ng-controller="MainCtrl">
    Главная страница
</div>

index.html （主文件）

<!DOCTYPE html>
<html ng-app="DevApp">
  <head>
    <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="/javascripts/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/javascripts/angular/angular.min.js"></script>
    <script type="text/javascript" src="/javascripts/angular/angular-route.js"></script>
    <script type="text/javascript" src="/javascripts/angular/app.js"></script>
    <script type="text/javascript" src="/bootstrap/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div ng-view></div>
  </body>
</html>

我收到错误：

angular.js:12416
Error: [$injector:unpr] http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24elementProvider%20%3C-%20%24element%20%3C-%20MainCtrl
    at Error (native)
    at http://127.0.0.1:3000/javascripts/angular/angular.min.js:6:416
    at http://127.0.0.1:3000/javascripts/angular/angular.min.js:40:307
    at Object.d [as get] (http://127.0.0.1:3000/javascripts/angular/angular.min.js:38:308)
    at http://127.0.0.1:3000/javascripts/angular/angular.min.js:40:381
    at d (http://127.0.0.1:3000/javascripts/angular/angular.min.js:38:308)
    at e (http://127.0.0.1:3000/javascripts/angular/angular.min.js:39:64)
    at Object.instantiate (http://127.0.0.1:3000/javascripts/angular/angular.min.js:39:213)
    at http://127.0.0.1:3000/javascripts/angular/angular.min.js:80:257
    at link (http://127.0.0.1:3000/javascripts/angular/angular-route.js:977:26) <div ng-view="" class="ng-scope">

Answer 1

Unknown provider: $elementProvider <- $element <- MainCtrl，表示无法在$element中注入MainCtrl。

Answer 2

试试这个

var DevApp = angular.module("DevApp", [ 'ngRoute' ])

DevApp.config(['$routeProvider',function($routeProvider) {
    $routeProvider.when('/', { templateUrl: 'tpl/index.html', controller: "MainCtrl" })
    .otherwise({
            url: '/',
            controller: "MainCtrl",
            templateUrl: "tpl/index.html"
        });
}])

DevApp.controller('MainCtrl', [
    '$scope',
    '$http',
    '$routeParams',
    '$element',
    '$timeout',
    function($scope, $http, $routeParams, $element, $timeout) {
        console.log(1);
    }
]);

Answer 3

我没有测试你的代码但是路由器声明中可能有拼写错误（没有＆＃39; url＆＃39; param）

.config(['$routeProvider',function($routeProvider) {
    $routeProvider.
    when('/', { templateUrl: 'tpl/index.html', controller: "MainCtrl" })
    otherwise({
            redirectTo: '/'
        });
}])

角度路由中的错误

3 个答案: