Javascript Yeoman Angular：视图上的多个控制器

我肯定我做错了什么，也许尝试在一个视图上插入多个控制器是不好的（至少我觉得可能是不好的），但我想得到一个更好的方法的意见

我的档案如下：

app.js

angular
  .module('gemstoreApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'    <---- THIS is where I wish to insert a panelController
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

angular.module('gemstoreApp')
  .controller('MainCtrl', function ($scope) {

    var gems = [
      {
        name: 'Gem1',
        price: 2.95,
        soldOut: false,
        images: [
          'img1.png'
        ],
        description: 'Some description'
      }, {
        name: 'Gem2',
        price: 1.00,
        soldOut: true,
        images: [
          'img2.png'
        ],
        description: 'Some tetra description'
      }, {
        name: 'Gem3',
        price: 5.00,
        soldOut: false,
        images: [
          'img3.png'
        ],
        description: 'Some tetra description'
      }
    ]

    $scope.products = gems;

  });

main.html

    <div>
        <ul>
            <div ng-repeat="product in products">
                <li>
                <p>{{ product.name }} - {{ product.price | currency }} - {{ product.description }}</p>
                <img ng-src="{{ product.images[0] }}" alt="">
                <button ng-hide="product.soldOut" class='btn btn-primary'>Add to Cart</button>
                <button ng-show="product.soldOut" class='btn btn-danger'>Sold Out!!!</button>
                </li>

<!== THE "tab" code from here is dirty .. and I'd like ot move it to its own controller ==>
                <section ng-init="tab = 1"> 
                    <ul class="nav nav-pills">
                        <li ng-class="{ active:tab === 1}"><a href ng-click="tab = 1">Description</a></li>
                        <li ng-class="{ active:tab === 2}"><a href ng-click="tab = 2">Specifications</a></li>
                        <li ng-class="{ active:tab === 3}"><a href ng-click="tab = 3">Reviews</a></li>
                    </ul>
                </section>
                <div id="panel" ng-show="tab == 1">
                    <h4>Description</h4>
                    <blockquote> {{ product.description }} </blockquote>
                </div>
                <div id="panel" ng-show="tab == 2">
                    <h4>Specification</h4>
                    <blockquote>Nothing yet</blockquote>
                </div>
                <div id="panel" ng-show="tab == 3">
                    <h4>Reviews</h4>
                    <blockquote>Nothing yet</blockquote>
                </div>
            </div>
        </ul>
    </div>

{{product.name}-{{product.price | currency}}-{{product.description}

添加到购物车
卖完了！！！

panelCtrl

）并在此处使用。所以我可以这样做：

---

对于那些熟悉的人，我将阅读codeschool提供的Angular教程，并尝试使用Yeoman来完成此操作。

您可以将另一个控制器直接放入html文件中，如：

然而，也许为您的面板创建一个指令可能是一个更好的解决方案？指向的指令可以有控制器。这将允许您在更多视图中使用面板

在一个视图中拥有多个控制器本身并不是“坏习惯”。但这并不意味着每次使用多个控制器创建视图都是“良好实践”。在这种情况下，将面板包装成指令似乎是最好的

附言：事实上，你已经使用了约曼没有什么区别：）

更新评论：

---

在决定angular应用程序的结构时，有一些非常好的资源，可以在答案中找到一些答案。这也是由社区驱动的。

感谢Kiril的回复。约曼没有什么不同，这是有道理的。这只是为了让约曼熟悉的人更容易识别代码结构。re：控制器：我应该在

main.js

中定义它还是在它自己的文件中定义它？这方面的最佳做法是什么。“你能给我一个大概的轮廓，告诉我在构建代码时应该如何思考吗？”Prashant在我的答案中添加了一些参考资料。