如何写angularJS模块

Posted on 2015-09-24 15:20  晚睡早起  阅读(224)  评论(0)    收藏  举报

angularJS中提供模块的概念，供我们把代码封装在模块单元中,使用模块能给我们带来的好处

  • 保持全局命名空间的清洁
  • 易于在不同应用间复用代码
  • demo.html

    <!doctype html>
    <html ng-app="freefedApp">
       <head>
            <title>angular应用demo</title>
            <script src="angular.js"></script>
            <script src="app.js"></script>
      </head>
      <body>
      </body>
    </html>

    app.js

    /*声明module*/
    angular.module('freefedApp',[]);

     

    代码解读:

  • angular.module(name,requires) 接收两个参数, 第一个是模块名称,第二个是依赖模块数组

  • 上面通过ng-app指令模块名，自动在相应dom中建立angular应用模块，且一个页面中只能出现一次ng-app,如果需要定义多个应用模块,通过
    angular.bootstrap(elment,modulename)手动关联启动,如下：

    demo.html
<!doctype html>
<html>
   <head>
        <title>angular应用demo</title>
        <script src="angular.js"></script>
        <script src="app.js"></script>
  </head>
  <body>
        <div id="userModule">
               <h1>用户中心模块</h1>
       </div>
       <div id="newsModule">
              <h1>新闻数据模块</h1>
       </div>
  </body>
</html>

app.js

/*声明module*/
angular.module('userApp',[]);
angular.module('newsApp',[]);

/*手动启动关联到对应dom*/
angular.bootstrap(document.getElementById('userModule'),['userApp']);
angular.bootstrap(document.getElementById('newsModule'),['newsApp']);