UI-router multiple named views

In this example below you will see how to do a UI-router multiple named views with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 01abhishekjain, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 01abhishekjain ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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");
});

Comments