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

Question

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

这是我无法理解的代码 var app = angular.module('ionicApp', ['ionic'])

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

好吧，我将发布一些我使用 ionic 的经验。

- 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 可以开发应用程序，用户可以左右滑动以进入下一页，类似于 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 是由 ionic 开发的 cordova 函数的包装器 也是。

• 可以轻松测试Android设备，TestFlight适用于ios 测试。

Answer 2

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

参考：

Nested States & Nested Views