從Fiddle中結合HTML和JS

在this forum post中提出了類似的問題，但我仍然無法將代碼從JSfiddle轉換爲HTML。從Fiddle中結合HTML和JS

JSfiddle示例可以找到here。

我試圖用在前面提到的論壇上發帖提出的技術，那就是：

<html> 
<head> 
<style type="text/css"> 
    // CSS Content 
    </style> 
</head> 
<body ng-app="myApp"> 
<!-- some html elements --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
    <script language="JavaScript" type="text/javascript"> 
     // more js here. 
    </script> 
</body>

我作爲一個完整的小白，我只是複製了HTML和Javascript到一些HTML元素和//更多js這裏的章節。在不改變API密鑰，最後的代碼是這樣的：

<html> 
<head> 
<style type="text/css"> 
    // CSS Content 
    </style> 
</head> 
<body ng-app="myApp"> 
<div ng-app="myapp" ng-controller="WeatherCtrl"> 
    <h2>Weather in Salzburg, Austria</h2> 
    <weather-icon cloudiness="{{ weather.clouds }}"></weather-icon> 
    <h3>Current: {{ weather.temp.current | temp:2 }}</h3> 
    min: {{ weather.temp.min | temp }}, max: {{ weather.temp.max | temp }} 
</div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
    <script language="JavaScript" type="text/javascript"> 

'use strict'; 

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

myapp.factory('weatherService', function($http) { 
    return { 
     getWeather: function() { 
     var weather = { temp: {}, clouds: null }; 
     $http.jsonp('http://api.openweathermap.org/data/2.5/weather?q=Salzburg,at&units=metric&callback=JSON_CALLBACK&APPID=f9dbd911bc01df1d9ce563b2ba4d3209').success(function(data) { 
      if (data) { 
       if (data.main) { 
        weather.temp.current = data.main.temp; 
        weather.temp.min = data.main.temp_min; 
        weather.temp.max = data.main.temp_max; 
       } 
       weather.clouds = data.clouds ? data.clouds.all : undefined; 
      } 
     }); 

     return weather; 
     } 
    }; 
}); 

myapp.filter('temp', function($filter) { 
    return function(input, precision) { 
     if (!precision) { 
      precision = 1; 
     } 
     var numberFilter = $filter('number'); 
     return numberFilter(input, precision) + '\u00B0C'; 
    }; 
}); 

myapp.controller('WeatherCtrl', function ($scope, weatherService) { 
    $scope.weather = weatherService.getWeather(); 
}); 

myapp.directive('weatherIcon', function() { 
    return { 
     restrict: 'E', replace: true, 
     scope: { 
      cloudiness: '@' 
     }, 
     controller: function($scope) { 
      $scope.imgurl = function() { 
       var baseUrl = 'https://ssl.gstatic.com/onebox/weather/128/'; 
       if ($scope.cloudiness < 20) { 
        return baseUrl + 'sunny.png'; 
       } else if ($scope.cloudiness < 90) { 
        return baseUrl + 'partly_cloudy.png'; 
       } else { 
        return baseUrl + 'cloudy.png'; 
       } 
      }; 
     }, 
     template: '<div style="float:left"><img ng-src="{{ imgurl() }}"></div>' 
    }; 
}); 

    </script> 
</body>

我的輸出是這樣的：

任何人都可以請告訴我如何做到這一點？

來源

2017-07-07 Henry Blue

問題是您聲明兩個應用程序從正文<body>標記中刪除「ng-app =」myApp「。

來源

2017-07-07 01:30:44 AKMorris

從Fiddle中結合HTML和JS

回答

相關問題