SWAPI With AngularJS

In this example below you will see how to do a SWAPI With AngularJS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -J0hn-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -J0hn- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SWAPI With AngularJS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body ng-app="app" ng-controller="mainCtrl">
  <div id="wrapper">
    <div id="character">
      <img ng-src="{{characterImg}}">
    </div>
    <div id="info">
      <h1>{{character.name}}</h1>
      <ul>
        <li>height: {{character.height}}</li>
        <li>mass: {{character.mass}}</li>
        <li>skin color: {{character.skin_color}}</li>
        <li>eye color: {{character.eye_color}}</li>
        <li>birth year: {{character.birth_year}}</li>
        <li>gender: {{character.gender}}</li>
        <li>homeworld: {{characterHomeWorld.name}}</li>
      </ul>
    </div>
  </div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-J0hn-/swapi-with-angularjs-wJvXgE */
@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');

body{
  background:rgb(210,210,210);
  height:100vh;
  overflow:hidden;
  color:red;
  font-family: 'Share Tech Mono', monospace;
}
#wrapper{
  margin:5em auto;
  box-shadow:0 0 40px black;
  width:650px;
  height:400px;
  background:url('https://images.alphacoders.com/107/thumb-1920-107763.jpg')no-repeat center center;
  background-size:cover;
  display:flex;
  justify-content:flex-start;
}
#character{
  flex:2;
}
#character img{
  width:100%;
  height:100%;
}
#info{
  flex:3;
  text-transform:uppercase;
  text-align:center;
  color:red;
  text-shadow:0 0 20px red;
}
ul{
  list-style:none;
  padding:1em 2em;
  text-align:left;
}
ul li{
  margin:.50em 0;
}

/*Downloaded from https://www.codeseek.co/-J0hn-/swapi-with-angularjs-wJvXgE */
angular.module('app',[])
.controller('mainCtrl',['$scope','$http',function($scope,$http){
  $http({
    method: 'GET',
    url: 'https://swapi.co/api/people/4/?format=json'
  })
  .then(function(response){
    $scope.characterImg = 'http://vignette1.wikia.nocookie.net/deathbattle/images/f/f6/Darth_vader_9_render_by_aracnify-d92wamu.png/revision/latest?cb=20151211080755';
    $scope.character = response.data;
  })
  
  $http({
    method:'GET',
    url:'https://swapi.co/api/planets/1/?format=json'
  })
  .then(function(response){
    $scope.characterHomeWorld = response.data;
  })
  
}]);

Comments