Question

我昨天选择了Angular.js作为实习的一部分，并在前一天收到了Node.js，所以我是这些技术的初学者。

基本上，我尝试使用输入字段创建一个非常简单的页面，该字段会在字段旁边打印输入文本，例如such。正如你所看到的，它适用于jsfiddle。

但是当我在本地尝试这个时，我在我的控制器的angular.module调用中得到一个ReferrenceError，在我的浏览器中得到this error。

这是我的index.html：

<div ng-app="myApp">
<head>
</head>
<body>
    <div class="container" ng-controller="AppCtrl">
        <input ng-model="query"/>
        <span><b ng-bind="queryResult()"></b></span>
    </div>



    <!-- Scripts et liens css.-->
    <script src="./controller.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="./bower_components/jquery/dist/jquery.js"></script>
    <script src="./bower_components/angular/angular.js"></script>
    <script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="./bower_components/jquery/dist/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>

我的controller.js：

var myApp = angular.module("myApp", []);

myApp.controller('AppCtrl', function($scope) {
    $scope.query = "";
    $scope.queryResult = function(){
        return $scope.query;
    };
});

知道我做错了吗？

Answer 1

你应该包括

<script src="./controller.js"></script>

在角度js文件之后

Answer 2

控制器文件和AngularJS CDN的顺序是问题所在。请在AngularJS CDN下添加您的JS文件。

此外，您已将ng-app添加到没有结束标记的div中。它也可能导致问题。

请尝试以下代码：

<html ng-app="myApp">
<head>
</head>
<body>
    <div class="container" ng-controller="AppCtrl">
        <input ng-model="query"/>
        <span><b ng-bind="queryResult()"></b></span>
    </div>



    <!-- Scripts et liens css.-->
    <script src="./controller.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="./bower_components/jquery/dist/jquery.js"></script>
    <script src="./bower_components/angular/angular.js"></script>
    <script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="./bower_components/jquery/dist/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>
</html>

Answer 3

看起来你在角度之后包含了jQuery。 jQuery应该是第一个。

看起来你还有两次角度。

angular.min.js和angular.js

找不到Angular.js，但链接

3 个答案: