My task is to display the weather forecast from the API.
I have the following code, but I cannot get the data to show. I just started learning AngularJS and using APIs today, so any sort of help would be much appreciated! Specifically, what is wrong with my code that the weather data will not show?
This is the API I need to use:
http://api.openweathermap.org/data/2.5/forecast/daily?q=KansasCity&mode=json&units=imperial&cnt=7&appid=bd82977b86bf27fb59a04b61b657fb6f
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('OpenWeather', function($scope, $http, $log) {
$scope.city = "Kansas City";
$scope.units = 'imperial';
$scope.change = function() {
var url = 'http://api.openweathermap.org/data/2.5/forecast/daily?q=KansasCity&mode=json&units=imperial&cnt=7&appid=bd82977b86bf27fb59a04b61b657fb6f';
$http.jsonp(url)
.success(function(data, status, headers, config) {
$scope.main = data.main;
$scope.wind = data.wind;
$scope.description = data.weather[0].description;
})
.error(function(data, status, headers, config) {
$log.error('Could not retrieve data');
});
};
$scope.change();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Weather App</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="OpenWeather">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Kansas City Weather</h1>
</ion-header-bar>
<ion-content>
<div class="list card">
<div class="item item-avatar">
<img src="img/ionic.png">
<h2>10 Day Forecast</h2>
<p>Kansas City, MO</p>
</div>
<div class="item item-avatar">
<h3>{{data.name}}</h3>
<p>Temp: {{main.temp}}</p>
<p>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Update
Solved the problem at hand. Thanks to all
You are using $http the wrong way.
Is better and cleaner to create a request object and put the params there. Please here is the oficial docs: https://docs.angularjs.org/api/ng/service/$http#usage
And here JSBIN: http://jsbin.com/doqeselile/edit?html,css,js,output
var app = angular.module('jsbin', []);
app.controller('DemoCtrl', function($http) {
var vm = this;
var URL = 'http://api.openweathermap.org/data/2.5/forecast/daily';
var request = {
method: 'GET',
url: URL,
params: {
q: 'KansasCity',
mode: 'json',
units: 'imperial',
cnt: '7',
appid: 'bd82977b86bf27fb59a04b61b657fb6f'
}
};
$http(request)
.then(function(response) {
vm.data = response.data;
}).
catch(function(response) {
vm.data = response.data;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular JS</title>
</head>
<body ng-app="jsbin">
<div ng-controller="DemoCtrl as vm">
<h1>{{ vm.data | json }}</h1>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
</body>
</html>
You can use a factory or service for getting the information and then pass the information to the controller.
.factory('weatherService', ['$http', '$q', function ($http, $q){
function getWeather () {
var deferred = $q.defer();
$http.get('http://api.openweathermap.org/data/2.5/forecast/daily?q=KansasCity&mode=json&units=imperial&cnt=7&appid=bd82977b86bf27fb59a04b61b657fb6f')
.success(function(data){
deferred.resolve(data);
})
.error(function(err){
deferred.reject(err);
});
return deferred.promise
}
return {
getWeather: getWeather,
};
}
}])
Then in your controller
.controller('OpenWeather', ['$scope', 'weatherService', function($scope, weatherService) {
weatherService.getWeather().then(function(data) {
$scope.city = data;
})
With this you can access any data from the json file and display it in your view.
<div class="item item-avatar">
<h3>{{city.name}}</h3>
<p>Temp: {{city.temp}}</p>
<p>
</div>
Check this for ionic 4 App that use openWeather API http://www.offlineprogrammer.com/building-a-pwa-with-ionic-4-capacitor-temperature-city/
Related
I'm trying to use Angular UI modal, but I keep getting an unknown provider error message: "Error: [$injector:unpr]".
I use custom build to minimize the overall size of the file. I have injected the ui dependency in the app when creating it. The build files are added to the index.html page.
//This is the app.js file
(function() {
angular.module('locatorApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']);
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.when('/about', {
templateUrl: '/common/views/genericText.view.html',
controller: 'aboutCtrl',
controllerAs: 'vm'
})
.when('/location/:locationid', {
templateUrl: '/locationDetail/locationDetail.view.html',
controller: 'locationDetailCtrl',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}
angular
.module('locatorApp')
.config(['$routeProvider', '$locationProvider', config]);
})();
//This is the controller file
(function() {
angular
.module('locatorApp')
.controller('locationDetailCtrl', locationDetailCtrl);
/*Inject $routeParams service into controller to protect from minification*/
locationDetailCtrl.$inject = ['$routeParams', '$uibModal', 'locatorData'];
function locationDetailCtrl($routeParams, $uibModal, locatorData) {
var vm = this;
vm.locationid = $routeParams.locationid;
locatorData.locationById(vm.locationid)
.success(function(data) {
vm.data = {
location: data
};
vm.pageHeader = {
title: vm.data.location.name
};
})
.error(function(e) {
console.log(e);
});
vm.popupReviewForm = function() {
alert("Let's add a review");
};
}
})();
<!-- This is the index.html file-->
<!DOCTYPE html>
<html ng-app="locatorApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocatoR</title>
<link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body ng-view>
<script src="/angular/angular.min.js"></script>
<script src="/lib/angular-route.min.js"></script>
<script src="/lib/angular-sanitize.min.js"></script>
<script src="/lib/ui-bootstrap-custom-2.5.0.min.js"></script>
<script src="/lib/ui-bootstrap-custom-tpls-2.5.0.min.js"></script>
<script src="/angular/locator.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/
jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/javascripts/validation.js"></script>
</body>
</html>
//This is the locatorData service
(function() {
/*Data service for pulling data from the API*/
locatorData.$inject = ['$http'];
function locatorData($http) {
var locationByCoords = function(lat, lng) {
return $http.get('/api/locations?lng=' + lng + '&lat=' + lat + '&maxdist=20');
};
var locationById = function(locationid) {
return $http.get('/api/locations/' + locationid);
};
return {
locationByCoords: locationByCoords,
locationById: locationById
};
};
angular
.module('locatorApp')
.service('locatorData', locatorData);
})();
you should use ng-view on a div inside <body>, so script tags will exist after route template is substituted. Then it would be better to reorganize order of script tags you are adding.
At first non-angular script files, then angular, then your sources
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/javascripts/validation.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/angular/angular.min.js"></script>
<script src="/angular/locator.min.js"></script>
<script src="/lib/angular-route.min.js"></script>
<script src="/lib/angular-sanitize.min.js"></script>
<script src="/lib/ui-bootstrap-custom-2.5.0.min.js"></script>
<script src="/lib/ui-bootstrap-custom-tpls-2.5.0.min.js"></script>
Then use $uibModal service that you've injected:
vm.popupReviewForm = function() {
$uibModal.open({
template: '...html',
//...config from docs
}).then(function(){console.log('closed successfully');})
.catch(function(){console.log('dismissed modal');});
};
Move your script tag either to below of head tag.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocatoR</title>
<link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css">
// Scripts
</head>
or, outside the ng-view :
<body>
<div ng-view></div>
// scripts here
</body>
Ok, I've finally figured it out. The problem was using incompatible versions of Angular JS and Angular UI.
AngularJS HTTP GET response is displaying in console log but I'm not able to display it inside div. Here is my code I'm beginner I don't figure out why it is not working so I'm asking here.
<!DOCTYPE html>
<html lang="en">
<base href="/">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
</head>
<body>
testing
<div ng-app="myApp" ng-controller="newcontroller">
<div ng-bind-html="resultdata"></div>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute","ngSanitize"]);
app.config(function($routeProvider,$locationProvider){
$routeProvider
.when("/:id-wallpaper",{
templateUrl: "/new",
controller : "newcontroller"
});
$locationProvider.html5Mode(true);
});
app.controller("newcontroller", function ($scope, $http, $routeParams) {
$http({
url: "new",
method: "get",
params: { id: $routeParams.id }
}).then(function (response) {
console.log(response.data);
$scope.resultdata = response.data;
})
});
</script>
</div>
</body>
</html>
Please remove <div ng-bind-html="resultdata"></div> from your DOM and try to create a $route template. You will also be able create an additional file for your template by using templateUrl: 'nameOfTemplate.html' instead of binding it as an HTML-String by using template param. Please refer AngularJS routeProvider configuration.
$route configuration
app.config(function($routeProvider,$locationProvider){
$routeProvider
.when("/:id-wallpaper",{
template: '<div>{{ resultdata }}</div>',
controller : "newcontroller"
});
$locationProvider.html5Mode(true);
});
With an template file it would look like this:
app.config(function($routeProvider,$locationProvider){
$routeProvider
.when("/:id-wallpaper",{
templateUrl: 'myFile.html',
controller : "newcontroller"
});
$locationProvider.html5Mode(true);
});
Content of myFile.html (View)
<div>{{ resultdata }}</div>
I didn't updated any of my .js files, yet my nested views are not displaying at all (even though they were before) and throw this error in console.
Why is it throwing the error and not displaying my nested views as it was originally?
angular version: 1.6.0-rc.0 (.min.js)
angular-ui-router version: v0.3.1 (.min.js)
app.js
'use strict';
var app = angular.module('app', ['ui.router','controllers','filters']);
app.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise('/');
// Initialize states
var homeState =
{
name:'home',
url:'/',
views:
{
'' : {templateUrl: 'partials/home.html'}, // App template that organizes the layout of the panels
'panel#home' : {templateUrl: 'partials/panel.html'} // Reusable panel template for multiple panels within app
}
};
// Register states
$stateProvider.state(homeState);
});
controller.js
'use strict';
var controllers = angular.module("controllers", []);
// Initialize controllers
controllers.controller('panelEvaluateController',function($scope)
{
$scope.header = 'Solve an Equation';
$scope.button = '<button>Solve</button>';
$scope.body = 'partials/panels/evaluate.html';
$scope.tooltip = 'Help';
});
controllers.controller('panelConvertController',function($scope)
{
$scope.header = 'Convert an Integer';
$scope.button = '<button>Convert</button>';
$scope.body = 'partials/panels/convert.html';
$scope.tooltip = 'Help convert';
$scope.bases =
[
{ value : 2 , name : 'Binary'},
{ value : 8 , name : 'Octal'},
{ value : 10 , name : 'Decimal'},
{ value : 16 , name : 'Hex'}
];
$scope.base =
[
{selected : 2},
{selected : 10}
];
});
controllers.controller('panelSolutionController',function($scope)
{
$scope.header = 'Solution';
$scope.button = '<div class="row"><div class="col-sm-6"><button><span class="glyphicon glyphicon-chevron-left"></span></button></div><div class="col-sm-6"><button><span class="glyphicon glyphicon-chevron-right"></span></button></div></div>';
$scope.body = 'templates/panels/solution.html';
$scope.tooltip = 'solve';
});
index.html
<!DOCTYPE html>
<html data-ng-app="app" lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Show Your Work</title>
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/specific.css">
</head>
<body>
<div id="header">
<div class="header-color-line"></div>
<div id="logo">Show Your Work</div>
</div>
<div class="row" id="view-container">
<div data-ui-view=""></div> <!-- displays home.html -->
</div>
<script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular.js"></script>
<script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/js/app.js"></script>
<script type="text/javascript" src="resources/js/controllers.js"></script>
<script type="text/javascript" src="resources/js/filters.js"></script>
</body>
</html>
filters.js
'use strict';
var filters = angular.module("filters", []);
filters.filter('trusted', function($sce)
{
return function(val)
{
return $sce.trustAsHtml(val);
};
});
You need to update the ui-router version which should match with the angular version, Now the versions you have mentioned does not match.
<script type="text/javascript" src="vendor/angular/angular.js"></script>
<script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
I have a simple app shows your current location via the lat and lon coordinates and displays on the map.
But at the moment it is static and coordinates must be specified manually.
Full code of app:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-leaflet-directive/0.10.0/angular-leaflet-directive.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
</head>
<body ng-app="NearMeApp">
<div class="header">
<div class="container-fluid">
<h1 class="pull-left">NearMe</h1>
<a class="pull-right" href="#/about">About</a>
</div>
</div>
<div ng-view></div>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/controllers/AboutController.js"></script>
</body>
</html>
main.css on pasteBin
main.html
<div class="main">
<div class="container-fluid" id="map-canvas">
<leaflet center="mapCenter"></leaflet>
</div>
</div>
about.html
<div class="about">
<div class="container-fluid">
<h1>Meet NearMe</h1>
<h2>The best place to discover new places around you.</h2>
<a class="btn btn-primary" href="#/">Start exploring</a>
</div>
</div>
app.js
var app = angular.module('NearMeApp', ['ngRoute', 'leaflet-directive']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'MainController',
templateUrl: 'views/main.html'
})
.when('/about', {
controller: 'AboutController',
templateUrl: 'views/about.html'
})
.otherwise({
redirectTo: '/'
});
});
AboutController.js
app.controller('AboutController', ['$scope', function($scope) {
}]);
MainController.js
app.controller('MainController', ['$scope', function($scope) {
$scope.mapCenter = {
lat: 40.741934,
lng: -74.004897,
zoom: 17
};
}]);
How can I get lat and lon dynamically from a third-party service? For example, from JSON IP API
I've heard that can get the JSON data in a way
app.factory('latlon', ['$http', function($http) {
return $http.get('http://ip-api.com/json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
but I do not know what to do and how to use it in my situation.
Could you help me solve this problem?
Solved
issue resolved
MainController.js
app.controller('MainController', ['$scope', '$http', function($scope, $http) {
$scope.mapCenter = {};
$http.get('http://ip-api.com/json')
.success(function(data) {
$scope.mapCenter.lat = data.lat;
$scope.mapCenter.lng = data.lon;
$scope.mapCenter.zoom = 17;
});
}]);
Not quite sure what you mean by 'How can I make sure that the data (Lat and Lon) came dynamically', but you could utilize the HTML5 geolocation function: navigator.geolocation.getCurrentPosition(success[, error[, options]])
You should abstract this into a seperate service or factory to make it more reusable and to avoid dependecy to window
angular.module('app', []).factory('GeolocationService', ['$q', '$window', function ($q, $window) {
function getPosition() {
var deferred = $q.defer();
if (!$window.navigator.geolocation) { // check if geolocation is supported
deferred.reject('Geolocation is not supported.');
return;
}
$window.navigator.geolocation.getCurrentPosition( // get the current position
function (position) { // ok
deferred.resolve(position);
},
function (err) { // error
deferred.reject(err);
});
return deferred.promise; // returned as a promise
}
return {
getCurrentPosition: getCurrentPosition
};
}]);
You could then call it from you controller something like this
geolocationSvc.getPosition().then(
function success(position){
$scope.mapCenter = {
lat: pos.coords.latitude,
lng: pos.coords.longitude,
zoom: 17
},
function error(err){
console.log('ERROR(' + err.code + '): ' + err.message);
});
Note that this code has not been actually tested, but should provide you with an outline of how this could be implemented.
In my angularjs project, I have the following files:
/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- Custom Libraries -->
<script src="lib/Shake.js"></script>
<!-- your app's js -->
<script src="js/services/CloudDatabases.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
/js/apps.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.styleDefault();
}
// Register stopping and starting analytics on app open and close
document.addEventListener("pause", window.analytics.Stop(), false);
document.addEventListener("resume", window.analytics.Start(), false);
// Exit the application if you go offline
document.addEventListener("offline", function(){}, false);
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
....
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
/js/services/CloudDatabases.js
angular.module('starter.services')
.service('CloudDatabases', ['$http', function ($http) {
var urlBase = '/api/customers';
this.getDatabases = function () {
console.log('CloudDatabases.getDatabases();');
return 'test getDatabasesResponse';
};
}])
/js/controllers.js
angular.module('starter.controllers', ['CloudDatabases'])
// Login controller
.controller('LoginCtrl', function($scope, $ionicLoading, $http, $ionicPopup, $rootScope, $state, $ionicViewService, CloudDatabases) {
CloudDatabases.getDatabases();
// Form data for the login modal
$scope.loginData = {};
// Try loading the loing data from storage if the user has already logged in
$scope.loginData.username = window.localStorage['username'] || '';
$scope.loginData.password = window.localStorage['password'] || '';
$scope.loginData.uk = window.localStorage['uk'] || false;
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
// Show the loading overlay so the user knows we are busy
$ionicLoading.show({template: 'Loading...'});
// Save the login data to local storage so if the user closes the app they
// don't have to re-enter it
window.localStorage['username'] = $scope.loginData.username;
window.localStorage['password'] = $scope.loginData.password;
window.localStorage['uk'] = $scope.loginData.uk;
// Build login JSON from form
var login_json = JSON.stringify({auth: {passwordCredentials: {username: $scope.loginData.username, password: $scope.loginData.password}}});
// POST the actual authentication request
$http({
method: 'POST',
url: 'https://identity.api.rackspacecloud.com/v2.0/tokens',
data: login_json,
headers: {'Content-Type': 'application/json'}
}).then(function(response) {
// Save the auth token and tenant id for later use
$rootScope.userData = [];
$rootScope.userData.Token = response.data.access.token.id;
$rootScope.userData.Tenant = response.data.access.token.tenant.id;
$rootScope.userData.RawServices = response.data.access.serviceCatalog;
// Use viewservice to hide back button on next page and remove login from nav stack
$ionicViewService.nextViewOptions({
disableBack: true
});
// Track successful logins
window.analytics.trackFeature("Login.Success");
$ionicLoading.hide();
// Navigate to Servers page
$state.go('app.servers');
},
function(response) {
// Track failed logins
window.analytics.trackFeature("Login.Failure");
$ionicLoading.hide();
});
};
})
....
But this throws an error saying that it can't be injected.
Can anyone help with why that might be? It says that starter.services isn't defined
The error is because of your service definition. You are using service definition without dependency array [] as second parameter. This tells angular to treat it as getter method for module starter.services instead of defining the module. Use below code for starter.services to fix this.
angular.module('starter.services', [])
.service('CloudDatabases', ['$http', function ($http) {
var urlBase = '/api/customers';
this.getDatabases = function () {
console.log('CloudDatabases.getDatabases();');
return 'test getDatabasesResponse';
};
}])