ANGULARJS Introductory tutorials for modular operational usage examples _ANGULARJS

The examples in this article describe the ANGULARJS modular operational usage. Share to everyone for your reference, specific as follows:

In the previous sections of the tutorial, the code is relatively small, in order to facilitate the explanation of the problem the author of the controller code is written in the HTML page, in fact, this is not a good programming habits, but also poor maintenance. It is common practice to write code that handles business logic in a separate JS file and then introduce the file into an HTML page.

However, this will bring new problems, our controllers are all defined in the global namespace, assuming we have a public JS file, in the login page and password modification page are introduced to this js,a developers and B developers alike, the name of the controller is Usercontroller, This can result in a naming conflict. And when we add a controller, we always have to worry about whether we have a controller with the same name, is the code extensibility bad?

The module in Angularjs is a good solution to this problem, so let's look at how Angularjs deals with naming conflicts.

Code Listing 1. Tutorial04_1.html

<! DOCTYPE html>
 
 

Code Listing 2. Tutorial04_2.html

<! DOCTYPE html>
 
 

Code Listing 3. Tutorial04.js

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 ("Login");
  }
);
var pwordmod = angular.module ("Pwordmod", []);
Pwordmod.controller ("Usercontroller", Function ($scope, $log)
 {
  $scope. pword= "123456";
  $scope. changepwrd = function ()
  {
   alert ("Modify password");
  }
);

We have login page tutorial04_1.html and modify Password page tutorial04_2.html, controller code is written in Tutorial04.js, both pages are defined the same controller usercontroller.

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

This line of code defines the module, and the first parameter is the module name. The second argument is an array, optional, and if specified, creates a new module, which is not specified to be retrieved from the configuration.

Loginmod.controller ("Usercontroller", Function ($scope, $log) ...

Add a controller to the module through the controller function, the first parameter is the controller name, and the second parameter is the controller implementation part.

Then, in tutorial04_1.html and tutorial04_2.html, you can use ng-app= "Loginmod" and ng-app= "Pwordmod" to specify which module the controller in the page belongs to.

When you run the page in a browser, you can see that different page calls do not use the Usercontroller controller in the module:

Angularjs Source can click here to download the site .

I hope this article will help you to Angularjs program design.