Mafunzo ya Scope ya AngularJS

Mamlaka (scope) ni sehemu ya kuzingatia kati ya HTML (vizija) na JavaScript (mamlaka).

Mamlaka ni kifaa kinachoweza kufanya matumizi ya kiwango cha kipato na matukio.

Mamlaka ni inayopatikana kwa vizija na mamlaka.

Kutumia mamlaka?

Kama unatokana na mamlaka wa AngularJS unatoka... $scope Jadwaa ya kifaa inayotumika kwa sababu ya kuzingatia:

Mfano

Mafuatilia ya mawasiliano inayotengenezwa kwenye mamlaka inaweza kutumiwa katika vizija:

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.carname = "Volvo";
});
</script>

Jifunze tena

Kama tunatoa kwenye kikontroller $scope kuingia katika kipimo cha kiumbe wengine, muonekano (HTML) inaweza kupata uingilio hii.

katika muonekano, hatutumia $scope Kifupi, tuweza kutumia jina la uingilio moja, kama {{carname}}.

Kuelewa majukuu

Kama tunatua programu ya AngularJS kuwa inayotengenezwa na sehemu hizo:

  • Muonekano, ni HTML.
  • Mada, ni data iliyotumika katika muonekano.
  • Kikontroller, ni programu ya JavaScript inayounganisha/kuchangia/kufungua/kukidhi/kusimamia data.

Kwa hiyo majukuu ni mada.

Majukuu ni kiumbe wa JavaScript ambao ina uingilio na matukio ambayo yana uwezo katika muonekano na kikontroller.

Mfano

Ikiwa tumekuchangea katika muonekano, mada na kikontroller kitahaririwa:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

Jifunze tena

Kuelewa majukuu yako

Kuelewa majukuu yako yana maana kwa kipya kila wakati.

Kwenye mafano yaliyotumiwa juu, kuna majukuu pekee, kisha kuelewa majukuu yako inahusishwa, kama programu kubwa zaidi, mawakilishi wa DOM ya HTML yasiyowakilika majukuu fulani.

Mfano

Kipindi kilichopatikana kwenye kipendekezo cha ng-repeat kila mara inaweza kufikia matokeo wa kurepeja wa hivi karibuni:

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
  <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

Jifunze tena

kila <li> Mafanikio yote ya elementi yenye uwezo wa kupata matokeo wa kurepeja, kama hii, inayotumia x kutumia.

majukuu ya kigeni

Makampuni yote yana $rootScopenia, inaonekana katika kipimo cha ng-app Majukuu yanaundwa kwenye kipimo cha HTML cha madirisha.

rootScope inapatikana kote katika programu hiyo.

Ikiwa kiwango kilichopatikana katika majukuu ya hicho na rootScope kina jina lile, programu itatumia kiwango katika majukuu ya hicho.

Mfano

Majukuu na rootScope wana nguvu ya kiwango cha "color":

<body ng-app="myApp">
<p>Ujuzi wa kina msingi wa kifaa:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>The scope of the controller's favorite color:</p>
  <h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
  $rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
  $scope.color = "red";
});
</script>
</body>

Jifunze tena