AngularJS-Einführungs-Tutorial: Beispiel für die Verwendung modularer Operationen-js-Tutorial-php.cn

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

高洛峰

Freigeben： 2016-12-08 11:08:40

Original

1028 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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("修改密码");
  }
 }
);

Nach dem Login kopieren

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", []);

Nach dem Login kopieren

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)...

Nach dem Login kopieren

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: