3

我正在尝试使用 Django 进行角度工作。我非常困难地使它与 Django 和 Angular 一起工作，但现在我又遇到了一个错误。每次我加载它，我都会收到以下错误。

Error: [ng:areq] Argument 'GreetingController' is not a function, got undefined

我在堆栈溢出上尝试了许多其他解决方案链接，但没有一个解决我的问题。

以下是我保存为 app.js 的角度片段。

var app = angular.module('ABC',['ngRoute', 'ui.bootstrap']).
controller('GreetingController', ['$scope', function($scope) {
    $scope.greeting = 'Hola!';
}]);


app.config(function($interpolateProvider, $routeProvider){
    //$interpolateProvider.startSymbol('[[');
    //$interpolateProvider.endSymbol(']]');

    $routeProvider.when('/about', {
            templateUrl: 'views/about.html'
    }).when('/login',{
            templateUrl: '/views/login/login.html'
    }).otherwise({
            redirectTo: '/about'
    });
});

和我的 HTML 片段

{% load staticfiles %}
<!DOCTYPE html>
<html>
    <head>
            <link rel="stylesheet" href="/assets/js/bower_components/bootstrap/dist/css/bootstrap.css">
            <link rel="stylesheet" href="/assets/style/main.css">
            <link rel="stylesheet" href="/assets/style/container.css">
            <link rel="stylesheet" href="/assets/style/button.css">

            <script src="/assets/js/bower_components/jquery/dist/jquery.js"></script>
            <script src="/assets/js/bower_components/bootstrap/dist/js/bootstrap.js"></script>
            <script src="/assets/js/bower_components/angular/angular.js"></script>
            <script src="/assets/js/bower_components/angular-route/angular-route.js"></script>
            <script src="/assets/js/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
            <script src="/app.js"></script>
            <script src="/views/login/login.js"></script>
    </head>

    <body ng-app="ABC">
            <div class="container-fluid">
                    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
                            <ul class="nav navbar-nav">
                                    <li><a href="#home">Home</a></li>
                                    <li><a href="#login">Login</a></li>
                                    <li><a href="#signup">Sign Up</a></li>
                            </ul>
                    </nav>
            </div>

            <div id="wrap"  ng-controller="GreetingController">
                    <div class="container-fluid" id="main">
                            <ng-view></ng-view>
                    </div>
            </div>

     </body>
</html>

如果有人可以对此进行调查并让我知道解决方案，我将不胜感激。

编辑：请找到源代码的链接。

https://github.com/mikhilraj/bucky

提前致谢。

4

2 回答 2

0

改变了一些东西。只需添加剩余的东西，如引导程序等。我还更改了 routeProvider 中文件的 url。只需检查 plunker。

HTML： 

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>
    <script src="app.js"></script>
  </head> 

  <body>
            <div class="container-fluid">
                    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
                            <ul class="nav navbar-nav">
                                    <li><a href="#home">Home</a></li>
                                    <li><a href="#login">Login</a></li>
                                    <li><a href="#signup">Sign Up</a></li>
                            </ul>
                    </nav>
            </div>

            <div id="wrap"  ng-controller="GreetingController">
                    <div class="container-fluid" id="main">
                            <ng-view></ng-view>
                    </div>
            </div>

     </body>

</html>

角码： 

var app = angular.module('plunker', ['ngRoute']);

app.controller('GreetingController', function($scope) {
  $scope.greeting = 'Hola!';
});

app.config(['$routeProvider', function($routeProvider) {
    //$interpolateProvider.startSymbol('[[');
    //$interpolateProvider.endSymbol(']]');

    $routeProvider.when('/about', {
            templateUrl: 'about.html'
    }).when('/login',{
            templateUrl: 'login.html'
    }).otherwise({
            redirectTo: '/about'
    });
}]);

这是plnkr。 http://plnkr.co/edit/sHvAOGD2zZVrWMb4NSr8

于 2015-11-30T16:10:17.163 回答
0

您的脚本未正确执行。您能否移动<script src="/app.js"></script>底部以便在 DOM 中呈现 HTML 元素后执行脚本。

{% load staticfiles %}
<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" href="/assets/js/bower_components/bootstrap/dist/css/bootstrap.css">
      <link rel="stylesheet" href="/assets/style/main.css">
      <link rel="stylesheet" href="/assets/style/container.css">
      <link rel="stylesheet" href="/assets/style/button.css">

      <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="/assets/js/bower_components/bootstrap/dist/js/bootstrap.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
    </head>

    <body ng-app="ABC">
      <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
          <ul class="nav navbar-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#login">Login</a></li>
            <li><a href="#signup">Sign Up</a></li>
          </ul>
        </nav>
      </div>

      <div id="wrap"  ng-controller="GreetingController">
        <div class="container-fluid" id="main">
          <ng-view></ng-view>
        </div>
      </div>

     </body>
</html>

<script>
var app = angular.module('ABC',['ngRoute', 'ui.bootstrap']);

app.controller('GreetingController', ['$scope', function($scope) {
    $scope.greeting = 'Hola!';
}]);


app.config(function($interpolateProvider, $routeProvider){
    //$interpolateProvider.startSymbol('[[');
    //$interpolateProvider.endSymbol(']]');

    $routeProvider.when('/about', {
      templateUrl: 'views/about.html'
    }).when('/login',{
      templateUrl: '/views/login/login.html'
    }).otherwise({
      redirectTo: '/about'
    });
});
</script>

<!--script src="/app.js"></script-->
<script src="/views/login/login.js"></script>
于 2015-11-30T15:19:57.447 回答