angularjs笔记-angular.module模块理解

最新推荐文章于 2024-05-27 15:27:28 发布

bubufafa

最新推荐文章于 2024-05-27 15:27:28 发布

阅读量571

点赞数

分类专栏： angularjs学习心得

本文链接：https://blog.csdn.net/fgweqw/article/details/106305276

版权

angularjs学习心得专栏收录该内容

0 篇文章 0 订阅

订阅专栏

html代码

<body ng-app="xmpl">	
<div ng-controller="XmplController">
  {{ greeting }}
</div>
</body>

js代码

angular.module('xmpl.service', [])        //1.创建xmpl.service模块
 
  .value('greeter', {
    salutation: 'Hello',
    localize: function(localization) {
      this.salutation = localization.salutation;
    },
    greet: function(name) {
      return this.salutation + ' ' + name + '!';
    }
  })
 
  .value('user', {
    load: function(name) {
      this.name = name;
    }
  });
 
angular.module('xmpl.directive', []);    //2.创建xmpl.directive模块
 
angular.module('xmpl.filter', []);         //3.创建xmpl.filter模块
 
//4.创建xmpl, 并且引用其他模块代码
angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter'])    
 
  .run(function(greeter, user) {
    // This is effectively part of the main method initialization code
    greeter.localize({
      salutation: 'Bonjour'
    });
    user.load('World');
  })
 
  .controller('XmplController', function($scope, greeter, user) {
    $scope.greeting = greeter.greet(user.name);
  });

1.ng-app的作用

<html ng-app="invoice1">将html定义为一个angular容器。

2.angular.module("invoice1", [])模块的作用

angular.module以ng-app同名invoice1容器创建一个代码模块。将容器与模块对应。

目前的理解模块就是代码的封装吧。单一职责原则，一个模块专心负责一个业务类型。