发表新帖
发表新帖

Simple AngularJS running on JSFiddle

后端 未结
关注
7 894
北海茫月
北海茫月 2020-11-27 16:55

How do I make a jsfiddle out of the following code:





    

           


        

                      

              相关标签:
7条回答
  • 故里飘歌
    2020-11-27 17:37

    Click JAVASCRIPT button, choose angular version and place where u want include loaded script:

    Then click HTML button and add ng-app in body tag. Its all:)

    0 讨论(0)
  • 一个人的身影
    2020-11-27 17:40

    @pkozlowski.opensource has a nice blog post about how to use jsFiddle to write AngularJS sample programs.

    0 讨论(0)
  • 花落未央
    2020-11-27 17:41

    Since Angular 1.4.8 has been chosen by JSFiddle as the top option for Angular V1 in its JAVASCRIPT setting panel, more restriction applies: both ng-app and ng-controller should be declared in HTML to make it work.

    Sample HTML:

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

    Sample JS:

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

    https://jsfiddle.net/y170uj84/

    Also tested with the latest Angular 1.6.4, by setting as External Resource.

    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-27 17:42

    You need to set some things up in jsFiddle for this to work.

    First, on the left panel, under "Frameworks & Extensions", select "No wrap - in <body>".

    Now, under "Fiddle Options", change "Body tag" to <body ng-app='myApp'>

    In the JS panel, initiate your module:

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

    Check it out: http://jsfiddle.net/VSph2/1/

    0 讨论(0)
  • 别跟我提以往
    2020-11-27 17:44

    You've defined your controller in a function scope that is not accessible to angular (angular is not yet loaded). In other words you are trying to call angular library's functions and helpers like below example before getting angular library loaded.

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

    To resolve this, switch your angular load type to be No wrap - in <body> like shown in screenshot.

    here is a working example in jsfiddle

    0 讨论(0)
  • 春和景丽
    2020-11-27 17:46

    For little experiments in angular 5, you can use https://stackblitz.com/. This site is used in angular documentation to run live demo. For example, https://stackblitz.com/angular/eybymjopmav

    0 讨论(0)
 看不清?
提交回复
热议问题