如何在全新JSFiddle中应用Angular+Chart.js代码片段？

1. JS面板不选预设框架
   新JSFiddle的JavaScript面板里，把"Framework"选项设为-- No Framework --，和原片段的配置保持一致。

2. 添加必需的依赖库
   打开左侧的"External Resources"面板，添加以下三个库的CDN地址：

   • https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js
   • https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js
   • https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js

3. 粘贴代码到对应面板

   • HTML面板：直接粘贴给定的<div ng-app="app" ng-controller="BarCtrl">...</div>代码
   • JavaScript面板：粘贴angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {...})代码

4. 调整加载时机
   在JS面板的"Load Type"下拉框里，选择Wrap in <head>，确保Angular在DOM渲染前完成初始化。

直接在JS面板选Angular框架时，只引入了Angular本身，缺少chart.js和对应的Angular封装库angular-chart.js；如果选了Angular 2+版本，还会和你写的AngularJS 1.x代码语法完全不兼容，自然会报错。原JSFiddle没选框架，本质是手动引入了所有依赖，所以复刻时要对齐这个配置。

内容的提问来源于stack exchange，提问作者Murmulodi