मास्टर पेज अवधारणा?

Question

मैं मास्टर पेज बनाना चाहता हूं, यह मुख्य पृष्ठ है जिसका उपयोग एप्लिकेशन के सभी दृश्यों में किया जाएगा।

उदाहरण के लिए, बाएं नेविगेशन और शीर्ष पुरुषों नेविगेशन। जब भी यूआरएल आवेदन में बदल जाता है, तो यह नेविगेशन सभी विचारों में प्रदर्शित होना चाहिए।

प्रति एनजी-व्यू के रूप में, यह केवल आंशिक दृश्य दिया है और पिछले दृश्य की जगह बना देता है। मेरे सभी बाएं और शीर्ष नेविगेशन के ऊपर की छवि में कोणीय नियंत्रक का उपयोग करके प्रदर्शित किया जाना चाहिए।

नियंत्रक कोड

angular.module('modelDemo').controller("authCtrl", ['$scope', function($scope) { 
     $scope.list; 
}]); 

कृपया मुझे पता मैं कैसे प्राप्त कर सकते हैं इस

Answer 1

एनजी राय यह है कि ठीक करने के लिए सक्षम होना चाहिए है,। अपने शीर्ष नेविगेशन/बाएं नेविगेशन एचटीएमएल बरकरार रखें और विभिन्न प्रदर्शन क्षेत्र के लिए एनजी व्यू का उपयोग करें। http://docs.angularjs.org/api/ng.directive:ngView

एनजी-व्यू के अंदर शीर्ष नेविगेशन से नियंत्रक का उपयोग करने के लिए आप $ माता-पिता का उपयोग कर सकते है कि गुंजाइश तक पहुँच प्राप्त करने: https://stackoverflow.com/a/14700326/390330

माता पिता गुंजाइश के लिए फिडल: http://jsfiddle.net/ezhrw/2/

<button ng:click="$parent.letter = greek">Assignment expression {{ greek }}</button> 

Answer 2

आप उपयोग कर सकते हैं कोणीय-मार्ग या कोणीय-यूई-राउटर, और इस चरण के बाद, अपने मास्टर को सेट करना:

• चरण 1. अपनाबनाएंअपने मास्टर पेज।
• चरण 2. <header>, <footer>, <aside>, <div>, आदि जोड़े ng-include
  • नोट का उपयोग करके अपने टेम्पलेट्स संदर्भित: अपने बाएँ और शीर्ष नेविगेशन इसका हिस्सा
• चरण 3 हो जाएगा। दृश्य की सामग्री निर्देशक विशेषता ng-view या ui-view
• चरण 4 का उपयोग करके प्रस्तुत की जाएगी। बच्चों के पृष्ठों को कॉन्फ़िगर करने के लिए अपने मॉड्यूल app.config() का उपयोग करें

स्रोत:

• कोणीय मार्ग का उपयोग कर: एक नया अनुप्रयोग के लिए https://docs.angularjs.org/tutorial/step_07
  • टेम्पलेट: https://github.com/angular/angular-seed
• कोणीय यूआई रूटर का उपयोग कर: Angular Tutorial 30 mins

Answer 3

मैं एक ही अवधारणा बनाने की कोशिश कर रहा था, लेकिन प्लेसहोल्डर को परिभाषित करने के लिए एक तरीका चाहिए। मैंने Plnkr में प्रयोग करना शुरू कर दिया।सह और इस प्रकार, मैंने एक लेआउटमैनेजर का उपयोग करने का सहारा लिया जो रूटवेवाइडर ऑब्जेक्ट के भीतर सेटिंग्स से खुद को चलाता है।

यहाँ एक उदाहरण है: http://embed.plnkr.co/4GPDfTSQCuqukJE7AniZ/

आप कैसे कई मार्गों में एक ही शीर्ष लेख और पाद का उपयोग का एक उदाहरण देखेंगे, मैं एक साइडबार के साथ एक उदाहरण शामिल नहीं किया।

मुझे लेआउटमैनेजर समझाएं।

