Kürzlich habe ich im AngularJS-Projekt gesehen, dass der Controller viele sich wiederholende Codes enthält, die den Funktionen sehr ähnlich sind (z. B. die CRUD-Methode unter dem Controller). ist zu viel repetitive Arbeit. Später habe ich darüber nachgedacht, ob ich einen Dienst vorschlagen könnte, aber wenn ich sorgfältig darüber nachdenke, werden diese CRUDs ursprünglich vom Dienst aufgerufen. Wenn ich einen Dienst vorschlage, führt dies zu Verwirrung im Dienst und zu unklaren Verantwortlichkeiten. Kann ich die Idee des Backends nutzen, um den Controller zu erben, da ich einige Backend-Arbeiten durchgeführt habe? In diesem Artikel wird hauptsächlich die Verwendung der Controller-Vererbung in AngularJS vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Vererbung der Controllerservice-Implementierung Nach einigen Recherchen habe ich herausgefunden, dass AngularJS uns eine Controller-Vererbung ermöglicht hat. Wir müssen nur den Controllerservice verwenden. $controller service api
// 参数的解释
// constructor 可以是 function 也可以是 string
// 如果传入一个 function, 就会当成 controller 的构造函数
// 如果传入一个 string，就会根据字符串去$controllerProvider 找 注册的 controller
//locals 是一个对象，注入来自局部的 controller ,在这里我们认为 child controller
$controller(constructor, locals, [bindings])
Nach dem Login kopieren
Wie werden Eigenschaften in verschachtelten Controllern vererbt?
==Der Attributwert ist eine Zeichenfolge
myApp.controller("ParentCtrl", function($scope){
$scope.name = "darren";
})
myApp.controller("ChildCtrl", function($scope){
})
<p ng-controller="ParentCtrl">
<label>父控制器中的name变量值</label> <input ng-model="name" />
<p ng-controller="ChildCtrl">
<label>子控制器中的name变量值</label> <input ng-model="name" />
<ul>
<li>child controller name: {{name}}</li>
<li>parent controller name: {{$parent.name}}</li>
</ul>
</p>
</p>Nach dem Login kopieren
Oben wird das Namensfeld in ParentCtrl von ChildCtrl gemeinsam genutzt, aber ändern Sie das Der Namensfeldwert hat keinen Einfluss auf den Namenswert in ParentCtrl. Wenn der Namenswert in ChildCtrl geändert wird, wird die verschachtelte Beziehung zwischen ParentCtrl und ChildCtrl unterbrochen.
Oben ist der der Variablen in ParentCtrl zugewiesene Wert ein Zeichenfolgentyp. Was ist, wenn der Objekttyp dem Feld in ParentCtrl zugewiesen ist?
==Der Attributwert ist das Objekt
myApp.controller("ParentCtrl", function($scope){
$scope.vm = {
name: "John"
};
})
myApp.controller("ChildCtrl", function($scope){
})
<p ng-controller="ParentCtrl">
<label>父控制器中的vm.name变量值</label> <input ng-model="vm.name" />
<p ng-controller="ChildCtrl">
<label>子控制器中的vm.name变量值</label> <input ng-model="vm.name" />
<ul>
<li>child controller name: {{vm.name}}</li>
<li>parent controller name: {{$parent.vm.name}}</li>
</ul>
</p>
</p>Nach dem Login kopieren
Oben wird das VM-Objekt in ParentCtrl von ChildCtrl gemeinsam genutzt, und natürlich auch gemeinsam genutzt. Ohne das Namensfeld im Objekt wirkt sich eine Änderung des vm.name-Werts in ChildCtrl auf ParentCtrl aus, dh die verschachtelte Beziehung zwischen ParentCtrl und ChildCtrl wird nicht unterbrochen.
Wie werden Methoden in verschachtelten Controllern vererbt?
myApp.controller("ArrayCtrl", function($scope){
$scope.myArray = ["John", "Andrew"];
$scope.add = function(name){
$scope.myArray.push(name);
}
})
myApp.controller("CollectionCtrl", function($scope){
})
<p ng-controller="ArrayCtrl">
<label>My Array:</label><span>{{myArray}}</span>
<label>parent controller:</label>
<input ng-model="parentName" />
<button ng-click="add(parentName)">Add New Item</button>
<p ng-controller="CollectionCtrl">
<label>child controller:</label>
<input ng-model="childName" />
<input type="number" ng-model="index" />
<button ng-click="add(childName)">Add New Item</button>
</p>
</p>Nach dem Login kopieren
Mit der Add-Methode in ArrayCtrl ist das Hinzufügen kein Problem; die Add-Methode in ArrayCtrl kann auch von CollctionCtrl verwendet werden; 🎜> Und die Methoden im übergeordneten Controller können im untergeordneten Controller überschrieben werden.
Codebeispiel
myApp.controller("CollectionCtrl", function($scope){
//插入到某个位置
$scope.add = function(name, index){
$scope.myArray.splice(index,0, name);
}
})
<p ng-controller="ArrayCtrl">
<label>My Array:</label><span>{{myArray}}</span>
<label>parent controller:</label>
<input ng-model="parentName" />
<button ng-click="add(parentName)">Add New Item</button>
<p ng-controller="CollectionCtrl">
<label>child controller:</label>
<input ng-model="childName" />
<input type="number" ng-model="index" />
<button ng-click="add(childName, index)">Add New Item</button>
</p>
</p>Nach dem Login kopieren
1. Erstellen Sie eine base.controller.js-Datei
Der Code ist sehr einfach. Wir stellen eine einfache formValid()-Methode in BaseController bereit und initialisieren auch eine getList()-Methode.
(function() {
'use strict';
angular
.module('DemoApp')
.controller('BaseCtrl', BaseCtrl);
//手动注入一些服务
BaseCtrl.$inject = ['$scope','CRUDServices'];
/* @ngInject */
function BaseCtrl($scope,CRUDServices) {
var _this = this;
//当前 controller 提供一些方法
_this.bFormValid = formValid;
activate();
////////////////
//初始化时候调用
function activate() {
getList();
}
// 获取数据列表
function getList() {
//把当前的结果赋值给 bList 属性上
_this.bList = CRUDServices.getList();
}
// 表单验证
function formValid(){
//do some thing
return false;
}
}
})();Nach dem Login kopieren
2. Erstellen Sie einen Dienst. Dieser Dienst stellt Datendienste bereit
3. Erstellen Sie die Datei child.controller.js, die unsere wichtigste Datei ist
(function() {
'use strict';
angular
.module('DemoApp')
.service('ExtendServices', ExtendServices);
ExtendServices.$inject = [];
/* @ngInject */
function ExtendServices() {
return {
getList: getList //获取 list 列表
}
////////////////
function getList() {
return [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]
}
}
})();Nach dem Login kopieren
Auf diese Weise realisieren wir die Controller-Vererbung über den $controller-Dienst und können auch die vom untergeordneten Controller benötigten injizierten Dienste an den Basis-Controller weiterleiten. ({ $scope, $scope,CRUDServices:ExtendServices }), unser untergeordneter Controller hat bereits die magische Kraft genutzt, um die Liste abzurufen, ohne eine einzige Codezeile zu schreiben. Wenn wir die Formularvalidierung aufrufen müssen, rufen Sie einfach vm.bFormValid() direkt auf.
(function() {
'use strict';
angular
.module('DemoApp')
.controller('ChildCtrl', ChildCtrl);
//手动注入一些服务
//ExtendServices 用来提供数据的 Servie
ChildCtrl.$inject = ['$scope', '$controller','ExtendServices'];
/* @ngInject */
function ChildCtrl($scope, $controller,ExtendServices) {
var vm = this;
//调用我们父 controller
var parentCtrl = $controller('BaseCtrl', { $scope, $scope,CRUDServices:ExtendServices })
//通过 angular.extend 把父控制器上的 方法和属性 绑定到 子的对象上
angular.extend(vm, parentCtrl);
activate();
////////////////
function activate() {
//调用表单验证方法
vm.bFormValid();
}
}
})();Nach dem Login kopieren
4. Erstellen Sie die Datei child.html und binden Sie sie direkt
<p>
<!-- 直接绑定 vm.bList 就会看到输出结果-->
<p ng-repeat="item in vm.bList">{{item}}</p>
</p>Nach dem Login kopieren
Fazit
Danach können wir einen öffentlichen Controller vorschlagen, um einige häufig verwendete Methoden zu kapseln. Im Controller müssen wir nur verschiedene geschäftsbezogene Methoden schreiben. Die Wartbarkeit des Codes wird erheblich verbessert und auch die Codemenge wird reduziert.
Verwandte Empfehlungen:
Verwendung des Zend_Controller_Plugin-Plug-Ins
Erläuterung zur Entwicklung des ThinkJS-Controllers für das Node.js-Framework
Controller für die WeChat-Webentwicklung erstellen
Das obige ist der detaillierte Inhalt vonTutorial zur Methode der Controller-Vererbung in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
