javascriptcssangularjsng-view
ng-view not following CSS of 1 View
I have banged my head against my keyboard for a small formatting problem.
I am using ng-view and it seems to show the index view (main view using "#/" route) without the proper masonry CSS formatting, but it does show the other views (which are not in masonry format) properly. Here's the code:
Unformatted when using Ng-view:
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="description" content="This is an example of a meta description. This will often show up in search results.">
<title>ROBTG4</title>
<link rel="shortcut icon" href="img/favicon.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- /Mobile Icon (Home Screen Icon) -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900&subset=latin,latin-ext">
<link rel="stylesheet" href="css/slick.css"/>
<link rel="stylesheet" href="css/revolution-slider.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/min/font-awesome.min.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/widgets.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- /Include CSS Files -->
<!-- SCRIPT -->
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="js/app.js"></script>
<!-- END SCRIPT -->
</head>
<body class="nav-side" ng-controller="mainController">
<div class="site" >
<!-- SVGs -->
<svg style="display: none;">
<symbol viewBox="0 0 96 96" id="shape-arrow-left-light">
<title>arrow-left-light</title>
<path d="M84,44H21.656l21.456-21.456c1.562-1.562,1.562-4.095,0.001-5.657c-1.562-1.562-4.096-1.562-5.658,0L9.172,45.171l0,0 c-0.186,0.186-0.352,0.391-0.498,0.61c-0.067,0.101-0.114,0.21-0.171,0.315c-0.067,0.124-0.142,0.242-0.196,0.373 c-0.056,0.135-0.088,0.276-0.129,0.416c-0.032,0.111-0.075,0.217-0.098,0.331C8.028,47.475,8,47.737,8,48l0,0 c0,0.003,0.001,0.005,0.001,0.008c0,0.259,0.027,0.519,0.078,0.774c0.024,0.121,0.069,0.232,0.104,0.349 c0.039,0.133,0.07,0.268,0.123,0.397c0.058,0.139,0.136,0.265,0.208,0.396c0.054,0.098,0.096,0.198,0.159,0.292 c0.147,0.221,0.314,0.427,0.501,0.614l28.282,28.281c1.562,1.562,4.095,1.562,5.657,0.001c1.562-1.562,1.562-4.096,0-5.658 L21.657,52H84c2.209,0,4-1.791,4-4S86.209,44,84,44z"/>
</symbol>
<symbol viewBox="0 0 96 96" id="shape-arrow-left">
<title>arrow-left</title>
<path d="M84,44H21.656l21.456-21.456c1.562-1.562,1.562-4.095,0.001-5.657c-1.562-1.562-4.096-1.562-5.658,0L9.172,45.171l0,0 c-0.186,0.186-0.352,0.391-0.498,0.61c-0.067,0.101-0.114,0.21-0.171,0.315c-0.067,0.124-0.142,0.242-0.196,0.373 c-0.056,0.135-0.088,0.276-0.129,0.416c-0.032,0.111-0.075,0.217-0.098,0.331C8.028,47.475,8,47.737,8,48l0,0 c0,0.003,0.001,0.005,0.001,0.008c0,0.259,0.027,0.519,0.078,0.774c0.024,0.121,0.069,0.232,0.104,0.349 c0.039,0.133,0.07,0.268,0.123,0.397c0.058,0.139,0.136,0.265,0.208,0.396c0.054,0.098,0.096,0.198,0.159,0.292 c0.147,0.221,0.314,0.427,0.501,0.614l28.282,28.281c1.562,1.562,4.095,1.562,5.657,0.001c1.562-1.562,1.562-4.096,0-5.658 L21.657,52H84c2.209,0,4-1.791,4-4S86.209,44,84,44z"/>
</symbol>
<symbol viewBox="0 0 96 96" id="shape-arrow-right-light">
<title>arrow-right-light</title>
<path d="M12,52h62.344L52.888,73.456c-1.562,1.562-1.562,4.095-0.001,5.656c1.562,1.562,4.096,1.562,5.658,0l28.283-28.284l0,0 c0.186-0.186,0.352-0.391,0.498-0.609c0.067-0.101,0.114-0.21,0.172-0.315c0.066-0.124,0.142-0.242,0.195-0.373 c0.057-0.135,0.089-0.275,0.129-0.415c0.033-0.111,0.076-0.217,0.099-0.331C87.973,48.525,88,48.263,88,48l0,0 c0-0.003-0.001-0.006-0.001-0.009c-0.001-0.259-0.027-0.519-0.078-0.774c-0.024-0.12-0.069-0.231-0.104-0.349 c-0.039-0.133-0.069-0.268-0.123-0.397c-0.058-0.139-0.136-0.265-0.208-0.396c-0.054-0.098-0.097-0.198-0.159-0.292 c-0.146-0.221-0.314-0.427-0.501-0.614L58.544,16.888c-1.562-1.562-4.095-1.562-5.657-0.001c-1.562,1.562-1.562,4.095,0,5.658 L74.343,44L12,44c-2.209,0-4,1.791-4,4C8,50.209,9.791,52,12,52z"/>
</symbol>
<symbol viewBox="0 0 96 96" id="shape-arrow-right">
<title>arrow-right</title>
<path d="M12,52h62.344L52.888,73.456c-1.562,1.562-1.562,4.095-0.001,5.656c1.562,1.562,4.096,1.562,5.658,0l28.283-28.284l0,0 c0.186-0.186,0.352-0.391,0.498-0.609c0.067-0.101,0.114-0.21,0.172-0.315c0.066-0.124,0.142-0.242,0.195-0.373 c0.057-0.135,0.089-0.275,0.129-0.415c0.033-0.111,0.076-0.217,0.099-0.331C87.973,48.525,88,48.263,88,48l0,0 c0-0.003-0.001-0.006-0.001-0.009c-0.001-0.259-0.027-0.519-0.078-0.774c-0.024-0.12-0.069-0.231-0.104-0.349 c-0.039-0.133-0.069-0.268-0.123-0.397c-0.058-0.139-0.136-0.265-0.208-0.396c-0.054-0.098-0.097-0.198-0.159-0.292 c-0.146-0.221-0.314-0.427-0.501-0.614L58.544,16.888c-1.562-1.562-4.095-1.562-5.657-0.001c-1.562,1.562-1.562,4.095,0,5.658 L74.343,44L12,44c-2.209,0-4,1.791-4,4C8,50.209,9.791,52,12,52z"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-arrow-thin-left">
<title>arrow-thin-left</title>
<g>
<polyline fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="37,15 20,32
37,49 "/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-arrow-thin-right">
<title>arrow-thin-right</title>
<g>
<polyline fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="27,15 44,32
27,49 "/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-browser-search">
<title>browser-search</title>
<rect x="1" y="7" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="50"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="1" y1="15" x2="63" y2="15"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="10" y1="11" x2="6" y2="11"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="18" y1="11" x2="14" y2="11"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="26" y1="11" x2="22" y2="11"/>
<g>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="29" cy="33" r="6"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="33" y1="37" x2="41" y2="45"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-cup">
<title>cup</title>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M16,27c0,4.418,6.059,8,16,8s16-3.582,16-8V1H16V27z
"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="20" y1="63" x2="44" y2="63"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="32" y1="35" x2="32" y2="63"/>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M16,7H7c0,0,0,9,9,9"/>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M48,7h9c0,0,0,9-9,9"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-heart">
<title>heart</title>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M1,21c0,20,31,38,31,38s31-18,31-38
c0-8.285-6-16-15-16c-8.285,0-16,5.715-16,14c0-8.285-7.715-14-16-14C7,5,1,12.715,1,21z"/>
</symbol>
<symbol viewBox="0 0 28 15" id="shape-indicator">
<title>indicator</title>
<path class="st0" fill="#e8e8e8" d="M13.5,0L15,1.4L1.4,15L0,13.5L13.5,0z"/>
<path class="st0" fill="#e8e8e8" d="M28,13.5L26.5,15L13,1.4L14.4,0L28,13.5z"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-laptop">
<title>laptop</title>
<g>
<rect x="8" y="12" fill="none" stroke-width="2" stroke-miterlimit="10" width="48" height="34"/>
<rect x="1" y="46" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="6"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="34" y1="16" x2="30" y2="16"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-layers">
<title>layers</title>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="18,26.066 2,33 32,45 62,33 46,26.067 "/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="18,39.066 2,46 32,58 62,46 46,39.067 "/>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="32,32 62,20 32,7 2,20 "/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-layout-4boxes">
<title>layout-4boxes</title>
<rect x="1" y="1" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="14"/>
<rect x="1" y="39" fill="none" stroke-width="2" stroke-miterlimit="10" width="31" height="24"/>
<rect x="32" y="39" fill="none" stroke-width="2" stroke-miterlimit="10" width="31" height="24"/>
<rect x="1" y="15" fill="none" stroke-width="2" stroke-miterlimit="10" width="31" height="24"/>
<rect x="32" y="15" fill="none" stroke-width="2" stroke-miterlimit="10" width="31" height="24"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-layout-sideleft">
<title>layout-sideleft</title>
<rect x="1" y="1" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="14"/>
<rect x="1" y="15" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="48"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="22" y1="15" x2="22" y2="63"/>
</symbol>
<symbol viewBox="0 0 289.3 286.2" id="shape-logo">
<title>logo</title>
<style type="text/css">
<![CDATA[ .st0{fill-rule:evenodd;clip-rule:evenodd;} ]]>
</style>
<path class="st0" d="M267.1,143.3L267.1,143.3L267.1,143.3z M199.6,63.3c-14.3-9.2-30.7-15.2-47.7-16.2c-34.3-0.1-68.7-0.1-103,0
c-0.3,57.1-0.1,114.1-0.1,171.2c-0.1,9,0.2,18.1-0.2,27.2l-23.4-22.8c0-0.3,0-0.6-0.1-0.9c-0.3-5.3-0.1-10.6-0.1-15.9
C25,145,24.7,84.1,25,23.3h122.1c1.1,0,2.2,0,3.3,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0c64.4,1.9,116.5,55.1,116.5,120
c0,51.7-33.1,96-79.2,112.8c-0.2,0.1-0.4,0.2-0.6,0.2c-0.9,0.3-1.8,0.6-2.7,0.9c0,0,0,0,0,0c-3,1-6,1.8-9,2.5c-4,1-8.1,1.8-12.2,2.4
c0,0,0,0,0,0c-2.3,0.4-4.7,0.7-7,1c-1.7,0-3.4,0-5.1,0c-1.4,0-2.7,0.1-4.1,0.1h-8.7c-6,0-12,0-17.9,0c-8.9,0-17.9,0-26.8,0
c-7,0-13.9,0-20.9-0.1v-0.7v-0.7v-0.7v-0.7v-0.7v-189h73.5c40.4,0,73.4,33.1,73.4,73.4c0,30-18.2,55.9-44.1,67.3
c-9,4-19,6.2-29.4,6.2h-25.7v-24.3V94.9l-23.9,0l0,122.7l0,21.8c8,0.1,15.9,0.1,23.9,0.1c11.6,0,23.2,0,34.8-0.1
c7-0.6,13.8-2,20.4-4.2c21.5-7.1,40.3-22,52.3-41.3c7.7-12.9,13.1-27.6,13.6-42.7c0.8-4.9,1-10,0.2-15
C240,107.2,223.5,79.8,199.6,63.3L199.6,63.3z M25,255l8.4,8.3l23.3,22.9h63.7h25.7c10.1,0,19.9-1.1,29.4-3.1
c64.7-13.7,113.7-71.4,113.7-140.1C289.3,64.4,224.9,0,146.2,0H0c0.1,76.6,0,153.2,0,229.8c0,0.2,0,0.4,0,0.6L25,255z"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-mail-heart">
<title>mail-heart</title>
<g>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="1,26 32,45.434 63,26 "/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="11.334,21.667 1,26 1,63 63,63 63,26
63,26 52.666,21.667 "/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="11,32 11,1 53,1 53,32 "/>
</g>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M22,19c0,6.666,10,12,10,12s10-5.334,10-12
c0-2.762-2-5-5-5c-2.762,0-5,2.238-5,5c0-2.762-2.238-5-5-5C24,14,22,16.238,22,19z"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-mail">
<title>mail</title>
<g>
<rect x="1" y="13" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="37"/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="1,13 32,33 63,13 "/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-map-pin">
<title>map-pin</title>
<g>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="32" cy="22" r="6"/>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M53,22.735C52.948,10.73,43.599,1,32,1
s-21,9.73-21,21.735C11,38.271,31.965,63,31.965,63S53.069,38.271,53,22.735z"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-mixer">
<title>mixer</title>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="12" y1="19" x2="12" y2="64"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="52" y1="0" x2="52" y2="45"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="32" y1="38" x2="32" y2="64"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="32" y1="0" x2="32" y2="26"/>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="12" cy="13" r="6"/>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="52" cy="51" r="6"/>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="32" cy="32" r="6"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="12" y1="0" x2="12" y2="7"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="52" y1="57" x2="52" y2="64"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-mouse">
<title>mouse</title>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M48,17c0-8.836-7.164-16-16-16S16,8.164,16,17v30
c0,8.836,7.164,16,16,16s16-7.164,16-16V17z"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="32" y1="1" x2="32" y2="21"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="16" y1="21" x2="48" y2="21"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-nav">
<title>nav</title>
<line fill="none" stroke-width="3" stroke-miterlimit="10" x1="0" y1="40" x2="64" y2="40"/>
<line fill="none" stroke-width="3" stroke-miterlimit="10" x1="0" y1="32" x2="64" y2="32"/>
<line fill="none" stroke-width="3" stroke-miterlimit="10" x1="0" y1="24" x2="64" y2="24"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-paintbucket">
<title>paintbucket</title>
<polygon fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="3,38 28,63 54,37
61,36 33,8 "/>
<path fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M32,27V6
c0-2.762-2.238-5-5-5s-5,2.238-5,5v13"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-pencil-ruler">
<title>pencil-ruler</title>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="1,63 1,2 62,63 "/>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="14,54 14,30 38,54 "/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="8" y1="22" x2="2" y2="22"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="6" y1="30" x2="2" y2="30"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="8" y1="38" x2="2" y2="38"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="6" y1="46" x2="2" y2="46"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="8" y1="54" x2="2" y2="54"/>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="25,1 19,7 55,43 63,45 61,37 "/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="25" y1="13" x2="31" y2="7"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-phone">
<title>phone</title>
<g>
<rect x="16" y="1" fill="none" stroke-width="2" stroke-miterlimit="10" width="32" height="62"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="28" y1="5" x2="36" y2="5"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="16" y1="51" x2="48" y2="51"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="16" y1="9" x2="48" y2="9"/>
<circle fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" cx="32" cy="57" r="2"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-picture">
<title>picture</title>
<g>
<rect x="1" y="11" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="42"/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="1,47 24,27 36,39 42,31 63,49 "/>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="51" cy="22" r="5"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-play">
<title>play</title>
<rect x="1" y="1" fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" width="62" height="62"/>
<g>
<polygon fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="26,21 42,32
26,43 "/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-video">
<title>video</title>
<g>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="46,30 63,20 63,52 46,42 46,52 1,52 1,20
46,20 "/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="6" y1="28" x2="10" y2="28"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="14" y1="28" x2="18" y2="28"/>
<rect x="7" y="36" fill="none" stroke-width="2" stroke-miterlimit="10" width="18" height="10"/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="6,12 32,12 40,20 "/>
</g>
</symbol>
</svg>
<!-- HEADER -->
<div class="preloader">
<!--
<svg>
<use xlink:href="#shape-logo"></use>
</svg>
-->
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/23878-200.png" >
</div>
<header class="site-header">
<a href="#/" class="site-logo" style="width:189; height:162;">
<!--
<svg>
<use xlink:href="#shape-logo"></use>
</svg>
-->
<img src="images/logos/logo-full2.png">
</a>
<nav class="nav-menu" role="navigation">
<ul>
<li class="active"><a href="#/">Home</a></li>
<li ><a href="#/about">About</a></li>
<li ><a href="#/blog">Blog</a></li>
<li ><a href="#/contact">Contact</a></li>
</ul>
</nav>
<button class="nav-toggle">
<svg>
<use xlink:href="#shape-nav"></use>
</svg>
</button>
<ul class="nav-social">
<li><a href="https://www.facebook.com/rtgiv"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com/robtg4"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.linkedin.com/in/robert-greenfield-32ab5056?trk=nav_responsive_tab_profile"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://www.instagram.com/robtg4/"><i class="fa fa-instagram"></i></a></li>
</ul>
</header>
<!-- BODY AND DYNAMIC VIEWS -->
<div ng-view></div>
<!-- END BODY DYNAMIC VIEW -->
<!-- Footer -->
<footer class="site-footer">
<div class="footer-content">
<ul class="contact-info">
<li>
<svg class="mail">
<use xlink:href="#shape-mail"></use>
</svg>
<a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
</div>
<div class="copyright">Copyright © Made with Love & Caffeine by Gfxbucket. All Rights Reserved.</div>
</footer>
</div>
<!-- Scripts -->
<!-- OTHER SCRIPT -->
<script type="text/js">
jQuery(document).ready(function($) {
$('#rev-slider-1').show().revolution({
delay: 9000,
startwidth: 1170,
startheight: 500,
hideThumbs: 200,
fullScreen: "on",
fullWidth: "off",
touchenabled: "on",
onHoverStop: "on",
autoHeight:"off",
forceFullWidth:"off",
navigationType: "none",
hideTimerBar:"on",
});
$('#instagram').instagram({
userId: '269801886',
accessToken: '1554589859.71ed503.20f8b92a2d31453a97db5384e33ce3f9',
clientId: '71ed5031106a4b3a9f9ff533898d4133',
count: '999',
updateInterval: 960*60*2,
image_size: 'standard_resolution'
});
});
</script>
<script src="js/libraries/jquery.min.js"></script>
<script src="js/libraries/isotope.min.js"></script>
<script src="js/libraries/imagesloaded.min.js"></script>
<script src="js/libraries/jquery.parallax.min.js"></script>
<script src="js/libraries/jquery.mb.YTPlayer.js"></script>
<script src="js/libraries/slick.min.js"></script>
<script src="js/libraries/smoothScroll.min.js"></script>
<script src="js/libraries/jquery.validate.min.js"></script>
<script src="js/theme.js"></script>
<script src="js/libraries/jquery.themepunch.tools.min.js"></script>
<script src="js/libraries/jquery.themepunch.revolution.min.js"></script>
<script src="js/libraries/instagram.min.js"></script>
<!-- END OTHER SCRIPT-->
</body>
</html>
The site becomes formatted when replacing with the main.html view's code (of course, this makes it impossible to show the other routes since ng-view no longer exists, but it shows that the problem is caused by ng-view itself/angular, as I have directly linked all css and js files to the main.html view as well).
This is main.html - what I am trying to show in masonry through ng-view.
<!-- Portfolio -->
<section id="portfolio" class="element" >
<div class="portfolio portfolio-masonry portfolio-style-2">
<article class="portfolio-item web-design app-development">
<a href="#/bbum">
<img src="images/portfolio/portfolio-4.jpg" alt="Portfolio item 4">
<div class="hover">
<div class="hover-content">
<h5>#BBUM Movement</h5>
<span>Hashtag Activism & Social Media</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item portfolio-large branding web-design">
<a href="#/nomsy">
<img src="images/portfolio/portfolio-5.jpg" alt="Portfolio item 5">
<div class="hover">
<div class="hover-content">
<h5>Nomsy</h5>
<span>Food Content Discovery Tailored to Your Diet</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item app-development photography">
<a href="#/swyft">
<img src="images/portfolio/portfolio-6.jpg" alt="Portfolio item 6">
<div class="hover">
<div class="hover-content">
<h5>Swyft</h5>
<span>Safe, Nightly University Transportation</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item branding photography">
<a href="#/bitcoin">
<img src="images/portfolio/portfolio-7.jpg" alt="Portfolio item 7">
<div class="hover">
<div class="hover-content">
<h5>Bitcoin Trading</h5>
<span>Trading Against the Blockchain</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item web-design app-development">
<a href="#/blacklist">
<img src="images/portfolio/portfolio-9.jpg" alt="Portfolio item 9">
<div class="hover">
<div class="hover-content">
<h5>Blaclist</h5>
<span>Redefining Mobile, Black Media</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item web-design app-development">
<a href="#/portfolio-post">
<img src="images/portfolio/portfolio-11.jpg" alt="Portfolio item 11">
<div class="hover">
<div class="hover-content">
<h5>Learning More</h5>
<span>Yearning for Mentorship</span>
</div>
</div>
</a>
</article>
</div>
</section>
<script src="js/libraries/jquery.min.js"></script>
<script src="js/libraries/isotope.min.js"></script>
<script src="js/libraries/imagesloaded.min.js"></script>
<script src="js/libraries/jquery.parallax.min.js"></script>
<script src="js/libraries/jquery.mb.YTPlayer.js"></script>
<script src="js/libraries/slick.min.js"></script>
<script src="js/libraries/smoothScroll.min.js"></script>
<script src="js/libraries/jquery.validate.min.js"></script>
<script src="js/theme.js"></script>
<script src="js/libraries/jquery.themepunch.tools.min.js"></script>
<script src="js/libraries/jquery.themepunch.revolution.min.js"></script>
<script src="js/libraries/instagram.min.js"></script>
Any thoughts on how to get ng-view to process main.html view correctly? Again all other views show up perfectly.
Solution
If by masonry formatting you means that you are trying to use the library, seems you are missing the reference to masonry js file.
Add this somewhere in your html page along with your other script tags:
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
- Cannot move to previous slide in a JavaScript Slider
- How do I import Bootstrap in SvelteKit, Recommended Way?
- Randomly select 2 elements from an array where each element is selected 4 times and the pairs are not duplicated
- Why is submit button getting enabled even when required inputs are empty?
- Javascript: flatten array of arrays
- Display new window fullscreen on second monitor with Javascript
- How do you add/remove hidden in <p hidden> with JavaScript
- JavaScript Promises - reject vs. throw
- In TypeScript 5.6+, `Buffer` is not assignable to `ArrayBufferView` or `Uint8Array | DataView`
- Set a default parameter value for a JavaScript function
- Object.hasOwn() vs Object.prototype.hasOwnProperty()
- ServiceWorker Update loop - Create react app
- How to disable a ts rule for a specific line?
- Is it possible to tell esbuild to ignore top-level await when bundling to node12 target?
- Prevent Image Scaling on HighDPI Displays
- Google OAuth2 giving "Invalid grant_type" error
- Observe attribute changes using Alpine.js
- Canceling a react-query mutation
- How to create a writable byte stream I can evaluate?
- Is there any way to create an shortcut desktop to a Node.js (npm) application?
- How can google.maps.geometry be undefined?
- Argument of type x is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, PropsWithoutRef<P>>'
- Why does Promise.all() allow non Promise objects?
- Make sure that using this pseudorandom number generator is safe here
- How to embed a database into my vuejs app?
- fetch data with sort not updating after build
- Async inside filter function in JavaScript
- Exception: (String,(class),String) don't match the method signature for CalendarApp.Calendar.createEvent
- How is indexedDB conceptually different from HTML5 local storage?
- chart js how to fill legend box with colour