सवाल क्या मैं सीधे AngularJS के तहत HTML से मॉड्यूल निरंतर उपयोग कर सकता हूं


मैं सीधे कुछ एचटीएमएल में कुछ स्थिरांक, और नियंत्रकों में कुछ बार उपयोग करना चाहता हूँ।

उदाहरण के लिए, यह मुख्य ऐप मॉड्यूल है:

angular.module('website', [])
.constant('ROUTES', (function () {
    return {
        SIGN_IN: '/sign/in'
  }
})())
.config([..., 'ROUTES', function(..., ROUTES {
    $routeProvider.when(ROUTES.SIGN_IN, {templateUrl: 'pages/sign_in.html', controller:     'SignInController'});
}]);

तो यह स्पष्ट है, नियंत्रकों से स्थिरांक का उपयोग कैसे करें।

लेकिन मैं ऐसा कुछ कैसे कर सकता हूं:

<html ng-app="website"> 
<body>
<a href="{{ROUTES.SIGN_IN}}">Sign in</a>
</body>
</html>

मुद्दा सभी मार्गों को एक ही स्थान पर रखना है। तो, क्या मैं यह कर सकता हूं, या हो सकता है कि मैंने गलत तरीके से चुना हो?


44
2017-07-06 17:03


मूल


साइनइन नियंत्रक में $ दायरे में बस रूट जोड़ें - Liviu T.
बहुत बहुत धन्यवाद, यह वास्तव में मुझे क्या चाहिए। - Sergei Panfilov


जवाब:


IMHO ऐसा करने का बेहतर तरीका है $ rootScope  एचटीएमएल में प्रत्येक गुंजाइश $ rootScope से प्राप्त होती है, इसलिए यदि वर्तमान चरम कोणीय में एक चर मौजूद नहीं है तो रूट रूटस्कोप में घोषित एक का उपयोग करें।

एक अच्छा (आईएमएचओ) तरीका इसे शुरू करना है रन "अवस्था"

angular.module('myApp')
  .run(function ($rootScope) {
      $rootScope.ROUTES = ROUTES
   });


76
2017-07-06 17:36



हाँ, यह बहुत बेहतर दिखता है, धन्यवाद - Sergei Panfilov
मुझे लगता है कि यह एक अवधारणा होनी चाहिए कि हर कोई किसी भी नियंत्रक लिखने से पहले समझने का प्रयास करता है। मुझे नहीं पता कि मैंने कितनी बार नियंत्रक पर गुंजाइश और जड़ के साथ काम किया है। - CarComp
ध्यान रखें कि मूल्य में परिभाषित किया गया है $rootScope अलग-अलग क्षेत्रों के साथ निर्देशों में सीधे पहुंच योग्य नहीं होगा। ऐसे मामलों में आप इस मूल्य को प्राप्त कर सकते हैं $root.ROUTES दृश्य में। - fracz


थोड़ा सा जवाब के समान लेकिन आईएमओ क्लीनर:

angular.module('website')
    .constant("ROUTES", {
        SIGN_IN: "/sign/in"
    })
    .run(function ($rootScope, ROUTES) {
        $rootScope.ROUTES = ROUTES;
    });

तथा:

<a href="{{ROUTES.SIGN_IN}}">Sign in</a>

HTH


17
2017-10-28 14:11



यह एक अच्छा दृष्टिकोण है। डेटा से अलग होने के दौरान कोड चल रहा है। - Nikhil Sahu


मुझे $ रूटस्कोप दृष्टिकोण भी पसंद है, लेकिन मेरे पास कुछ स्थितियों में फ़िल्टर का उपयोग किया गया है।

एक सरलीकृत उदाहरण के रूप में, मान लें कि BuildVersion नामक संपत्ति वाले ऑब्जेक्ट के रूप में कहीं भी एक निश्चित कॉन्फिग परिभाषित किया गया है। आप इस तरह कुछ फ़िल्टर बना सकते हैं:

angular.module('myApp')
  .filter('interpolate', ['CONFIG', function (CONFIG) {
      return function (text) {
          return String(text).replace(/\%VERSION\%/mg, CONFIG.BuildVersion);
      };  
  }]);

और एचटीएमएल में:

<html ng-app="website"> 
    <body>
        <div>{{'%VERSION%' | interpolate}}</div>
    </body>
</html>

या

<html ng-app="website"> 
    <body>
        <div>{{'bla bla bla %VERSION%.' | interpolate}}</div>
    </body>
</html>

16
2017-07-11 19:31



मैंने लगभग इसका इस्तेमाल किया क्योंकि यह परिचित था, और यह एक अच्छा जवाब है, लेकिन मुझे लगता है कि स्वीकृत उत्तर समग्र रूप से बेहतर है। दोनों को ऊपर उठाया। - VSO


इसके अलावा हम आरओआर के समान सहायक का उपयोग कर सकते हैं।

https://gist.github.com/merqlove/491023bcdd2145eef169#file-readme-md


1
2017-08-14 10:10