Question

我想知道如何在Ionic应用程序中按功能编码（这一点应该扩展到所有单页应用程序）。

如果我有一个如下所示的index.html：

<!DOCTYPE html>
<html ng-app="ionicApp">

  <head>
      ....
  </head>
  <body>
      <ion-nav-bar class="bar-positive">
    </ion-nav-bar>

    <ion-tabs class="tabs-positive" animation="slide-left-right">
        <ion-tab icon="ion-home" ui-sref="home">
            <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab icon="ion-android-search" ui-sref="some-tab">
            <ion-nav-view name="some-tab" ></ion-nav-view>
        </ion-tab>
        <ion-tab icon="ion-android-settings" ui-sref="settings">
            <ion-nav-view name="settings-tab" ></ion-nav-view>
        </ion-tab>


    </ion-tabs>
 </body>
</html>

一个看起来像这样的app.js文件：

var app = angular.module('ionicApp', ['ionic', 'ratings']);

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/')

$stateProvider
.state('default', {
  url: "/",
  views: {
    'home-tab': {
      templateUrl: "templates/home.html",
      controller: 'HomeTabCtrl'
    }
  }
})
...
  });


});

如何加载执行不同任务的不同模块？如果这是一个加载不同html页面的情况（标准Web应用程序），我可以更改页面顶部的模块引用。但是使用SPA时，它每次都会加载相同的index.html文件。

那么，我们如何在Ionic中实现模块化代码？

Answer 1

我为Podmedics做了一些工作，最近我写了很多Ionic应用程序。我们遇到了想要编写模块化代码的完全相同的问题。我们实际上建立了一个启动项目（它不像离子启动项目），它使用模块化模式。查看podmedics/ionic_starter。

主要原则是我们的目录结构按功能组织，每个功能都作为单独的模块加载。在Ionic的情况下，每个功能代表应用程序中的不同视图。 index.html概述了基本的应用结构。其他所有东西都在/app内。查看app.module.js。首先加载core和data，然后在其下方加载每个要素。

核心模块位于/core目录中。它会引入任何依赖模块，例如ionic和ngCordova。 config.js包含您在app.js和.run函数等大多数其他离子项目中通常看到填充到.config的所有内容。我们还在这里添加了一个constants.js文件，用于存储api端点和密钥等内容。

/data包含我们用于向控制器提供数据的任何工厂或服务。我们的一些应用程序有很多这些。之后，我们只需添加视图/功能。

代码评论很好（我们自己也可以像其他人一样），所以你应该能够很容易地找出它背后的结构和方法。

哦，我们使用的代码模式主要是基于johnpapa / ng-demos / modular（抱歉，不能提供另一个链接 - 显然没有足够的代表:(但不应该是很难找到。）

快乐的编码......

Answer 2

使用AMD（异步模块定义）可以实现一种模块化。见ionic with angular example。

如果您只想将视图的不同部分加载到一个位置，可以使用ngBindHtml

Answer 3

我和@quilligana有类似的方法。我们使用ui-router来帮助定义应用程序的结构。每个路由都有自己的控制器，模块化通过使用共享服务和指令来实现。所有这些都通过在范围层次结构中以任一方向发送的事件粘在一起。我们的目录结构如下：

app/
   controllers/
   services/
   directives/
   views/
   styles/

我们找到了一个很好的解决方案，可以使用grunt-ng-constant节点包存储各种密钥和端点。这将允许您根据您的环境设置不同的变量。这些都在 Gruntfile.js 中进行管理。我认为他们也会为Gulp制作一个，如果这就是你正在使用的那个。

我希望这有帮助！

离子模块化编码

3 个答案: