wikipedia viewer v2 // now with 100% more angularjs!

In this example below you will see how to do a wikipedia viewer v2 // now with 100% more angularjs! with some HTML / CSS and Javascript

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


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

  <meta charset="UTF-8">
  <title>wikipedia viewer v2 // now with 100% more angularjs!</title>
      <link rel="stylesheet" href="css/style.css">



  <div class="container">
  <a ui-sref="search">Buscar</a>
  <div ui-view></div>
  <script src=''></script>
<script src=''></script>
<script src=''></script>


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



/*Downloaded from */
  background-color: #2da;
  width: 100%;
  height: 100%;

  position: fixed;
  top: 50%;
  margin: auto;
  border: 2px solid orange;
  border-radius: 10px;

/*Downloaded from */
  angular.module("wikiViewer", ["ui.router"])
  .controller("searchCtrl", function($http, $scope, $state){
  .controller("resultsCtrl", function($scope, $state){
  .config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.when("", "/");
      name: "search",
      url: "/",
      controller: "searchCtrl",
      controllerAs: "Ctrl",
      template: "<div class='searchbox'> <form ng-submit='Ctrl.submit(query)'> <input type='text' ng-model='query'/> </form> </div>"
      name: "results",
      controller: "resultsCtrl",
      controllerAs: "Ctrl",
      template: "<div class='result' ng-repeat='result in results'><a href='{{result.url}}'><h3>{{result.title}}</h3><p>{{result.content}}</p></a></div>"