Home>

This article introduces the import and export of module modules in angularjs.Related knowledge about angularjs module,Friends interested in angularjs module have a look

AngularJS is a front-end JS framework from Google. Its core features are:mvc, two-way data binding, instructions and semantic tags, modular tools, dependency injection, html templates, and encapsulation of common tools.For example $http, $cookies, $location, etc.

In the actual angularjs project,We may need to put various aspects of a certain field in different modules, and then aggregate each module into a file in the field,Called by the main module. That's it:

Above, app.mymodule1, app.mymodule2, app.mymodule are aimed at a certain field,For example, direct is defined in app.mymodule1, controller is defined in app.mymodule2, and app.mymodule aggregates app.mymodule1 and app.mymodule2 in one placeThen the app module depends on app.mymodule.

File structure:

mymodule /

..... helloworld.controller.js<in app.mymodule2>

..... helloworld.direcitve.js<in app.mymodule1>

..... index.js<in app.mymodule>

..... math.js<in a separate module>

app.js<in the app module>

index.html

helloworld.controller.js:
var angular=require ("angular");
module.exports=angular.module ("app.mymodule2", []). controller ("hwcontroller", ["$scope", function ($scope) {
 $scope.message="this is hwcontroller";
}]). name;

Above, export module through module.exports and import module through require.

helloworld.direcitve.js:
var angular=require ("angular");
module.exports=angular.module ("app.mymodule1", []). directive ("helloworld", function () {
 return {
  restrict:"ea",  replace:true,  scope:{
   message:"@"
  },  template:"<div><h1>message is {{message}}.</h1><ng-transclude></ng-transclude></div>",  transclude:true
 }
}). name;

Next, pp.mymodule1 and app.mymodule2 are put together in index.js

var angular=require ("angular");
var d=require ("./helloworld.directive");
var c=require ("./helloworld.controller");
module.exports=angular.module ("app.mymodule", [d, c]). name;
</pre>
</div>
<p>
<strong>
In math.js:
</strong>
</p>
<div>
<pre>
exports={
 add:function (x, y) {
  return x + y;
 }, mul:function (x, y) {
  return x * y;
 }
};
</pre>
</div>
<p>
Finally, reference app.mymodule1 in app.js:
</p>
<div>
<pre>
var angular=require ("angular");
var mymodule=require ("./mymodule");
var math=require ("./mymodule/math");
angular.module ("app", [mymodule])
 .controller ("appcontroller", ["$scope", function ($scope) {
  $scope.message="hello world";
  $scope.result=math.add (1, 2);
 }]);

The above is the import and export of the module module in angularjs that we share with you.Hope you like it.

  • Previous Summary of php array function array_key_exists ()
  • Next How does JQuery pass and parse data in Json format under the SpringMVC framework