VM73:49Uncaught ReferenceError：角度未在 jsfiddle 中定义

Question

我正在尝试在 jsfiddle 中运行一个 angularJS 示例（当然是为了学习目的），在控制台中遇到错误。

当我添加此 CDN 以实现角度兼容性时： https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js

我看到下面的错误。

VM141 angular.min.js:6 未捕获的错误：[$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=myApp&p1=Error%3A%2…oudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.6%2Fangular.min.js%3A21%3A19)

当我删除外部源时，看到以下错误：

VM93:45 Uncaught ReferenceError: 角度未定义

关注：

1. 是否需要为角度示例添加外部源？如果是，那么添加外部资源的正确方法是什么。 （例如，在 CDN 中搜索该 API 并添加）。

这里是sn-p的代码：

html:

<div ng-app="myApp" ng-controller="myCtrl">
Your name: <input type="text" ng-model="name" ng-click="displayName();">
Hello {{$scope.name}}
</div>

js:

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

myApp.controller('myCtrl', function($scope){
$scope.displayName = function(){
alert("In right place");
$scope.name = "Name";
}
});

这是小提琴：https://jsfiddle.net/supdas87/my1juu4e/2/

Answer 1

我已将 angular-1.0.1.js file 添加到外部资源（您只需复制并粘贴 URL），并在您的 HTML 文件中将 {{$scope.name}} 更改为 {{name}}。使用{{}}时不必写$scope，它是隐式的。

这是一个基于您提供的代码的有效Fiddle。

PS：我添加了 Angular 1.0.1，当然你可以使用你想要的 Angular 版本。你可以看到所有版本here。

---

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  Your name: <input type="text" ng-model="name" ng-click="displayName();">
  Hello {{name}}
</div>

JavaScript

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

myApp.controller('myCtrl', function($scope) {
  $scope.displayName = function(){
    alert("In right place");
    $scope.name = "Name";
  }
});