Простой AngularJS работает на JSFiddle

Как сделать 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/ ничего не показывает и имеет ошибки.

Ответ 1

@pkozlowski.opensource имеет приятный пост в блоге о том, как использовать jsFiddle для написания программных программ AngularJS.

Ответ 2

Вам нужно установить некоторые вещи в jsFiddle, чтобы это работало.

Сначала на левой панели в разделе "Рамки и расширения" выберите "Нет обертки - в < тело".

Теперь в разделе "Параметры скрипта" измените "Тег тела" на <body ng-app='myApp'>

На панели JS запустите свой модуль:

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

Проверьте это: http://jsfiddle.net/VSph2/1/

Ответ 3

Вы определили свой контроллер в области функций, недоступной для angular (angular еще не загружен). Другими словами, вы пытаетесь вызвать библиотечные функции и вспомогательные функции angular, как показано ниже, перед загрузкой библиотеки angular.

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

Чтобы решить эту проблему, переключите свой тип загрузки angular как No wrap - in <body>, как показано на снимке экрана.

здесь работает пример в jsfiddle

Ответ 4

Я пишу свой ответ для тех, кто попадает на эту страницу, я использовал для использования директивы ng-module, но в jsfiddle через полчаса я понял, что 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/

Ответ 5

Нажмите кнопку JAVASCRIPT, выберите angular версию и место, где хотите включить загрузку script:

Затем нажмите кнопку HTML и добавьте ng-app в тег body. Все это:)

Ответ 6

Поскольку 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, установив в качестве внешнего ресурса.