javascript AngularJS और ट्विटर बूटस्ट्रैप को गठबंधन करने का सबसे अच्छा तरीका




twitter-bootstrap angular-ui-bootstrap (3)

मैं एंगुलरजेएस और ट्विटर बूटस्ट्रैप को एक नए वेब ऐप में जोड़ना चाहता हूं। ऐसा लगता है जैसे एंगुलरजेएस निर्देश बूटस्ट्रैप के लिए लिखे गए हैं

हालांकि, सावधानी से देखो, ऐसा लगता है कि इन निर्देशों में बूटस्ट्रैप को शामिल नहीं किया गया है। क्या मैं पूर्णता प्राप्त करने के लिए मूल बूटस्ट्रैप के साथ AngularUI बूटस्ट्रैप कोड दोनों को जोड़ सकता हूं? क्या यह पहली जगह में किया जा सकता है?

मैं AngularStrap नामक एक और कोणीय परियोजना पर ठोकर खाई। क्या मैं तीनों को गठबंधन कर सकता हूं?

पूर्णता प्राप्त करने के लिए AngularJS और ट्विटर बूटस्ट्रैप को गठबंधन करने का सबसे अच्छा तरीका क्या है?


कोड को अपने स्वयं के कोणीय निर्देश लिखकर जोड़ा जा सकता है जो HTML उत्पन्न करता है जिसमें बूटस्ट्रैप कक्षाएं होती हैं। मैं एक समान वेब एप्लिकेशन पर काम कर रहा हूं जो कोणीय के साथ बूटस्ट्रैप को जोड़ती है। मैंने वहां क्या किया, ऐसा कुछ था:

app.directive('trackerMenu', function(){
    return {
        restrict: 'E',
        templateUrl: "partials/menu.html"
    };
});

और menu.html की सामग्री है:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-show="auth">
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand">Issue Tracker</a>
        <ul class="nav navbar-nav">
            <li class='toggleable'>
                <a ng-click="navigate('dashboard')"><i class="fa fa-home"></i>Dashboard</a>
            </li>
            <li class='toggleable'>
                <a ng-click="navigate('tasks')"><i class="fa fa-tasks"></i>Tasks</a>
            </li>
            <li class='toggleable'>
                <a ng-click="navigate('bugs')"><i class="fa fa-bug"></i>Bugs</a>
            </li>
            <li class='toggleable'>
                <a ng-click="navigate('statistics')"><i class="fa fa-bar-chart-o"></i>Statistics</a>
            </li>
            <li class='toggleable'>
                <a ng-click="navigate('team')"><i class="fa fa-users"></i>Team</a>
            </li>
            <li class='toggleable'>
                <a ng-click="navigate('profile')"><i class="fa fa-user"></i>Profile</a>
            </li>
            <li class='toggleable'>
                <a ng-click="navigate('settings')"><i class="fa fa-cog"></i>Settings</a>
            </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <span class="input-group-addon"><i class="fa fa-search"></i></span>
            </div>
        </form>
        <ul class="nav navbar-nav">
            <li>
                <a ng-click="logout()"><i class="fa fa-power-off"></i>Logout</a>
            </li>
        </ul>
    </div>
</div>
</nav>

और निर्देश इस तरह प्रयोग किया जाता है:

<body ng-class="togglePadding()" ng-controller="RootCtrl">
    <tracker-menu></tracker-menu>
</body>

असल में, मेरे निर्देश का क्या एक पृष्ठ में बूटस्ट्रैप नेविबार इंजेक्ट करना है।


आम तौर पर, बूटस्ट्रैप का सीएसएस भाग एंगुलरजेएस के साथ बिल्कुल वैसे ही काम करता है क्योंकि यह बूटस्ट्रैप जावास्क्रिप्ट के साथ काम करता है। इसलिए जब तक आप केवल बूटस्ट्रैप सीएसएस का उपयोग करना चाहते हैं, आपको इसके बारे में सोचना नहीं है।

लगभग सभी बूटस्ट्रैप जावास्क्रिप्ट कार्यक्षमता के लिए, AngularUI एक वैकल्पिक दृष्टिकोण प्रदान करता है। सामान्य रूप से सीएसएस के साथ काम करता है, इसलिए बस बूटस्ट्रैप दस्तावेज़ों को देखें और इसे कार्यान्वित करें। यदि आपको navbar के लिए कुछ उत्तरदायी विशेषताओं की आवश्यकता है, तो आपको collapse निर्देश की आवश्यकता होगी; उदाहरण के लिए यहां देखें: कोणीय-ui navbar

तो अगर आपको लगता है कि AngularUI में कुछ भी गुम है, तो क्या आप "पूरे ट्विटर बूटस्ट्रैप को कवर करने के लिए पर्याप्त नहीं हैं" के साथ अधिक विशिष्ट हो सकते हैं? मेरे पास यह धारणा नहीं है कि एक सामान्य अंतर है।

इसके अलावा, http://angular-ui.github.io/bootstrap/ कार्य के लिए सबसे परिपक्व पुस्तकालय है। तो अगर आपको लगता है कि फीचर्स गायब हैं, तो मैं दृढ़ता से इसे पैच करने और पुल अनुरोध करने की सलाह दूंगा।


कोणीय पट्टा Navbar का समर्थन करता है, अनुभव से बात करते हुए आप मॉड्यूल आधार पर मॉड्यूल पर कोणीय पट्टा के साथ ui बूस्ट्रैप मिश्रण कर सकते हैं। दोनों परियोजनाएं आपको कस्टम निर्माण के लिए अपने घटकों को इंजेक्ट करने की अनुमति देती हैं:

angular.module('myApp', [ 
    'mgcrea.ngStrap.modal',
    'mgcrea.ngStrap.aside', 
    'ui.bootstrap.popover'
   ]);

हालांकि, वे एक दूसरे के साथ संघर्ष कर सकते हैं और करेंगे। आईई आप एक ही परियोजना में यूई-बूटस्ट्रैप मोडल और कोणीय पट्टा मोडल नहीं हो सकता है। इसके अतिरिक्त, दोनों परियोजनाओं के कुछ निर्देशों के उदाहरण के लिए अन्य मॉड्यूल पर निर्भरता है, कोणीय पट्टा दिनांक पिकर टूलटिप निर्देश पर निर्भरता है।







angular-strap