在angular.js中进行模板化 - 继承

kak*_*eys 11 templates angularjs

作为服务器端Web框架用户(我使用Django),我喜欢模板的组织方式.基本模板的页面标题,css,js,页眉和页脚被定义为块,可以在子模板中覆盖.

棱角分明的做法是什么?

每页的内容当然是由ng-view提供的,除此之外,我做不了多少.例如,标题标签位于视图之外,我无法动态更改它.

最好给我一个完整项目的示例代码,以了解模板的组织方式.大多数示例项目都很小,不需要在模板中继承.

sha*_*ker 6

Django的模板非常好,但请记住,Angular主要用于构建SPA(单页面应用程序),因此它在概念上是不同的.在典型的Angular项目中,您将使用服务器端框架生成基本模板,然后将路由传递给Angular用于其他所有内容,并根据路由有条件地包含内容部分.

Django和Angular模板之间的一个相似之处是ng-include指令,它允许你吸收可重复使用的html.但是没有类似于Django的{{block}}或{{block super}}系统.

您可以编写一个自定义指令来引入额外的css/javascript,而不是使用{{block extrahead}}.

对于动态标题标记,您需要确保将控制器元素设置在head元素上方,否则它将超出范围,因此无法访问.我们在基本模板中这样做:

<title data-ng-bind="title">Oursite</title>
Run Code Online (Sandbox Code Playgroud)

然后在该URL的控制器中:

$rootScope.title = 'Dashboard | Oursite';
Run Code Online (Sandbox Code Playgroud)

主题中的其他建议方法.