19

次のコードからjsfiddleを作成するにはどうすればよいですか:

<html>
<head>
</head>
<body>
    <div ng-app ng-controller="MainCtrl">
        <ul>
            <li ng-repeat="num in nums">
                {{num}}
            </li>
        </ul>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>

    <script type="text/javascript" charset="utf-8">
        function MainCtrl($scope) {
            $scope.nums = ["1","2"];
        }
    </script>
</body>
</html>

私の非動作試行: http://jsfiddle.net/zhon/3DHjg/は何も表示せず、エラーがあります。

4

7 に答える 7

40

これを機能させるには、jsFiddle でいくつかの設定を行う必要があります。

まず、左側のパネルの [Frameworks & Extensions] で、[No wrap - in <body>] を選択します。

次に、「Fiddle Options」の下で、「Body tag」を次のように変更します<body ng-app='myApp'>

JS パネルで、モジュールを開始します。

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

それをチェックしてください：http://jsfiddle.net/VSph2/1/

于 2013-02-06T16:15:41.523 に答える
22

@pkozlowski.opensource は、jsFiddle を使用して AngularJS サンプル プログラムを作成する方法についての素晴らしいブログ記事を投稿しています。

于 2013-02-06T17:18:44.317 に答える
7

angular にアクセスできない関数スコープでコントローラーを定義しました (angular はまだロードされていません)。つまり、角度ライブラリをロードする前に、以下の例のように角度ライブラリの関数とヘルパーを呼び出そうとしています。

function onload(){
 function MainCtrl(){}
}

これを解決するには、角度荷重タイプをスクリーンショットに示すように切り替えますNo wrap - in <body>。

ここに画像の説明を入力

これはjsfiddleの実例です

于 2013-02-06T16:08:49.740 に答える
0

angular 5 でのちょっとした実験には、https://stackblitz.com/を使用できます。このサイトは、Angular ドキュメントでライブ デモを実行するために使用されます。例: https://stackblitz.com/angular/eybymjopmav

于 2018-02-12T08:30:20.490 に答える