Question

我是Angular JS的新手，需要一些关于建立投资组合网站的指导：

main.html＆gt;对每件作品使用ng-repeat，目前每个ng-href 指向“工作”，但我希望每个工作都能得到自己的网址例如ng-href =“work＃{{title}}”
每个'作品'包含大约5-6个图像和文字。在HTML元素方面有所有类似，但图像和文本是不同的。所以也许模板可以在这里工作。

到目前为止，这是我的代码

index.js

  .config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'app/main/main.html',
    controller: 'MainCtrl'
  })     
  .state('work', {
    url: '/work',
    templateUrl: 'app/work/work.html',
    controller: 'WorkCtrl'
  });

$urlRouterProvider.otherwise('/');

}）;

main.html中

  <section ng-repeat="work in works | orderBy:'rank'" class="showcase {{work.class}}">
<a ng-href="#/work">
  <hgroup>
  <h4>{{work.title}}</h4>
  <p>{{work.sub}}</p>
  </hgroup>
</a>

main.controller.js

.controller('MainCtrl', function ($scope) {
$scope.works = [
  {
    'key': 'title-1',
    'title': 'A piece of work',
    'url': 'page1.html',
    'description': 'A long piece of text goes in here',
    'logo': 'image-1.png'
  },
  {
    'key': 'title-2',
    'title': 'A piece of work number 2',
    'url': 'page2.html',
    'description': 'A long piece of text goes in here',
    'logo': 'image-2.png'
  }, 
  ...
];
angular.forEach($scope.works, function(work) {
  work.rank = Math.random();
});

}）;

work.html 不知道如何构建一个可以从MainCtrl获取数据的模板，或者我应该使用JSON对象并从main.controller中删除数据并让它们都引用这些数据。无论如何，这个模板只需要显示一个组合工作，而不是像main.controller.js一样。

work.controller.js 不知道该怎么做，我想我需要配置一个获取每个项目ID和一个指令的路径，但同样，这将花费我几天时间来弄清楚。

希望你能帮忙。我是初学者，所以最值得赞赏的例子。再次感谢:)

Answer 1

从哪里获取两个模板的公共数据...... 有几个注意事项你会做一个ajax请求来获取数据吗？

否：创建工厂并将所有数据存储在那里

angular.module('mod').factory('worksData', function(){
   var works = []

   function getWorks(){
     return works;
   }

   return {
       getWorks: getWorks
   }   
 }

是：

使用ui-router'resolution'
为它创建一个抽象状态和一个控制器......
将数据存储到同一工厂

我不深入，因为它可能不是你需要的。不确定你的第二个问题是什么意思。

构建投资组合：使用ng-repeat但每个项目都有自己的页面

1 个答案: