在上一篇文章中我们讨论了怎样在我们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”。

最新文章

  1. 个人查阅资料-Sql语句
  2. java 编码
  3. Eclipse 启动Tomcat 超时报错的解决方案
  4. 在centos安装docker
  5. BZOJ 1024: [SCOI2009]生日快乐 dfs
  6. 去大公司还是去小公司工作——要进大公司的核心部门(提升视野,锻炼技能),远离没真本事的小公司,要自我驱动 good
  7. div中显示某个网页
  8. (中级篇 NettyNIO编解码开发)第八章-Google Protobuf 编解码-2
  9. Shiro登录成功之后跳到指定URL
  10. sql server 实现split功能 行转列
  11. vue动态切换组件
  12. ASP.NET Core 2.1 : 十.升级现有Core2.0 项目到2.1
  13. React Router v4 页面传值的三种方法
  14. learning makefile static model
  15. Angular基础(四) 创建Angular应用
  16. 使用cv::invert()求解Mat矩阵的逆矩阵
  17. EBS _ALL, _TL, _VL, _V,_F,_VL,_A,_AVN and what else
  18. [转]JSONObject,JSONArray使用手册
  19. java常用工具方法2
  20. mongo 聚合函数

热门文章

  1. OC: NSString、NSArray、NSNumber
  2. OC:NSmuber、NSString 的互转
  3. [p2p]UDP用打洞技术穿透NAT的原理与实现
  4. DOM2
  5. inpuy type=date
  6. mybatis 注解快速上手
  7. 上门洗车App 竟然是块大肥肉!
  8. JS函数的定义与调用方法
  9. DevExpress 13.2.6源码、安装包、汉化包下载和教程
  10. C#如何通过NCO3.0来连接SAP并调用SAP中的RFC