AngularJS - หลายมุมมองในเทมเพลตเดียว

Question 1

ฉันกำลังสร้างเว็บแอปแบบไดนามิกโดยใช้ AngularJS เป็นไปได้ไหมที่จะมีหลายng-viewเทมเพลตในเทมเพลตเดียว

Question 2

คุณสามารถมีเพียงหนึ่ง ng-viewคุณสามารถมีเพียงหนึ่ง

คุณสามารถเปลี่ยนเนื้อหาในหลายวิธี: ng-include, ng-switchหรือควบคุมการทำแผนที่ที่แตกต่างกันและแม่แบบผ่าน routeProvider

Question 3

UI-Routerเป็นโครงการที่สามารถช่วยได้: https://github.com/angular-ui/ui-router หนึ่งในคุณสมบัติของมันคือมุมมองหลายชื่อ

UI-Router มีคุณสมบัติมากมายและฉันขอแนะนำให้คุณใช้หากคุณกำลังทำงานกับแอพขั้นสูง

ตรวจสอบเอกสารของหลายชื่อชมที่นี่

Question 4

ng-viewผมเชื่อว่าคุณสามารถทำได้โดยเพียงแค่มีเพียงครั้งเดียว ในเทมเพลตหลักคุณสามารถมีng-includeส่วนสำหรับมุมมองย่อยจากนั้นในตัวควบคุมหลักกำหนดคุณสมบัติของโมเดลสำหรับแต่ละเทมเพลตย่อย เพื่อที่จะผูกกับng-includeส่วนต่างๆโดยอัตโนมัติ เช่นเดียวกับการมีหลาย ๆng-view

คุณสามารถตรวจสอบตัวอย่างที่ระบุในng-include เอกสารประกอบ

ในตัวอย่างเมื่อคุณเปลี่ยนเทมเพลตจากรายการแบบเลื่อนลงมันจะเปลี่ยนเนื้อหา ที่นี่สมมติว่าคุณมีหนึ่งหลักng-viewและแทนที่จะเลือกเนื้อหาย่อยด้วยตนเองโดยการเลือกแบบเลื่อนลงคุณจะทำเช่นเดียวกับเมื่อโหลดมุมมองหลัก

Question 5

การใช้ng-viewโมดูลปกติคุณไม่สามารถมีเทมเพลตไดนามิกมากกว่าหนึ่งเทมเพลต

อย่างไรก็ตามโครงการนี้ช่วยให้คุณสามารถทำได้ (มองหาui-router)

Question 6

เป็นไปได้ที่จะมีหลายมุมมองหรือซ้อนกัน แต่ไม่ใช่โดย ng-view

โมดูลการกำหนดเส้นทางหลักในเชิงมุมไม่รองรับหลายมุมมอง แต่คุณสามารถใช้ ui-router นี้เป็นโมดูลของบุคคลที่สามซึ่งคุณจะได้รับผ่านทาง Github เชิงมุม-UI / UI-เราเตอร์https://github.com/angular-ui/ui-router นอกจากนี้ยังมีการพัฒนา ngRouter (ngNewRouter) เวอร์ชันใหม่ มันไม่คงที่ในขณะนี้ ดังนั้นฉันจึงให้ตัวอย่างการเริ่มต้นง่ายๆด้วย ui-router คุณสามารถตั้งชื่อมุมมองและระบุได้ว่าควรใช้เทมเพลตและคอนโทรลเลอร์ใดในการแสดงผล การใช้ $ stateProvider คุณควรระบุวิธีการแสดงผลตัวยึดตำแหน่งสำหรับสถานะเฉพาะ

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

คุณต้องอ้างอิง angularjs และ angular-ui.router สำหรับตัวอย่างนี้

$ bower install angular-ui-router

Question 7

คุณไม่สามารถมีหลายมุมมอง ด้านล่างนี้คือกรณีการใช้งานของฉันที่ฉันแก้ไขข้อกำหนด ฉันต้องการมีพฤติกรรมแบบแท็บในกล่องโต้ตอบโมเดลของฉัน ฉันประสบปัญหาเมื่อคลิกที่แท็บที่มีไฮเปอร์ลิงก์ซึ่งจะเรียกลิงก์เราเตอร์ ฉันแก้ไขสิ่งนี้โดยใช้ปุ่มและ css สำหรับแท็บ เมื่อผู้ใช้คลิกที่แท็บมันจะไม่เรียกไฮเปอร์ลิงก์ใด ๆ ซึ่งจะเรียกใช้ ng-router เสมอ เมื่อผู้ใช้คลิกที่แท็บมันจะเรียกเมธอดโดยที่ฉันโหลด html แบบไดนามิก ด้านล่างนี้คือฟังก์ชั่นเมื่อคลิกที่แท็บ

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

ผู้ใช้ $ templateRequest ในหน้า test_template.html เพิ่มเนื้อหา html ของคุณ เนื้อหา html นี้จะเชื่อมโยงกับคอนโทรลเลอร์ของคุณ