在单页 Angular 应用程序中更改视图

Question

我是 Angular 的新手，已经建立了一个非常基本的网站来托管我的一些艺术作品。目前我有一个带有 <a ng-href> 的 HTML 页面（主页），单击该页面时，会加载另一个 HTML 页面，其中包含我的所有工作。所以我有两个 HTML 页面，这意味着必须在我的网站上加载两次。这个不太实用

这是我主页上的HTML。 <a ng-href> 包含在自定义指令 <front-page>:

中

<div ng-controller="artCtrl" class="content">

  <front-page info="image_1"></front-page>

</div>

<front-page> 指令：

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

第二个 HTML 页面上的内容也在自定义指令中，如下所示：

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

我希望能够在主页上的 <a ng-href> 上 ng-click 并在我的第二页上的指令中呈现 HTML ，所有这些都在同一页面上（所以，无需加载整个其他页面）。但我不知道最好的方法是什么。对于这样一个简单的站点，路由似乎有点不必要，我不确定使用 ng-show 或 ng-hide 是否适合于此。

如果您对这个问题感到困惑，请告诉我，我将不胜感激。

Answer 1

请看http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

在 angular http://github.com/angular-ui/ui-router/wiki

中还有一个可用的路由选项

在单页 Angular 应用程序中更改视图

Changing a view in single page Angular app

html

javascript

views

angularjs