कोणीय सामग्री

इसलिए मैंने अपने सिस्टम में कोणीय, कोणीय-सामग्री, कोणीय-एरिया, कोणीय-एनिमेट निर्भरता स्थापित की है। मैं बस इसे ऊपर और स्टाइलिंग विधि का परीक्षण करना चाहता हूं। ऐसा लगता है कि मैं शुरुआत में फंस गया हूं। क्या आप मुझे बता सकते हैं कि कोड के साथ क्या गलत है?कोणीय सामग्री

ये मेरी 3 फाइलें हैं।

app.js
styles.css
index.html

मेरे उत्पादन है {{TITLE1}} वेबपेज के केंद्र शीर्ष पर।

angular.module('MyApp', ['ngMaterial']) 
 
    .controller("MyController", function($scope) { 
 
    $scope.title1 = 'Lol'; 
 
    });

.buttondemoBasicUsage section { 
 
    background: #f7f7f7; 
 
    border-radius: 3px; 
 
    text-align: center; 
 
    margin: 1em; 
 
    position: relative !important; 
 
    padding-bottom: 10px; 
 
} 
 
.buttondemoBasicUsage md-content { 
 
    margin-right: 7px; 
 
} 
 
.buttondemoBasicUsage section .md-button { 
 
    margin-top: 16px; 
 
    margin-bottom: 16px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    <link rel="stylesheet" type="text/css" href="angular-material.css"> 
 
    <title>AngularJS</title> 
 
</head> 
 

 
<body ng-app="MyApp"> 
 
    <div ng-controller="MyController"> 
 
    <md-content> 
 
     <section layout="row" layout-sm="column" layout-align="center center"> 
 
     <md-button>{{title1}}</md-button> 
 
     </section> 
 
    </md-content> 
 
    </div> 
 
    <script src="app.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script> 
 

 
</body> 
 

 
</html>

स्रोत

2015-07-20 Varun Verma

मैंने आपके आयात को तय किया (मेरा संपादन देखें) और यह काम कर रहा है। – Christoph

मुझे कोई संपादन नहीं दिख रहा है। : ओ –

हम्म ठीक है। मेरे उत्तर को देखें – Christoph

मैं अपने आयात तय की।

angular.module('MyApp', ['ngMaterial']) 
 
    .controller("MyController", function($scope) { 
 
    $scope.title1 = 'Lol'; 
 
    });

.buttondemoBasicUsage section { 
 
    background: #f7f7f7; 
 
    border-radius: 3px; 
 
    text-align: center; 
 
    margin: 1em; 
 
    position: relative !important; 
 
    padding-bottom: 10px; 
 
} 
 
.buttondemoBasicUsage md-content { 
 
    margin-right: 7px; 
 
} 
 
.buttondemoBasicUsage section .md-button { 
 
    margin-top: 16px; 
 
    margin-bottom: 16px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    <link rel="stylesheet" type="text/css" href="angular-material.css"> 
 
    <title>AngularJS</title> 
 
</head> 
 

 
<body ng-app="MyApp"> 
 
    <div ng-controller="MyController"> 
 
    <md-content> 
 
     <section layout="row" layout-sm="column" layout-align="center center"> 
 
     <md-button>{{title1}}</md-button> 
 
     </section> 
 
    </md-content> 
 
    </div> 
 
    <script src="app.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script> 
 

 
</body> 
 

 
</html>

स्रोत

2015-07-20 11:39:40 Christoph

ठीक है मैंने इसे पाया। उसके लिए खेद है। जब मैं सोफ पर कोड स्निपेट चलाता हूं, तो यह काम करता है लेकिन जब मैं इसे अपनी फाइलों में पेस्ट करता हूं, तो यह मुझे क्रोम और आईई 8 –

@ क्रिस्टोफ पर भी एक ही परिणाम दिखाता है, आप कोणीय-सामग्री.css को बदलना भूल गए हैं एक सीडीएन-होस्टेड स्थान पर।फिर फिर, यह जवाब सचमुच प्रतिबिंबित नहीं करता है कि क्यों वरुण अपनी फाइलों का संदर्भ नहीं दे सकता है। –

यह वास्तव में अपनी परियोजना में सही स्थानों के लिए फ़ाइलों को संदर्भित का सिर्फ एक मामला है।

CDN के लिए अपने सभी स्थानीय संदर्भ की जगह, अपने कोड दोषरहित काम कर रहा है: http://codepen.io/qvazzler/pen/vOaqXW

<!DOCTYPE html> 
<html> 
<head> 
<!-- <link rel="stylesheet" type="text/css" href="CSS.css">--> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css"> 
    <title>AngularJS</title> 
</head> 
<body ng-app="MyApp"> 
    <div ng-controller="MyController"> 
     <md-content> 
      <section layout="row" layout-sm="column" layout-align="center center"> 
       <md-button>{{title1}}</md-button> 
      </section> 
     </md-content> 
    </div> 
<!-- <script src="MyApp.js"></script>--> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-aria.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script> 
</body> 
</html>

इन मामलों में क्या करने के लिए एक सहायक बात Chrome डेवलपर टूल (Ctrl + Shift + I) खोलने के लिए है, मिलता है कंसोल अनुभाग में और त्रुटि संदेशों को देखें।

लिंक DevTools के प्रयोग पर मार्गदर्शन करने के: https://developer.chrome.com/devtools

अगर मैं वास्तव में कारण है कि यह काम नहीं कर रहा है, हम अपनी फ़ाइल संरचना को देखने के लिए होगा पर अपने सवाल का जवाब देने थे, लेकिन के रूप में यह आम है कि जे एस फ़ाइलें स्थित हैं आपके एचटीएमएल फाइलों से अलग फ़ोल्डर में, आपको अपने href की शुरुआत में "../" को मूल फ़ोल्डर तक पहुंचने के लिए जोड़ना होगा।

उदाहरण:

[My Project] 
jsfolder 
- angular.js 
- angular-material.js 
cssfolder 
- angular-material.css 
- styles.css 
html 
- index.html

आपका index.html से Angular.js पहुँचने के लिए आपको href लिखने के लिए = "../ jsfolder/Angular.js"

स्रोत

2015-07-20 11:40:52

धन्यवाद सब कुछ। बाहर निकलता है मुझे पहले अपनी निर्भरताओं को आयात करना था और फिर मेरी .js और .css फ़ाइल। –

@ वरुण वर्मा, मुझे बताएं, क्या मेरे उत्तर में कुछ भी है जो पर्याप्त नहीं था? –

नहीं, यह सब अच्छा था। धन्यवाद :) –

मेरा सुझाव होगा टाइपस्क्रिप्ट या उस विकल्प का एक प्रकार का उपयोग करने के लिए, पहले चरण कठिन हैं लेकिन बाद में आप बेहतर समाधान में होंगे।

कृपया कोड कोड दर्द और लाभ न बनाएं।

खुश कोडिंग।

स्रोत

2016-04-24 14:46:17 Mkan

कोणीय सामग्री

उत्तर

संबंधित मुद्दे