web-dev-qa-db-ja.com

JSFiddleで実行される単純なAngularJS

次のコードから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/ は何も表示せず、エラーが発生します。

angularjsjsfiddle
18
zhon

@ pkozlowski.opensourceには、jsFiddleを使用してAngularJSサンプルプログラムを作成する方法に関するニース ブログ投稿 があります。

22
Mark Rajcok

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

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

次に、[フィドルオプション]で[ボディタグ]を<body ng-app='myApp'>に変更します。

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

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

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

40
dutzi

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

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

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

enter image description here

これが動作している jsfiddleの例

7
mpm

JAVASCRIPTボタンをクリックして、angular versionを選択し、ロードしたスクリプトを含める場所を指定します： enter image description here

次に、HTMLボタンをクリックして、bodyタグにng-appを追加します。そのすべて:) enter image description here

2
Vasyl Gutnyk

私はこのページにアクセスした人のために私の答えを書いています、私はng-moduleディレクティブを使用するために使用されましたが、jsfiddle30分後、ng-moduleは許可されておらず、エラーも表示されず、いつng-moduleをng-appフィドルが非常にうまく機能するように変更しました。私はこれを共有したかっただけです。ラップ（ボディ）も必要ありません。

<div ng-app="appX" ng-controller="appCtrl">
  <p>{{greeting}}
  </p>
</div>

var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});

https://jsfiddle.net/cloudnine/trgrjwf1/7/

1
katmanco

angular 5の小さな実験では、 https://stackblitz.com/ を使用できます。このサイトはangularライブデモを実行するためのドキュメント（例： https://stackblitz.com/angular/eybymjopmav

0
Prokhor Sednev

Angular 1.4.8がJSFiddleによってAngular V1のJAVASCRIPT設定パネルのトップオプションとして選択されているため、さらに制限が適用されます：両方ng-appおよびng-controllerを機能させるには、HTMLで宣言する必要があります。

サンプルHTML：

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="sample" placeholder="type something here...">
  <span>{{sample}}</span>
</div>

JSの例：

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {});

https://jsfiddle.net/y170uj84/

また、外部リソースとして設定することにより、最新のAngular 1.6.4でテストされています。

0
themefield