Example
index.html
<html>
<head>
<title>Angular-UI Router Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
</head>
<body ui-view="mainView"> <!-- Defining a container for our view -->
</body>
</html>
script.js
var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', function($stateProvider){
$stateProvider.state('home', { // Creating a state called 'home'
url: '', // An empty URL means that this state will be loaded on the main URL when no other state is called
views: {
'mainView': { // Section for our view-container that we defined in the HTML
template: '<h1>It works!</h1>' // Setting a template for this view
/*templateUrl: '../templates/home.html'*/ //templateUrl would load the file and uses it's content as the template
}
}
});
}])
