textAngular

textAngular

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.13/textAngular.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.8/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.8/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-aria.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.0/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.0/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.13/textAngular.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.13/textAngular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.13/textAngular.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.13/textAngularSetup.min.js"></script>
<div layout="column" layout-fill...

CSS

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
                display: none !important;
            }
            td, th {
                display: table-cell;
                vertical-align: inherit;
            }
            .header-h4 {
                padding-left: 8px;
                position: relative;
            }
            .panel-heading {
                padding: 2px 2px;
            }
            md-list-item.md-clickable:hover{
                background-color: #B3E5FC;
                color: #212121;
                font-weight: 600;
            }
            .md-table {
              min-width: 100%;
              border-collapse: collapse;
            }
            .md-table td, .md-table th {
              padding: 0;
              margin: 0;
            }
            .md-table th {
              border-bottom: 1px solid rgb(230,230,230);
              color: #757575;
              font-size: 1em;
              font-weight: 700;
              padding: 16px 16px 16px 0;
              text-align: center;
              white-space: nowrap;
              /* prevent ink ripple bleeding */
              position: relative;
            }
             .md-table th a{
              text-decoration: none;
              color: inherit;
            }
            .md-table th:focus {
              outline: none;
            }
            .md-table tbody tr:hover, .md-table tbody tr:focus {
              cursor:pointer;
              background-color:rgb(130,130,130);
            }
            .md-table .centerAligned {
              text-align: center;
            }
            .md-table .leftAligned {
              text-align: left;
            }
            .md-table .rightAligned {
              text-align: right;
            }
            .md-table tr th, .md-table tr td {
              border-bottom: solid 1px #DDDDDD;
            }
            .md-table tr td {
                 padding-left: 8px;
                ...

JavaScript

'use strict';
  angular.module('core', [])
    .factory('ProfileService', ['$http', '$resource', 'EndpointService',
      function profileServiceFactory($http, $resource, EndpointService) {
        var self = this;
        var baseProfileApi = EndpointService.getProfileServiceEndpoint();

        //mock until webapi is complete
        var get = function(username) {
          return {
            preferences: [

            ],
            defaultSite: "site1",
            timezone: "CST",
            appRoles: 'user'
          }
        }

        return {
          get: get
        }

      }
    ])
    .factory('UserService', ['$resource', 'ProfileService', 'EndpointService', '$q',
      function userServiceFactory($resource, ProfileService, EndpointService, $q) {

        var deferred = $q.defer();

        var self = this;
        var baseUserApi = EndpointService.getUserServiceEndpoint();

        var json = JSON.stringify({
        "id": 229,
        "accountId": 4,
        "email": "[email protected]",
        "emailConfirmed": false,
        "email2": "",
        "email2Confirmed": false,
        "password": null,
        "passwordSet": false,
        "rand": "",
        "firstName": "GI",
        "lastName": "Joe",
        "city": null,
        "state": null,
        "zip": null,
        "url": null,
        "bio": null,
        "securityQ1": "",
        "securityA1": "",
        "securityQ2": "",
        "securityA2": "",
        "isActive": true,
        "dts_Created": null,
        "dts_LastLogin": null,
        "isAdmin": true,
        "resetPassword": false,
        "username": null,
        "passwordHash": null,
        "securityStamp": null,
        "phoneNumber": null,
        "phoneNumberConfirmed": false,
        "twoFactorEnabled": false,
        "lockoutEndDateUtc": null,
        "lockoutEnabled": false,
        "accessFailedCount": 0,
        "sites": [{
          "id": 8,
          "accountId": 4,
          "name": "Original Testing Site",
 ...