var app = angular.module('plunker', ['ui.router']);
app.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state("viewA", {
url:'/viewA',
templateUrl: 'view.html',
controller: 'ctrlA',
})
.state("viewB", {
url:'/viewB',
templateUrl: 'view.html',
controller: 'ctrlB',
});
}
]);
app.controller('MainCtrl', function($scope, $location) {});
app.controller('ctrlA', function($scope) {
$scope.val = 'CtrlA';
});
app.controller('ctrlB', function($scope) {
$scope.val = 'CtrlB';
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<a ui-sref="viewA">View A</a>
<a ui-sref="viewB">View B</a>
<div ui-view></div>
</body>
</html>
/* Put your css in here */
a {
color: blue;
cursor: pointer;
text-decoration: underline;
}
ul li ul {
display: none;
}
.open {
display: block;
}
{{val}}