मैं प्लेसहोल्डर रखना चाहता था जिसे ओवरराइड किया जा सकता था। इस उदाहरण में, मेरे पास एक टूलबार है जिसमें एक शीर्षक है और अतिरिक्त टूलबार आइटम्स के लिए शीर्षक के दाईं ओर एक स्थान प्रदान करता है। यह विचारों को अतिरिक्त कार्यक्षमता में फेंकने का मौका देता है।

यह सब लेआउटमैनेजर द्वारा संचालित है। लेआउटमैनेजर एक ऐसी सेवा है जो $ रूटप्रोवाइडर पर सेट लेआउट गुणों को पढ़ती है। मैं इसे मार्ग में साफ और स्वयं निहित रखने के तरीके को लागू करना चाहता था। लेआउटमैनेजर को टूलबार निर्देश में इंजेक्शन दिया गया है। टूलबार निर्देश लेआउटमैनेजर के अपने दायरे गुणों को चलाता है।

बदले में, लेआउटमैनेजर के पास रूटप्रोवाइडर के साथ-साथ रूटस्कोप $ रूट चेंज इवेंट पर निर्भरता है।

मैं कोणीय के लिए बहुत नया हूं, सुझावों के लिए खुला हूं।

Answer 4

मुझे कोई समस्या नहीं देख सकता था, यदि आप बूटस्ट्रैप उपयोग कर रहे हैं तो उपयोग आसानी से आप चाहते हैं

<div class="row"> 
    <div class="col-lg-3"> 
     Left panel 
    </div> 
    <div class="col-lg-9" style="border:1px solid #999; overflow-y:auto"> 
     <div> Top Banner </div> 

     <!-- Main view to render all the page --> 
     <div ui-view> </div> 

    </div> 
</div> 

आप पर पूरा डेमो और कोड चाहते हैं तो देखते हैं कि आपका स्क्रीन विभाजित कर सकते हैं this link

संपादित : 3 नवंबर 2016:

यदि आप यूई-राउटर का उपयोग कर रहे हैं तो हम उपयोगकर्ता को अलग-अलग मास्टर पेज बनाने के लिए अमूर्त राज्य कर सकते हैं।

आप एनजी-अगर लेकिन सिर्फ ठीक से मार्ग मास्टर पेजेस और बच्चे के पन्नों को परिभाषित आप के साथ, दिखाएँ/छिपाएँ खेलने के लिए की जरूरत नहीं है

Better to see the detail

Answer 5

मैं जानता हूँ कि यह एक पुरानी धागा है, लेकिन सोचा यह ध्यान दिया जाना चाहिए कि कोणीय 1.5+ के रूप में हम घटकों के लिए पेश किया गया है। नामित विचारों के साथ मार्गों से निपटने के बजाय और उस बकवास या एनजी का उपयोग करने के बजाय आपको हेडर घटक और पाद लेख घटक का उपयोग करना चाहिए। बस इन्हें अपने index.html (या जो भी आप अपना मास्टर HTML टेम्पलेट कहते हैं) और voila में जोड़ें।

उदाहरण के लिए (इस कोणीय सामग्री उपयोग कर रहा है और लेआउट मॉड्यूल याद आ रही है, लेकिन उम्मीद है कि आप प्राप्त बिंदु)

1. जोड़ा गया

<layout-header></layout-header> 

2 index.html करने के लिए। header.component.js (आपको यह सब चाहिए नहीं है लेकिन मुझे लगता है कि यह सहायक है)

(function() { 
'use strict'; 
angular 
    .module('layout') 
    .component('layoutHeader', { 
     templateUrl: 'layout/header.html', 
     bindings: {}, 
     controller: Controller 
    }); 

Controller.$inject = []; 
function Controller() { 
    var ctrl = this; 

    initialize(); 

    //////////////////// 

    function initialize(){ 

    } 

} 
}()); 

3. हेडर।एचटीएमएल

<md-toolbar> 
<div class="md-toolbar-tools"> 
    <h2> 
     <span>Really Awesome Title!!!!</span> 
    </h2> 
    <span flex></span> 

    <md-button class="md-icon-button" aria-label="More"> 
     <md-icon class="material-icons">more_vert</md-icon> 
    </md-button> 
</div> 
</md-toolbar>