<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.1/semantic.min.css">
<style type="text/css">
body {
background-color: #FFFFFF;
}
.ui.menu .item img.logo {
margin-right: 1.5em;
}
.main.container {
margin-top: 7em;
}
.wireframe {
margin-top: 2em;
}
.ui.footer.segment {
margin: 5em 0em 0em;
padding: 5em 0em;
}
.header-bar-red{
background-color: #8a1818 !important;
}
</style>
</head>
<body class="">
<div class="ui fixed header-bar-red menu">
<div class="ui container">
<a href="#" class="header item">
<img class="logo" src="http://semantic-ui.com/examples/assets/images/logo.png">
Project Name
</a>
<a href="#" class="item" ui-sref="stats">stats</a>
<a href="#" class="item" ui-sref="route1">Route 1</a>
<a href="#" class="item" ui-sref="route2">Route 2</a>
<div class="ui simple dropdown item">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="#">Link Item</a>
<a class="item" href="#">Link Item</a>
<div class="divider"></div>
<div class="header">Header Item</div>
<div class="item">
<i class="dropdown icon"></i>
Sub Menu
<div class="menu">
<a class="item" href="#">Link Item</a>
<a class="item" href="#">Link Item</a>
</div>
</div>
<a class="item" href="#">Link Item</a>
</div>
</div>
</div>
</div>
<div class="ui main text container">
<div class="row">
<div class="column">
<div class="ui message">
<h1 class="ui header">Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<a class="ui blue button">Learn more »</a>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
</div>
<!--Sematic UI JS-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.1/semantic.min.js"></script>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/anunciaVeiculo")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html"
})
.state('route1.list', {
url: "/list",
templateUrl: "route1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
.state('route2.list', {
url: "/list",
templateUrl: "route2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
})
.state('stats', {
url: "/stats",
templateUrl: "stats.html"
})
.state('anunciaVeiculo', {
url: "/anunciaVeiculo",
templateUrl: "anunciaVeiculo.html"
})
.state('anunciaVeiculo.passo2', {
url: "/passo2",
templateUrl: "anunciaVeiculo_Passo2.html"
})
})
</script>
</body>
</html>
<h1>Route 1</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<div ui-view></div>
<h1>Route 2</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<div ui-view></div>
<h3>List of Route 2 Things</h3>
<ul>
<li ng-repeat="thing in things">{{thing}}</li>
</ul>
<h3>List of Route 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<br>
<div class="ui four statistics">
<div class="statistic">
<div class="value">
22
</div>
<div class="label">
Saves
</div>
</div>
<div class="statistic">
<div class="text value">
Three<br>
Thousand
</div>
<div class="label">
Signups
</div>
</div>
<div class="statistic">
<div class="value">
<i class="plane icon"></i> 5
</div>
<div class="label">
Flights
</div>
</div>
<div class="statistic">
<div class="value">
<img src="http://semantic-ui.com/images/avatar/small/joe.jpg" class="ui circular inline image">
42
</div>
<div class="label">
Team Members
</div>
</div>
</div>
<div class="ui items">
<div class="item">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<span>Description</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
Additional Details
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<span>Description</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
Additional Details
</div>
</div>
</div>
<table class="ui very basic collapsing celled table">
<thead>
<tr><th>Employee</th>
<th>Correct Guesses</th>
</tr></thead>
<tbody>
<tr>
<td>
<h4 class="ui image header">
<img src="http://semantic-ui.com//images/avatar2/small/lena.png" class="ui mini rounded image">
<div class="content">
Lena
<div class="sub header">Human Resources
</div>
</div>
</h4></td>
<td>
22
</td>
</tr>
<tr>
<td>
<h4 class="ui image header">
<img src="http://semantic-ui.com//images/avatar2/small/matthew.png" class="ui mini rounded image">
<div class="content">
Matthew
<div class="sub header">Fabric Design
</div>
</div>
</h4></td>
<td>
15
</td>
</tr>
<tr>
<td>
<h4 class="ui image header">
<img src="http://semantic-ui.com//images/avatar2/small/lindsay.png" class="ui mini rounded image">
<div class="content">
Lindsay
<div class="sub header">Entertainment
</div>
</div>
</h4></td>
<td>
12
</td>
</tr>
<tr>
<td>
<h4 class="ui image header">
<img src="http://semantic-ui.com//images/avatar2/small/mark.png" class="ui mini rounded image">
<div class="content">
Mark
<div class="sub header">Executive
</div>
</div>
</h4></td>
<td>
11
</td>
</tr>
</tbody>
</table>
</div>
<h1>anunciaVeiculo</h1>
<a href="#/anunciaVeiculo/passo2">
passo 2
</a>
<div ui-view></div>
<h2>PAsso 2</h2>