<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>UI-router multiple named views</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body ng-app="app">
<div ui-view="list"></div>
<div ui-view="createedit"></div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/01abhishekjain/ui-router-multiple-named-views-WMGrOj */
body {
background: lightgrey;
}
/*Downloaded from https://www.codeseek.co/01abhishekjain/ui-router-multiple-named-views-WMGrOj */
var app = angular.module("app", ["ui.router"]);
app.controller("listCtrl", function(records, $scope, $rootScope, $state) {
$scope.records = records.getAll();
$scope.select = function(id) {
$rootScope.$broadcast("selected", id);
};
$scope.add = function() {
$state.go("create");
};
});
app.controller("createEditCtrl", function(records, $rootScope, $scope, $state) {
$scope.record = {};
$scope.intent = $state.current.name;
$rootScope.$on("selected", function($event, id) {
$scope.record = records.getOne(id);
});
$scope.cancel = function() {
if ($scope.intent === "view") $scope.record = {};
else $state.go("view");
};
$scope.submit = function() {
if ($scope.intent === "view")
records.edit($scope.record.fn, $scope.record.ln, $scope.record.id);
else records.addOne($scope.record.fn, $scope.record.ln);
$scope.cancel();
};
});
app.service("records", function() {
var store = [];
this.getAll = function() {
return store;
};
this.getOne = function(id) {
return angular.copy(store.find(record => record.id === id));
};
this.addOne = function(fn, ln) {
store.push({ fn, ln, id: store.length + 1 });
};
this.edit = function(fn, ln, id) {
var s = store.find(record => record.id === id);
s.fn = fn;
s.ln = ln;
};
});
app.config(function($stateProvider, $urlRouterProvider) {
var createEditState = {
template: `
<div ng-if="(intent==='view' && record.id) || (intent==='create')">
<h1>{{intent==='view'? 'Edit':'Create'}}</h1>
<input type="text" ng-model="record.fn" placeholder="first name">
<input type="text" ng-model="record.ln" placeholder="last name">
<button ng-click="cancel()">Cancel</button>
<button ng-click="submit()">Submit</button>
</div>`,
controller: "createEditCtrl"
};
$stateProvider
.state({
name: "view",
url: "/view",
views: {
list: {
template: `
<h1>List</h1><button ng-click="add()">ADD</button>
<div ng-repeat="r in records">
{{r.fn}}, {{r.ln}}, <button ng-click="select(r.id)">SELECT</button>
</div>
`,
controller: "listCtrl"
},
createedit: createEditState
}
})
.state({
name: "create",
views: {
createedit: createEditState
}
});
$urlRouterProvider.otherwise("view");
});