Heim > Artikel > Web-Frontend > AngularJS-Einführungs-Tutorial: Beispiel für die Verwendung modularer Operationen

AngularJS-Einführungs-Tutorial: Beispiel für die Verwendung modularer Operationen

高洛峰Original: 2016-12-08 11:08:40981Durchsuche

Die Beispiele in diesem Artikel beschreiben die Verwendung modularer AngularJS-Operationen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

In den vorherigen Tutorials war der Code relativ klein. Um die Erklärung des Problems zu erleichtern, hat der Autor den gesamten Controller-Code geschrieben Tatsächlich handelt es sich hierbei nicht um gute Programmiergewohnheiten und schlechte Wartbarkeit. Der übliche Ansatz besteht darin, den Code, der die Geschäftslogik verwaltet, in eine separate JS-Datei zu schreiben und die Datei dann in die HTML-Seite einzufügen.

Dies bringt jedoch neue Probleme mit sich. Angenommen, wir haben eine öffentliche JS-Datei und führen diese JS sowohl auf der Anmeldeseite als auch auf der Seite zur Passwortänderung ein B haben die gleiche Idee und nennen den Controller UserController, was zu Namenskonflikten führen wird. Und wenn wir einen neuen Controller hinzufügen, müssen wir uns immer Gedanken darüber machen, ob es bereits einen Controller mit demselben Namen gibt. Ist die Skalierbarkeit des Codes sehr schlecht?

Die Module in AngularJS können dieses Problem sehr gut lösen. Als nächstes wollen wir sehen, wie AngularJs mit Namenskonflikten umgeht.

Codeliste 1. Tutorial04_1.html

<!DOCTYPE html>
<html ng-app="loginMod">
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial04_1</title>
</head>
<body>
<div ng-controller="UserController">
 用户名：<input type="text" ng-model="name" placeholder="用户名"/>
 密码：<input type="password" ng-model="pword" placeholder="密码"/>
 <button ng-click="login()">提交</button>
 <p>您输入的用户名：{{name}}</p>
 <p>您输入的密码：{{pword}}</p>
</div>
<script type="text/javascript" src="js/tutorial04.js">
</script>
</body>
</html>

Codeliste 3. Tutorial04.js

<!DOCTYPE html>
<html ng-app="pwordMod">
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial04_2</title>
</head>
<body>
<div ng-controller="UserController">
 密码：<input type="password" ng-model="pword" placeholder="密码"/>
 <button ng-click="changePwrd()">提交</button>
 <p>您输入的密码：{{pword}}</p>
</div>
<script type="text/javascript" src="js/tutorial04.js">
</script>
</body>
</html>

Wir haben die Anmeldeseite „tutorial04_1.html“ und die Seite „Passwort ändern“ „tutorial04_2.html“. Der Controller-Code ist in „tutorial04.js“ geschrieben und auf beiden Seiten ist derselbe Controller „UserController“ definiert.

var loginMod = angular.module("loginMod", []);
loginMod.controller("UserController",function($scope,$log)
 {
  $scope.name="admin";
  $scope.pword="123456";
  $log.info( $scope.name);
  $log.info( $scope.pword);
  $scope.login = function()
  {
   alert("登录");
  }
 }
);
var pwordMod = angular.module("pwordMod", []);
pwordMod.controller("UserController",function($scope,$log)
 {
  $scope.pword="123456";
  $scope.changePwrd = function()
  {
   alert("修改密码");
  }
 }
);

Definieren Sie das Modul über diese Codezeile. Der erste Parameter ist der Modulname. Der zweite Parameter ist ein Array, das optional ist. Wenn dieser Parameter angegeben wird, wird ein neues Modul erstellt. Wenn er nicht angegeben wird, wird er aus der Konfiguration abgerufen.

var loginMod = angular.module("loginMod", []);

Fügen Sie über die Controller-Funktion einen Controller zum Modul hinzu. Der erste Parameter ist der Controller-Name und der zweite Parameter ist der Controller-Implementierungsteil. .

loginMod.controller("UserController",function($scope,$log)...

Dann können Sie ng-app="loginMod" und ng-app="pwordMod" in Tutorial04_1.html und Tutorial04_2.html verwenden, um anzugeben, zu welchem Modul der Controller auf der Seite gehört.

Sie können beim Ausführen der Seite im Browser erkennen, dass der UserController-Controller im Modul nicht für verschiedene Seitenaufrufe verwendet wird:

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ein einfaches Beispiel für die Überprüfung von Zahlen durch reguläre Javascript-AusdrückeNächster Artikel：Ein einfaches Beispiel für die Überprüfung von Zahlen durch reguläre Javascript-Ausdrücke

In Verbindung stehende Artikel

Mehr sehen