0

我想知道如何在 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 中实现模块化代码呢？

4

3 回答 3

2

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

主要原则是我们的目录结构是按功能组织的，每个功能都作为单独的模块加载。对于 Ionic，每个功能都代表应用程序中的不同视图。index.html概述了基本的应用程序结构。其他一切都住在里面/app。退房app.module.js。core并data首先加载，然后在其下方加载每个功能。

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

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

代码有很好的注释（我们自己和其他人都可以遵循），所以你应该能够很容易地弄清楚它背后的结构和方法。

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

快乐的编码...

于 2015-03-28T22:28:06.897 回答
0

一种模块化可以使用 AMD（异步模块定义）来实现。请参阅这个带有角度示例的离子。

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

于 2015-02-12T10:02:21.347 回答
0

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

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

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

我希望这有帮助！

于 2015-04-17T05:04:23.053 回答