javascript - 尝试让 AngularJS 在 JSFiddle 中工作

Question

我正在按照在线教程进行操作，并尝试让 angularjs 在 jsfiddle 上工作。我对 jsfiddle 不太熟悉，并且由于(我认为)jsfiddle 设置，我很难让 javascript 和 html 一起工作。

这是我的代码:http://jsfiddle.net/russellelbert/yh4c1hoe/

HTML:

<h1>{{"hiking..."}}</h1>
    <div ng-controller="HikeController as hike">
    <h1> {{hike.trail.name}}  </h1>
    <h1> {{hike.trail.miles}} </h1>
    <h1> {{"keep going"}}     </h1>
</div>    
<h1>{{"done"}}</h1>

JavaScript:

(function(){
    var app = angular.module('rew', []);
    app.controller('HikeController', function(){
        this.trail = hike;
    });
    var hike = {
        name: 'Colchuck Lake',
        miles: 4.5,
    }
})();

我将框架和扩展设置为:

• 无库(纯 JS)
• 中没有换行

fiddle 选项设置为:

• 正文标签:

但似乎只有第一个 H1 有效。输出是这样的:

    hiking...    {{hike.trail.name}}    {{hike.trail.miles}}    {{"keep going"}}    {{"done"}}

有人能看出我做错了什么吗？我希望保持 javascript 的结构与所示代码相似，以便我可以按照教程进行操作 - 我的假设是 jsfiddle 设置中有问题。

感谢您的帮助!

Answer 1

您使用的是旧版本的 Angular。更新了版本。其他一切都很好。

http://jsfiddle.net/yh4c1hoe/1/

No Code changes.