Changing a view in single page Angular app

I'm very new to Angular and have built a very basic site to host some of my art on. At the moment I have an HTML page (homepage) with an <a ng-href> which, when clicked, loads another HTML page with all my work on it. So I have two HTML pages which means things have to load twice on my site. This is not very practical.

This is the HTML on my homepage. The <a ng-href> is contained inside of the custom directive <front-page>:

<div ng-controller="artCtrl" class="content">    <front-page info="image_1"></front-page>  </div> 

<front-page> directive:

<a ng-href="work.html">  <img ng-src="{{ info.images }}" alt="Image not found" width="40%" height="40%"> </a> 

The content on the second HTML page is also inside of a custom directive which looks like this:

<div ng-repeat="x in info">  <img class="image" ng-src="{{ x.image }}"></img>  <p class="name">{{ x.name }}</p> <div> 

I want to be able to ng-click on the <a ng-href> on the homepage and render the HTML in the directive on my second page, all on the same page (so, without loading a whole other page). But I have no idea what the best way to do this would be. Routing seems a bit unnecessary for such a simple site and I'm not sure if using ng-show or ng-hide would be suited for this.

Please let me know if you're confused by this question, I would really appreciate any help.

Replay

Category: javascript Time: 2016-07-31 Views: 11

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.116 (s). 12 q(s)