Простой 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/ ничего не показывает и содержит ошибки.


angularjs jsfiddle
person zhon    schedule 06.02.2013    source источник
comment
pkozlowskios.wordpress.com/2012/08/12/< /а>   -  person Mark Rajcok    schedule 06.02.2013
comment
@mark, это отвечает на общий случай. Можете ли вы написать это как ответ, чтобы я мог принять его.   -  person zhon    schedule 06.02.2013
comment
После выбора типа загрузки: без переноса - у меня сработало в настройках ‹body› в JavaScript.   -  person Thulasiram    schedule 11.05.2017

Ответы (7)


arrow_upward
22
arrow_downward

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

person Mark Rajcok    schedule 06.02.2013

arrow_upward
40
arrow_downward

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

Сначала на левой панели в разделе «Фреймворки и расширения» выберите «Без переноса — в ‹body>».

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

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

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

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

person dutzi    schedule 06.02.2013
comment
Зачем мне нужно инициализировать мое приложение? Пример работает без него. - person zhon; 06.02.2013
comment
После выбора типа загрузки: без переноса - у меня сработало в настройках ‹body› в JavaScript. - person Thulasiram; 11.05.2017

arrow_upward
7
arrow_downward

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

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

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

введите здесь описание изображения

вот рабочий пример в jsfiddle

person mpm    schedule 06.02.2013
comment
Я должен был выбрать без обертки (тело) вместо загрузки - person zhon; 06.02.2013

arrow_upward
2
arrow_downward

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

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

person Vasyl Gutnyk    schedule 13.04.2017

arrow_upward
1
arrow_downward

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

person katmanco    schedule 22.12.2015

arrow_upward
0
arrow_downward

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

person themefield    schedule 16.07.2017

arrow_upward
0
arrow_downward

Для небольших экспериментов с angular 5 вы можете использовать https://stackblitz.com/. Этот сайт используется в документации angular для запуска живой демонстрации. Например, https://stackblitz.com/angular/eybymjopmav

person Prokhor Sednev    schedule 12.02.2018