Question

我最近开始使用Ionic框架，但从Ionic开始 Angular.js 是先决条件。任何人都可以告诉我为什么我们在嵌套的 ui-router 中使用抽象关键字。我无法找到一个很好的教程。请告诉我angular.js中抽象的意义/优点是什么。

这是我无法理解的代码 var app = angular.module（＆＃39; ionicApp＆＃39;，[＆＃39; ionic＆＃39;]）

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

  $stateProvider.state('app', {
    abstract: true,
    templateUrl: 'main.html'
  })

  $stateProvider.state('app.todos', {
    abstract: true,
    url: '/todos',
    views: {
      todos: {
        template: '<ion-nav-view></ion-nav-view>'
      }
    }
  })

Answer 1

使用嵌套状态时，抽象状态可以具有子状态，但不能自行激活。

参考：

Nested States & Nested Views

Answer 2

好吧，我将发表一些使用离子的经验。

- Ui路由器父/子范围继承

这不是离子特有的。有时，如果要共享与视图相关的一些常用函数，可以使用范围继承，在父视图中合并默认/共享函数，或在视图中设置默认状态，或者继承已解析的依赖项。

$stateProvider.state('app', {
  abstract: true,
  templateUrl: 'main.html',
  resolve: {
    commonMeta: ["$stateParams","$http", function($stateParams, $http) {
      return $http.get("/commonMeta/" + $stateParams.id);
    }]
  },
  controller: ["$scope", function($scope) {
    // controller should be in a separate file
    $scope.data = {};
    $scope.state = {};
    $scope.display = function() {
      // common logic for page display
    };
    $scope.restoreCustomerPreference = function() {
      // restore customer preference from say localstorage
    };
    $scope.init = function() {
      // 'this' will be the child $scope
      this.state = {
        error: false
      };
      this.restoreCustomerPreference();
    };
  }],
});
$stateProvider.state('app.dashboard', {
  url: '/dashboard',
  views: {
    todos: {
      template: '<ion-nav-view></ion-nav-view>'
    }
  },
  resolve: {
    data: ["$http", function($http) {
      return $http.get("/getDashboard/");
    }]
  },
  controller: ["$scope","commonMeta","data" function($scope,commonMeta,data) {
    // controller should be in a separate file
    $scope.data = data;
    $scope.display = function() {
      // override the display logic
      $
    };
    $scope.init();
  }]
});
$stateProvider.state('app.todos', {
  url: '/todos',
  views: {
    todos: {
      template: '<ion-nav-view></ion-nav-view>'
    }
  },
  resolve: {
    data: ["$http", function($stateParams, $http) {
      return $http.get("/getTodos/");
    }]
  },
  controller: ["$scope", function($scope) {
    // controller should be in a separate file
    $scope.data = data;
    $scope.someFn = function() {
      // some function
    };
    $scope.init();
  }]
});

尝试使用controller: ["$scope", function($scope) { }]这种形式的依赖注入，因此您的代码在缩小时不会中断。

- ionic-slide-box

使用ionic-slide-box可以开发app，用户可以左右滑动以进入下一页，类似于facebook，使用简单的指令来获取模板。

angular.module("directives",[])
.directive("slideItem", ["$http","$templateCache","$compile",function($http,$templateCache,$compile) {
  return {
    replace: false,
    restrict: "EA",
    scope: {
      template: "@"
    },
    link: function(scope, iElement, iAttrs, controller) {
      var events = scope.events();

      $http.get(iAttrs.template, {cache: $templateCache})
      .success(function(result) {
        iElement.replaceWith($compile(result)(scope));                
      });

    }
  };
}]);

模板文件可以硬编码：

<ion-view>
  <ion-slide-box show-pager="false">
    <ion-slide>
      <slide-item template="templates/dashboard.html"></slide-item>
    </ion-slide>
    <ion-slide>
      <slide-item template="templates/todos.html"></slide-item>
    </ion-slide>
    <ion-slide>
      <slide-item template="templates/sumary.html"></slide-item>
    </ion-slide>
  </ion-slide-box>
</ion-view>

或使用ng-repeat：

<ion-view>
  <ion-slide-box show-pager="false">
    <ion-slide ng-repeat="o in slides">
      <slide-item template="templates/{{o.template}}.html" ></slide-item>
    </ion-slide>
  </ion-slide-box>
</ion-view>

Weinre是您必须拥有的调试工具，它甚至可以调试当您的应用程序安装到真实设备时。没有那个，当你的应用程序以空白屏幕开始，您只是不知道要查找的内容。
ngCordova是由离子发展的cordova功能的包装太
Android设备可以轻松测试，TestFlight适用于ios 测试

为什么在角度js中使用抽象关键字？

2 个答案:

- Ui路由器父/子范围继承

- ionic-slide-box