<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.15" src="http://rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
var app = angular.module('testApp', ['ui.router'])
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state("section2", {
views: {
'section2view': { templateUrl: 'section2-template.html' }
}
})
.state("section2.child", {
templateUrl: 'section2child-template.html',
params: { p1: "test" }
})
}]);
app.controller('MainCtrl', function($scope){
});
app.controller('SubCtrl', function($scope, $state){
$scope.title = "This is section 1";
$scope.SwitchToSection2 = function(){
$("#Section2").show();
$("#Section1").hide();
$state.go('section2.child', { p1: "test"}, { location: false, reload: true });
}
});
app.controller('Section2Controller', function($scope, $state){
$scope.SwitchToSection1 = function(){
$("#Section1").show();
$("#Section2").hide();
}
});
app.controller('Section2ChildCtrl', function($scope, $state){
$scope.itemArray = [];
for (var i = 0; i < 1000; i++) {
$scope.itemArray.push({
prop1: "Property 1",
prop2: "Property 2",
prop3: "Property 3",
});
}
});
</script>
</head>
<body ng-app="testApp">
<div ng-controller="MainCtrl">
<div ng-controller="SubCtrl">
<div id="Section1">
<h1> {{title}}</h1>
<button ng-click="SwitchToSection2()">Switch to Section 2</button>
</div>
<div id="Section2" style="display:none;">
<div ui-view="section2view"></div>
</div>
</div>
</div>
</body>
</html>
// Code goes here
/* Styles go here */
<div ng-controller="SubCtrl">
<div id="Section1">
<h1> This is section 1</h1>
<button ng-click='SwitchToSection2()'>Switch to Section 2</button>
</div>
<div id="Section2">
<div ui-view="section2view"></div>
</div>
</div>
<div ng-controller="Section2Controller">
<div style="background-color:grey;padding:10px;" >
<h1>This is section 2</h1>
<button ng-click="SwitchToSection1()" style="margin-left:200px;">Switch To Section 1</button>
<div ui-view></div>
</div>
</div>'
<div ng-controller="Section2ChildCtrl">
<h2>
This is child section
</h2>
<div>
<ul>
<li ng-repeat="item in itemArray" style="margin:2px;background-color:#ff6a00">
<div>{{::item.prop1}}</div>
<div>{{::item.prop2}}</div>
<div>{{::item.prop3}}</div>
</li>
</ul>
</div>
</div>