templating trong angular.js - thừa kế

Question

với tư cách là người dùng khung web phía máy chủ (tôi sử dụng Django), tôi thích cách các mẫu được sắp xếp. Tiêu đề trang, css, js, đầu trang và chân trang của mẫu cơ sở được định nghĩa là các khối và có thể được ghi đè lên trong các mẫu con.

Cách góc cạnh của việc này là gì?

Nội dung của mỗi trang là tất nhiên được cung cấp bởi ng-view, khác hơn thế, tôi không thể làm được gì nhiều. Thẻ tiêu đề chẳng hạn bên ngoài chế độ xem và tôi không thể thay đổi thẻ động.

Sẽ rất tốt khi cho tôi một mã ví dụ về dự án toàn diện để xem cách các mẫu được tổ chức. Hầu hết các dự án ví dụ ra có nhỏ và không cần thừa kế trong các mẫu.

Answer 1

Việc tạo khuôn mẫu của Django thực sự tốt đẹp, nhưng hãy nhớ rằng Angular chủ yếu dành cho việc xây dựng các SPA (các ứng dụng trang đơn), vì vậy nó khác biệt về mặt khái niệm. Trong một dự án Angular điển hình, bạn sẽ có khuôn khổ phía máy chủ của bạn tạo ra mẫu cơ sở, sau đó định tuyến được chuyển giao cho Angular cho mọi thứ khác và các phần nội dung được bao gồm có điều kiện dựa trên các tuyến đường.

Một phần giống nhau mà bạn có giữa các mẫu Django và Angular là chỉ thị ng-include, cho phép bạn hút các bit có thể sử dụng lại html. Nhưng không có gì tương tự với hệ thống {{block}} hoặc {{block super}} của Django.

Bạn có thể viết chỉ thị tùy chỉnh để cung cấp thêm css/javascript thay vì sử dụng {{block extrahead}}.

Đối với thẻ tiêu đề động, bạn cần phải đảm bảo phần tử điều khiển được đặt phía trên phần tử đầu, nếu không nó sẽ nằm ngoài phạm vi và do đó không thể truy cập được. Chúng tôi làm điều đó như thế này trong các mẫu cơ sở:

<title data-ng-bind="title">Oursite</title> 

Và sau đó trong bộ điều khiển cho URL đó:

$rootScope.title = 'Dashboard | Oursite'; 

cách tiếp cận đề nghị khác trong this chủ đề.

Answer 2

Hãy xem angular-blocks được lấy cảm hứng từ Jade, Handlebars và Django hoặc đơn giản hơn ng-layout.