Explain the import and export of module modules in Angularjs _ANGULARJS

Source: Internet
Author: User
Tags require

Angularjs is a front-end JS framework from Google, its core features are: MVC, bidirectional data binding, instruction and semantic tags, modular tools, dependency injection, HTML templates, as well as the packaging of common tools, such as $http, $cookies, $ Location and so on.

About the import and export of module in Angularjs, I haven't written it before Bob told me, thanks to Bob's guidance in this regard, give me the case code.

In Angularjs actual projects, we may need to place various aspects of a particular domain in a different module, and then aggregate each module into a single file in the field, which is invoked by the main module. That's it:

Above, App.mymodule1, App.mymodule2,app.mymodule are for a domain, such as app.mymodule1 definition directive, App.mymodule2 defined controller, App.mymodule the App.mymodule1 and app.mymodule2 into one place, and the app, the main module, relies 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 app this 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";

Above, export module through Module.exports, 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> 
 

Then, in Index.js, Pp.mymodule1 and app.mymodule2 are aggregated into one place.

var angular = require (' angular ');
var d = require ('./helloworld.directive ');
var c = require ('./helloworld.controller ');
Module.exports = Angular.module (' App.mymodule ', [D, c]). Name;

In the Math.js:

Exports = {
 add:function (x, y) {return
  x + y;
 },
 mul:function (x, y) {return
  x * y;
 }

Finally, refer to App.mymodule1 in App.js:

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 a small set for you to share the Angularjs module modules in the import and export, I hope you like.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.