zoukankan      html  css  js  c++  java
  • 如何写angularJS模块

    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']);
    他们也许不懂交互设计,但是没人比他们懂交互设计的实现,和每一个细节。
    他们也许不懂视觉设计,但是没人比他们懂视觉设计如何变为现实。
    他们也许不懂后台数据库,但是他们其实才是数据的第一消费者。
    他们也许不是产品经理,但是产品的质量几乎都是由他们来决定。
  • 相关阅读:
    十三、asp.net中Repeater控件用法笔记
    九、chart控件的使用(图表数据的展示)
    一、在开发数据同步系统中的开发问题:
    ubuntu编译最新版本WebKit
    android apk 防止反编译技术第四篇-对抗JD-GUI
    小菜学Chromium之OpenGL学习之二
    webkit浏览器常见开发问题
    Android图片开发内幕--基础篇
    【转载】Android Metro风格的Launcher开发系列第二篇
    world 替换+正则表达式命令
  • 原文地址:https://www.cnblogs.com/freefed/p/4835449.html
Copyright © 2011-2022 走看看