Skip to content

Commit d471633

Browse files
ibrahimyolbiribrahimyolbir
committed
first commit
0 parents  commit d471633

File tree

10 files changed

+195
-0
lines changed

10 files changed

+195
-0
lines changed

‎app.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
var app = angular.module("ajaxApp", ["ngRoute"]);
2+
3+
app.config(function($routeProvider, $locationProvider){
4+
$routeProvider.when('/', {
5+
templateUrl: 'templates/home.html',
6+
controller: 'FirstController',
7+
})
8+
.when('/results', {
9+
templateUrl: 'templates/results.html',
10+
controller: 'ResultsController'
11+
})
12+
.when('/weather', {
13+
templateUrl: 'templates/weather.html',
14+
controller: 'WeatherController'
15+
})
16+
.when('/weatherResults/:city', {
17+
templateUrl: 'templates/weather-results.html',
18+
controller: 'WeatherResultsController'
19+
})
20+
});

‎controllers.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
//controller.js
2+
var app = angular.module('ajaxApp');
3+
app.controller('FirstController' , ['$scope', '$http', function ($scope, $http){
4+
$scope.name = 'ibo';
5+
$scope.names = ['Max','Pelle','Calle'];
6+
7+
$scope.show = function () {
8+
console.log('HEJ DÄR');
9+
};
10+
11+
$scope.showData = function () {
12+
var url = 'http://jsonplaceholder.typicode.com/posts';
13+
$http.get(url)
14+
.then(function (data){
15+
$scope.data = data.data;
16+
console.log(data.data)
17+
});
18+
};
19+
$scope.visaBilder = function () {
20+
var url = 'http://jsonplaceholder.typicode.com/photos';
21+
$http.get(url)
22+
.then(function (bilder){
23+
// eftersom vad vi får tillbaka är i data array måste vi skriva så här
24+
$scope.bilder = bilder.data;
25+
console.log($scope.bilder)
26+
});
27+
}
28+
}]);
29+
30+
app.controller('ResultsController', ['$scope', function ($scope){
31+
$scope.name = 'Batman';
32+
$scope.results = [
33+
{ name: 'Peter', score: 4 },
34+
{ name: 'Fredrik', score: 14 },
35+
{ name: 'Moses', score: 44 },
36+
];
37+
}]);
38+
39+
app.controller('WeatherController', ['$scope', '$location', function($scope, $location){
40+
$scope.weather = function (city){
41+
$location.path('/weatherResults/' + city);
42+
console.log(city);
43+
};
44+
45+
}]);
46+
app.controller('WeatherResultsController', ['$scope','$routeParams','getWeather', function($scope, $routeParams,getWeather){
47+
var city = $routeParams.city;
48+
getWeather.inputWeather(city)
49+
.then(function (data){
50+
console.log(data);
51+
$scope.location = data.location.name;
52+
$scope.temp_c = data.current.temp_c;
53+
$scope.description = data.current.condition.text;
54+
$scope.image = data.current.condition.icon;
55+
56+
});
57+
}]);

‎directive.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var app = angular.module('ajaxApp');
2+
3+
app.directive('max', function(){
4+
return{
5+
template: '<div> Ibbe </div>',
6+
restrict: 'E',
7+
link: function(scope, element, attrs) {
8+
9+
}
10+
};
11+
});

‎index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="ajaxApp">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<link rel="stylesheet" href="style.css">
9+
10+
<title>Angular Services</title>
11+
</head>
12+
13+
<body>
14+
<nav>
15+
<li><a href="#!/">Home</a></li>
16+
<li><a href="#!/results">Results</a></li>
17+
<li><a href="#!/weather">Search Weather</a></li>
18+
</nav>
19+
20+
<div ng-view></div>
21+
22+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
23+
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
24+
<script src="app.js"></script>
25+
<script src="controllers.js"></script>
26+
<script src="directive.js"></script>
27+
<script src="services.js"></script>
28+
</body>
29+
30+
</html>

‎services.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var app = angular.module('ajaxApp');
2+
3+
app.factory('getWeather', ['$http', function ($http) {
4+
var weather = {
5+
inputWeather: function (city) {
6+
var url = `http://api.apixu.com/v1/forecast.json?key=5625a2b074dd45a88ef115234182204&q=${city}`;
7+
return $http.get(url).then(function (data) { return data.data;});
8+
}
9+
};
10+
return weather;
11+
}]);

‎style.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
body {
2+
font-family: 'Courier New', Courier, monospace
3+
}
4+
5+
nav {
6+
text-align: center;
7+
}
8+
9+
nav li {
10+
display: inline;
11+
}
12+
13+
h1 {
14+
text-align: center;
15+
}
16+
17+
.form {
18+
display: flex;
19+
justify-content: center;
20+
}
21+
22+
#current {
23+
text-align: center;
24+
}

‎templates/home.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<section>
2+
<h1>{{name}}</h1>
3+
<div class="name" ng-repeat="name in names">
4+
<p>{{name}}</p>
5+
</div>
6+
<ibo></ibo>
7+
8+
<button ng-click="show()">Klicka Här!</button>
9+
<button ng-click="showData()">Hämta Data</button>
10+
<button ng-click="visaBilder()">Hämta Bilder</button>
11+
<div ng-repeat="data in data">
12+
<pre>{{data.title}}</pre>
13+
</div>
14+
15+
<div class="bilder" ng-repeat="bild in bilder">
16+
<h4>{{bild.title}}</h4>
17+
<img ng-src="{{bild.url}}" alt="ingen bild">
18+
19+
</div>
20+
21+
</section>

‎templates/results.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<h1>Results Page</h1>
2+
3+
<div class="results" ng-repeat="item in results">
4+
<strong>{{item.name}}</strong> - <span>{{item.score}}</span>
5+
</div>

‎templates/weather-results.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<h1>{{location}}</h1>
2+
<section id="current">
3+
<p>Today it is <strong>{{description}}</strong></p>
4+
<img ng-src="{{image}}" alt="">
5+
<p>It is {{temp_c}}&deg;c today</p>
6+
7+
</section>

‎templates/weather.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<section id="weather-search">
2+
<h1>Search Weather</h1>
3+
<div class="form">
4+
<form ng-submit="weather(city)">
5+
<input type="text" ng-model="city">
6+
<button type="submit">Search</button>
7+
</form>
8+
</div>
9+
</section>

0 commit comments

Comments
 (0)