$ Kapsam ve $ rootScope arasındaki farkı açıklayan var mı?
bence
Bunu kullanarak belirli bir sayfadan belirli denetleyicide ng modeli özelliklerini alabiliriz.
Bunu kullanarak herhangi bir denetleyicideki tüm ng modeli özelliklerini herhangi bir sayfadan alabiliriz.
Bu doğru mu? Veya başka bir şey?
Yanıtlar:
"$ rootScope", bir web sayfasında oluşturulan tüm "$ kapsam" açısal nesnelerinin bir üst nesnesidir.
$ kapsam, ng-controller$ rootcope ile oluşturulurken oluşturulur ng-app.
Temel fark, nesne ile atanan özelliğin kullanılabilirliğidir. İle atanan $scopebir özellik, tanımlandığı denetleyicinin dışında kullanılamazken, atanan bir özellik $rootScopeherhangi bir yerde kullanılabilir.
Örnek: yerine Aşağıdaki örnekte olduğu takdirde $rootScopebirlikte $scopedepartman mülkiyet ikincisi ilk denetleyicisinden yerleşmiş olmayacak
angular.module('example', [])
.controller('GreetController', ['$scope', '$rootScope',
function($scope, $rootScope) {
$scope.name = 'World';
$rootScope.department = 'Angular';
}
])
.controller('ListController', ['$scope',
function($scope) {
$scope.names = ['Igor', 'Misko', 'Vojta'];
}
]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="example">
<div class="show-scope-demo">
<div ng-controller="GreetController">
Hello {{name}}!
</div>
<div ng-controller="ListController">
<ol>
<li ng-repeat="name in names">{{name}} from {{department}}</li>
</ol>
</div>
</div>
</body>Angular'ın Kapsamlar İçin Geliştirici Kılavuzuna göre :
Her Angular uygulamasının tam olarak bir kök kapsamı vardır, ancak birkaç alt kapsamı olabilir. Bazı yönergeler yeni alt kapsamlar oluşturduğundan uygulamanın birden çok kapsamı olabilir (hangi yönergelerin yeni kapsamlar oluşturduğunu görmek için yönerge belgelerine bakın). Yeni kapsamlar oluşturulduğunda, üst kapsamlarının alt öğeleri olarak eklenirler. Bu, eklendiği DOM ile paralel olan bir ağaç yapısı oluşturur.
Hem denetleyiciler hem de yönergeler kapsama atıfta bulunur, ancak birbirlerine değil. Bu düzenleme, denetleyiciyi hem yönergeden hem de DOM'dan izole eder. Bu önemli bir noktadır, çünkü denetleyicilerin agnostik görünmesini sağlar ve bu da uygulamaların test hikayesini büyük ölçüde geliştirir.
Başka bir şekilde buna bakabiliriz; $rootScopeküresel iken $scopeyereldir. Bir Controllersayfaya atandığında, $scopebu denetleyiciye bağlandığı için burada bir değişken kullanılabilir. Ancak değerini diğer denetleyiciler veya hizmetlerle paylaşmak istediğimizde, o $rootScopezaman kullanılıyor (** alternatif yollar var, değerleri paylaşabiliriz ancak bu durumda kullanmak istiyoruz $rootScope).
Bu iki kelimeyi nasıl tanımladığınızla ilgili ikinci sorunuz doğrudur.
Son olarak biraz yoldan sapın, lütfen $rootScopedikkatli kullanın . Global değişkenleri kullanma şeklinize benzer şekilde, hata ayıklamak için acı verici olabilir ve global değişkeni yanlışlıkla bir zamanlayıcı içinde bir yerde veya okumanızı yanlış yapan bir şeyde değiştirebilirsiniz.
Her uygulamanın en az bir tek rootScope'u vardır ve yaşam döngüsü uygulamayla aynıdır ve her denetleyicinin kendi kapsamı olabilir, bu da başkalarıyla paylaşılmaz.
Bu makaleye bir göz atın:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
Kapsamlar için resmi derinlemesine Açısal belgeleri okumanızı tavsiye ederim. 'Kapsam Hiyerarşileri' bölümünden başlayın:
https://docs.angularjs.org/guide/scope
Esasen, $ rootScope ve $ kapsam, DOM'un belirli kısımlarını tanımlar.
$ RootScope'a ait olan her şey Angular uygulamanızda global olarak mevcuttur, oysa $ kapsamına ait olan her şey DOM'un bu kapsamın geçerli olduğu kısımda mevcuttur.
$ RootScope, Angular uygulamasının kök öğesi olan DOM öğesine uygulanır (bu nedenle adı $ rootScope olur). Ng-app direktifini DOM'un bir öğesine eklediğinizde, bu, $ rootScope'un içinde bulunduğu DOM'un kök öğesi olur. Diğer bir deyişle, $ rootScope'un özellikleri vb. Tüm Angular uygulamanız boyunca kullanılabilir olacaktır.
Bir Angular $ kapsamı (ve tüm değişkenleri ve işlemleri), uygulamanızdaki DOM'un belirli bir alt kümesi için mevcuttur. Spesifik olarak, belirli bir denetleyicinin $ kapsamı, DOM'nin söz konusu denetleyicinin uygulandığı kısmı için kullanılabilir (ng-controller yönergesi kullanılarak). Kontrolörün uygulandığı DOM'un bir parçası içinde uygulandığında, ng-tekrar gibi belirli direktiflerin, ana kapsamın alt kapsamlarını oluşturabileceğini unutmayın - aynı kontrolör içinde - bir kontrolörün yalnızca bir kapsam içermesi gerekmez.
Angular uygulamanızı çalıştırdığınızda oluşturulan HTML'ye bakarsanız, Angular kapsamın uygulandığı herhangi bir öğeye (kök öğe dahil) sınıflandırma ng kapsamını eklediğinden, hangi DOM öğelerinin bir kapsam 'içerdiğini' kolayca görebilirsiniz. $ rootScope'a sahip olan uygulamanın).
Bu arada, $ kapsam ve $ rootScope'un başındaki '$' işareti, Angular tarafından ayrılmış öğeler için Angular'da basitçe bir tanımlayıcıdır.
Modüller ve denetleyiciler arasında değişkenleri vb. Paylaşmak için $ rootScope kullanmanın genellikle en iyi uygulama olarak görülmediğini unutmayın. JavaScript geliştiricileri, orada değişkenleri paylaşarak küresel kapsamın 'kirlenmesinden' kaçınmaktan bahsederler, çünkü aynı isimde bir değişken başka bir yerde kullanılırsa, geliştirici $ rootScope üzerinde zaten bildirilmiş olduğunu fark etmeden daha sonra çakışmalar olabilir. Bunun önemi uygulamanın boyutu ve onu geliştiren ekiple birlikte artıyor. İdeal olarak $ rootScope, uygulama genelinde her zaman tutarlı olması amaçlanan sabitleri veya statik değişkenleri içerecektir. Bir şeyleri modüller arasında paylaşmanın daha iyi bir yolu, başka bir konu olan hizmetleri ve fabrikaları kullanmak olabilir!
Her ikisi de Java betik nesneleridir ve fark aşağıdaki gibi şema ile gösterilmiştir.
NTB:
İlk açısal uygulama, herhangi bir modelin veya işlevin özelliğini $ kapsam içinde bulmaya çalışır, eğer özelliği $ kapsam içinde bulamazsa, üst hiyerarşide üst kapsamda arama yapar. Özellik hala üst hiyerarşide bulunmuyorsa, açısal $ rootcope içinde çözümlemeye çalışır.
John Papa's AngularJS Styleguide gibi yeni stiller, $scopemevcut sayfanın özelliklerini kaydetmek için kullanmamamız gerektiğini öneriyor . Bunun yerine kullanmalıyızcontrollerAs with vm , görünümün denetleyici nesnesinin kendisine bağlandığı yaklaşımı . Daha sonra controllerAs sözdizimini kullanırken bunun için bir yakalama değişkeni kullanın. ViewModel anlamına gelen vm gibi tutarlı bir değişken adı seçin.
Yine $scopede izleme yetenekleri için buna ihtiyacınız olacak .