在AngularJS可重用的组件 [英] Reusable components in AngularJS

问题描述

我是新来的 AngularJS 和喜欢它至今。有一个问题我无法找到任何文件是这样的：

我有一个页面与经常性的HTML，与子类都具有相同的HTML模板类别页面。什么我目前做的是所有的Json一下子这是一种缓慢的具有单个控制器的负载。我想它分解为子视图（类似的ASP.NET MVC的谐音）但是当它初始化每个视图会做出自己的呼叫服务。我也想通过类别名称作为参数。<​​/ P>

什么是做的最有效的方法是什么？我也试图与指令，但我没有任何运气保持独立的范围为每个呼叫。让我知道如果你需要更多的细节。

解决方案

我终于能够解决这个问题。这是pretty方便您的阅读文档和玩后

下面是指令：

angular.module（'分量'，[]）。指令（'分类'，函数（）{
返回{
    限制：'E'，
    范围： {}，
    templateUrl：/Scripts/app/partials/CategoryComponent.html'，
    控制器：函数（$范围，$ HTTP，$ ATTRS）{
        $ HTTP（{
            网址：API /特色产品/+ $ attrs.catName，
            方法：搞定
        }）。成功（功能（数据，状态，头，配置）{
            $ scope.Cat =数据;
        }）错误（功能（数据，状态，头，配置）{
            $ scope.data =数据;
            $ scope.status =状态;
        }）;    }
}
}）;


这本主页使用相同的组件调用多次，但使用不同的参数

＆LT; UL类=无样式＆GT;
    ＆LT;立GT;
    ＆LT;类别Cat-NAME =超极本＆GT;＆LT; /类别＆GT;
    ＆LT; /李＆GT;
    ＆LT;立GT;
    ＆LT;类别Cat-NAME =片＆GT;＆LT; /类别＆GT;
    ＆LT; /李＆GT;
    ＆LT;立GT;
    ＆LT;类别Cat-NAME =笔记本电脑＆GT;＆LT; /类别＆GT;
    ＆LT; /李＆GT;
    ＆LT;立GT;
    ＆LT;类别Cat-NAME =数码单反相机＆GT;＆LT; /类别＆GT;
    ＆LT; /李＆GT;


CategoryComponent.html

＆LT; A HREF =＃/分类/ {{Cat.CategoryName}}＆GT;
    ＆LT; H4＆GT; {{Cat.CategoryName}}＆LT; / H4＆GT;
＆所述; / A＆GT;
＆LT; D​​IV NG-开关=状态＆GT;
    ＆LT; D​​IV NG-开关时=500级=警报警报错误＆GT;
        {{状态}}
        {{数据}}
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV NG开关默认＆GT;
        ＆LT; UL类=无样式列＆GT;
            ＆LT;李班=针NG-重复=p在Cat.Products＆GT;
                ＆所述; A HREF =＃/评论/ {{p.UPC}}＆GT;
                    ＆LT;＆H5 GT; {{p.ProductName}}＆LT; / H5＆GT;
                    ＆所述; IMG SRC ={{p.ImageUrl}}＆GT;
                ＆所述; / A＆GT;
            ＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;


I am new to AngularJS and liking it so far. One problem I cannot find any documentation is this:

I have a page with recurring HTML, a category page with sub categories all having the same html template. What I am currently doing is having a single controller load all the Json all at once which is kind of slow. I would like to break it down into sub-views (something like partials in ASP.NET MVC) but each view would make it's own call to the service when it initializes. I would also like to pass the category name as a parameter.

What is the most efficient way of doing it? I also tried with Directives but I am not having any luck keeping the scope separate for each call. Let me know if you need more details.

解决方案

I was finally able to solve this. It is pretty easy after your read the documentation and play around

Here is the directive:

angular.module('components', []).directive('category', function () {
return {
    restrict: 'E',
    scope: {},
    templateUrl: '/Scripts/app/partials/CategoryComponent.html',
    controller: function ($scope, $http, $attrs) {
        $http({
            url: "api/FeaturedProducts/" + $attrs.catName,
            method: "get"
        }).success(function (data, status, headers, config) {
            $scope.Cat = data;
        }).error(function (data, status, headers, config) {
            $scope.data = data;
            $scope.status = status;
        });

    }
}
});

This this the main page with the same component called multiple times but with different parameter

    <ul class="unstyled">
    <li>
    <category cat-name="Ultrabooks"></category>
    </li>
    <li>
    <category cat-name="Tablets"></category>
    </li>
    <li>
    <category cat-name="Laptops"></category>
    </li>
    <li>
    <category cat-name="Digital SLR Cameras"></category>
    </li>

CategoryComponent.html

<a href="#/Categories/{{Cat.CategoryName}}">
    <h4>{{Cat.CategoryName}}</h4>
</a>
<div ng-switch on="status">
    <div ng-switch-when="500" class="alert alert-error">
        {{status}}
        {{data}}
    </div>
    <div ng-switch-default>
        <ul class="unstyled columns">
            <li class="pin" ng-repeat="p in Cat.Products">
                <a href="#/reviews/{{p.UPC}}">
                    <h5>{{p.ProductName}}</h5>
                    <img src="{{p.ImageUrl}}">
                </a>
            </li>
        </ul>
    </div>
</div>

这篇关于在AngularJS可重用的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！