UI-ROUTER basic navigation example

In this example below you will see how to do a UI-ROUTER basic navigation example with some HTML / CSS and Javascript

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


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

  <meta charset="UTF-8">
  <title>UI-ROUTER basic navigation example</title>
      <link rel="stylesheet" href="css/style.css">



  <html ng-app="myApp">

  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <!-- get bootstrap CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <!-- get AngularJS -->  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
  <!-- get Angular ui-router JS -->    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>  

<body ng-controller="Ctrl" class="padding">
  <button type="button" class="btn btn-primary" ng-click="navigate()">Navigate using $state</button>
  <button type="button" class="btn btn-primary" ui-sref="home">Navigate using ui-sref</button> 

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



/*Downloaded from https://www.codeseek.co/-kaik-/ui-router-basic-navigation-example-wMRYGE */
.padding {
  padding: 30px;

.btn {
  margin-bottom: 10px !important;

/*Downloaded from https://www.codeseek.co/-kaik-/ui-router-basic-navigation-example-wMRYGE */
angular.module('myApp', ['ui.router'])

.controller('Ctrl', function($scope, $state){
  $scope.navigate = function(){

			.state('home', {
				url: '/home.html',
				template: '<p>Hi world!</p>'