管理后台-第二部分：Custom sections in Umbraco 7 – Part 2 the views（翻译文档）

 在上一篇文章中我们讨论了怎样在我们Umbraco7.0版本中去添加一个新的自定义的应用程序（或部分）和如何去定义一个树。现在我将给你展示你改何如添加视图，来使你的内容可以做一些更有意义的事情。

The routing

从我们添加过tree这个类之后，我们添加了PluginController(“CustomSection“)属性。Umbraco将客户端请求的路由加到app_plugins文件夹中。逻辑类似： /app_plugins/{applicationName}/{treeAlias}/{action}/，所以我们的例子中我们将寻找网址 /#/CustomSection/CustomSectionTree/edit/，还有Umbraco中寻找/app_plugins/customsection/backoffice/CustomSectionTree/edit.html来显示视图，所以让我们创建该文件。

The view

添加一下内容在新的文件edit.html中：

<script>
 
    function CustomSectionEditController($scope, $routeParams) {
        $scope.content = { tabs: [{ id: 1, label: "Tab 1" }, { id: 2, label: "Tab 2" }] };
 
        $scope.EditMode = function() {
            return $routeParams.create == 'true';
        };
    }
</script>
 
<div ng-controller="CustomSectionEditController">
 
    <umb-panel>
    <umb-header tabs="content.tabs">
        <div class="umb-headline-editor-wrapper span12 ng-scope">
            <h1 class="ng-binding">My custom section {{id}}</h1>
               </div>
    </umb-header>
 
    <umb-tab-view>
        <umb-tab id="tab1" rel="svensson">
 
        <div class="umb-pane">
            This is tab content for tab 1<br/>
           <p ng-show="EditMode()">
                   <span class="label label-warning">In create mode, this label is only showed when the controller sees the create-querystring item.</span>
           </p>
        </div>
        </umb-tab>
 
        <umb-tab id="tab2" rel="kalle">
 
        <div class="umb-pane">
 
                    This is tab content for tab 2
         </div>
        </umb-tab>
 
    </umb-tab-view>
</umb-panel>
 
</div>

这段代码将给我们一个视图类似这样的：

 即使我们可以在视图中添加普通的HTML，但是我选择包括一些AngularJS和一些Umbraco在AngularJS上的补充。umb-tab, umb-tab-view, umb-panel-elements都是在AngularJS核心概念中的一些指令。这些指令隐藏着复杂的逻辑来生成视图右边还有侧边。指令是非常强大的，可以用来重用的代码和在应用程序上的窗口小部件 - 我们可以忽略这些细节，关注上面的代码。

在脚本标记中，我创建一个常规的Javascript函数，将作为视图的控制器，这个函数把一个变量$scope作为参数，就像是视图和控制器之间的“粘合剂”。$scope是AngularJS中的一个变量，如果你之前使用过Angular这对你来说应该是很熟悉。自从Umbraco定制指令选项卡$scope.content.tabs，当创建这个选项卡的时候我们需要用一些静态数据填充这个属性 - 在这种情况下是“Tab1”和“Tab2”。