Latest web development tutorials

الأيونية إنشاء APP

الفصول السابقة تعلمنا كيف إطار الأيونية في المشروع.

التالي سوف نقدم كيفية إنشاء تطبيق APP الأيونية.

الأيونية إنشاء APP باستخدام HTML، CSS وجافا سكريبت لبناء، حتى نتمكن من إنشاء دليل شبكة الاتصالات العالمية، وإنشاء ملف index.html وفي الدليل، على النحو التالي: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
    <script src="cordova.js"></script>
  </head>
  <body>
  </body>
</html>

رمز أعلاه، قدمنا ​​ملف CSS أيوني، ملف التمديد أيوني شبيبة وأيوني AngularJS ionic.bundle.js (ionic.bundle.js).

ملف ionic.bundle.js يحتوي بالفعل أيوني الأساسية JS، AngularJS، أيوني تمديد AngularJS، الزاوي إذا كنت بحاجة إلى إدخال وحدات أخرى يمكن استدعاؤها من / ليب شبيبة / دليل الزاوي.

cordova.js عند استخدام قرطبة / فونغاب خلق توليد تطبيق ولا يتطلب إدخال اليدوي، يمكنك العثور على الملف في مشروع قرطبة / فونغاب، وبالتالي فإن العرض في عملية التنمية 404 أمر طبيعي.

إنشاء APP

والآن نأتي لتحقيق التطبيق الذي يحتوي على العنوان، الشريط الجانبي، والقوائم، الخ، وتصميم على النحو التالي:

إنشاء الشريط الجانبي

خلق الشريط الجانبي باستخدام وحدة تحكم أيون جنبا القوائم.

ملف تحرير index.html وأنشأنا في وقت سابق، تعديل محتويات <BODY>، على النحو التالي: 

<body>
  <ion-side-menus>
    <ion-side-menu-content>
    </ion-side-menu-content>
    <ion-side-menu side="left">
    </ion-side-menu>
  </ion-side-menus>
</body>

تحكم تفسير:

  • أيون جنبا القوائم: وعاء مع الشريط الجانبي القائمة، يمكنك النقر فوق زر أو تنزلق الشاشة لتوسيع القائمة.
  • ايون جنبا إلى القائمة المحتوى: عرض المحتوى الرئيسي للحاوية، يمكنك توسيع القائمة عن طريق تحريك الشاشة.
  • ايون جنبا إلى القائمة: وعاء الشريط الجانبي.

التهيئة APP

المقبل، ونحن إنشاء وحدة نمطية AngularJS جديدة، وتهيئة متاحة على شبكة الاتصالات العالمية / شبيبة / app.js في: 

angular.module('todo', ['ionic'])

بعد إضافة خاصية نانوغرام التطبيق في العلامة أجسامنا: 

<body ng-app="todo">

في ملف index.html و<النصي SRC = "cordova.js"> </ script> الملف app.js أعلاه قدم: 

<script src="js/app.js"></script>

تعديل محتويات العلامة هيئة ملف index.html و، رمز على النحو التالي: 

<body ng-app="todo">
  <ion-side-menus>

    <!-- 中心内容 -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-side-menu-content>

    <!-- 左侧菜单 -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Projects</h1>
      </ion-header-bar>
    </ion-side-menu>

  </ion-side-menus>
</body>

محاولة »

أكملنا الخطوات المذكورة أعلاه الأيونية التطبيقات APP الأساسية.

إنشاء قائمة

أولا، إنشاءTodoCtrl تحكم:

<body ng-app="todo" ng-controller="TodoCtrl">

في app.js الملف، استخدم وحدة تحكم لتحديد قائمة من البيانات: 

angular.module('todo', ['ionic'])

.controller('TodoCtrl', function($scope) {
  $scope.tasks = [
    { title: '本教程' },
    { title: 'www.w3big.com' },
    { title: '本教程' },
    { title: 'www.w3big.com' }
  ];
});

صفحة index.html والبيانات في القائمة التي نستخدمها لتكرار الزاوي نانوغرام تكرار البيانات: 

<!-- 中心内容 -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <h1 class="title">Todo</h1>
  </ion-header-bar>
  <ion-content>
    <!-- 列表 -->
    <ion-list>
      <ion-item ng-repeat="task in tasks">
        {{task.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu-content>

بعد تعديل العلامة الجسم index.html وضمن رمز على النحو التالي: 

 <body ng-app="todo" ng-controller="TodoCtrl">
    <ion-side-menus>

    <!-- 中心内容 -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content>
        <!-- 列表 -->
        <ion-list>
          <ion-item ng-repeat="task in tasks">
            {{task.title}}
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu-content>

    <!-- 左侧菜单 -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Projects</h1>
      </ion-header-bar>
    </ion-side-menu>

    </ion-side-menus>
    <script src="http://www.w3big.com/static/ionic/js/app.js"></script>
    <script src="cordova.js"></script>
</body>

محاولة »

خلق إضافة صفحات

تعديل index.html و في</ أيون جنبا القوائم> بعد إضافة التعليمات البرمجية التالية:

<script id="new-task.html" type="text/ng-template">

  <div class="modal">

    <!-- Modal header bar -->
    <ion-header-bar class="bar-secondary">
      <h1 class="title">New Task</h1>
      <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
    </ion-header-bar>

    <!-- Modal content area -->
    <ion-content>

      <form ng-submit="createTask(task)">
        <div class="list">
          <label class="item item-input">
            <input type="text" placeholder="What do you need to do?" ng-model="task.title">
          </label>
        </div>
        <div class="padding">
          <button type="submit" class="button button-block button-positive">Create Task</button>
        </div>
      </form>

    </ion-content>

  </div>

</script>

من خلال رمز أعلاه<النصي معرف = "الجديد-task.html " نوع = "نص / نانوغرام قالب"> تعرف صفحة قالب جديدة.

يتم تشغيل createTask وظيفة (المهمة) عندما يتم إرسال النموذج.

نانوغرام طراز = إدخال البيانات سيتم تعيين شكل "task.title" إلى السمة عنوان كائن المهمة.

المحتوى<ايون جنبا إلى القائمة محتوى > ضمن رمز على النحو التالي:

<!-- 中心内容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
  <h1 class="title">Todo</h1>
  <!-- 新增按钮-->
  <button class="button button-icon" ng-click="newTask()">
    <i class="icon ion-compose"></i>
  </button>
</ion-header-bar>
<ion-content>
  <!-- 列表 -->
  <ion-list>
    <ion-item ng-repeat="task in tasks">
      {{task.title}}
    </ion-item>
  </ion-list>
</ion-content>
</ion-side-menu-content>

ملف app.js، رمز تحكم على النحو التالي: 

angular.module('todo', ['ionic'])

.controller('TodoCtrl', function($scope, $ionicModal) {
  $scope.tasks = [
    { title: '本教程' },
    { title: 'www.w3big.com' },
    { title: '本教程' },
    { title: 'www.w3big.com' }
  ];

  // 创建并载入模型
  $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
    $scope.taskModal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });

  // 表单提交时调用
  $scope.createTask = function(task) {
    $scope.tasks.push({
      title: task.title
    });
    $scope.taskModal.hide();
    task.title = "";
  };

  // 打开新增的模型
  $scope.newTask = function() {
    $scope.taskModal.show();
  };

  // 关闭新增的模型
  $scope.closeNewTask = function() {
    $scope.taskModal.hide();
  };
});

إنشاء الشريط الجانبي

من خلال الخطوات المذكورة أعلاه قمنا بتنفيذ الميزات الجديدة، ونحن الآن إضافة وظائف إلى الشريط الجانبي التطبيق.

المحتوى<ايون جنبا إلى القائمة محتوى > ضمن رمز على النحو التالي:

<!-- 中心内容 -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <button class="button button-icon" ng-click="toggleProjects()">
      <i class="icon ion-navicon"></i>
    </button>
    <h1 class="title">{{activeProject.title}}</h1>
    <!-- 新增按钮 -->
    <button class="button button-icon" ng-click="newTask()">
      <i class="icon ion-compose"></i>
    </button>
  </ion-header-bar>
  <ion-content scroll="false">
    <ion-list>
      <ion-item ng-repeat="task in activeProject.tasks">
        {{task.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu-content>

إضافة الشريط الجانبي: 

<!-- 左边栏 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
  <h1 class="title">Projects</h1>
  <button class="button button-icon ion-plus" ng-click="newProject()">
  </button>
</ion-header-bar>
<ion-content scroll="false">
  <ion-list>
    <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
      {{project.title}}
    </ion-item>
  </ion-list>
</ion-content>
</ion-side-menu>

<ايون البند> تعليم من الدرجة نانوغرام في نمط القائمة الإعداد النشط.

نحن هنا إنشاء app2.js ملف شبيبة الجديدة (وينبغي عدم الخلط بينه وبين السابقة)، على النحو التالي: 

angular.module('todo', ['ionic'])
/**
 * The Projects factory handles saving and loading projects
 * from local storage, and also lets us save and load the
 * last active project index.
 */
.factory('Projects', function() {
  return {
    all: function() {
      var projectString = window.localStorage['projects'];
      if(projectString) {
        return angular.fromJson(projectString);
      }
      return [];
    },
    save: function(projects) {
      window.localStorage['projects'] = angular.toJson(projects);
    },
    newProject: function(projectTitle) {
      // Add a new project
      return {
        title: projectTitle,
        tasks: []
      };
    },
    getLastActiveIndex: function() {
      return parseInt(window.localStorage['lastActiveProject']) || 0;
    },
    setLastActiveIndex: function(index) {
      window.localStorage['lastActiveProject'] = index;
    }
  }
})

.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {

  // A utility function for creating a new project
  // with the given projectTitle
  var createProject = function(projectTitle) {
    var newProject = Projects.newProject(projectTitle);
    $scope.projects.push(newProject);
    Projects.save($scope.projects);
    $scope.selectProject(newProject, $scope.projects.length-1);
  }


  // Load or initialize projects
  $scope.projects = Projects.all();

  // Grab the last active, or the first project
  $scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];

  // Called to create a new project
  $scope.newProject = function() {
    var projectTitle = prompt('Project name');
    if(projectTitle) {
      createProject(projectTitle);
    }
  };

  // Called to select the given project
  $scope.selectProject = function(project, index) {
    $scope.activeProject = project;
    Projects.setLastActiveIndex(index);
    $ionicSideMenuDelegate.toggleLeft(false);
  };

  // Create our modal
  $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
    $scope.taskModal = modal;
  }, {
    scope: $scope
  });

  $scope.createTask = function(task) {
    if(!$scope.activeProject || !task) {
      return;
    }
    $scope.activeProject.tasks.push({
      title: task.title
    });
    $scope.taskModal.hide();

    // Inefficient, but save all the projects
    Projects.save($scope.projects);

    task.title = "";
  };

  $scope.newTask = function() {
    $scope.taskModal.show();
  };

  $scope.closeNewTask = function() {
    $scope.taskModal.hide();
  }

  $scope.toggleProjects = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };


  // Try to create the first project, make sure to defer
  // this by using $timeout so everything is initialized
  // properly
  $timeout(function() {
    if($scope.projects.length == 0) {
      while(true) {
        var projectTitle = prompt('Your first project title:');
        if(projectTitle) {
          createProject(projectTitle);
          break;
        }
      }
    }
  });

});

الهيئة في التعليمات البرمجية أيون جنبا القوائم كما يلي :: 

<ion-side-menus>

<!-- 中心内容 -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <button class="button button-icon" ng-click="toggleProjects()">
      <i class="icon ion-navicon"></i>
    </button>
    <h1 class="title">{{activeProject.title}}</h1>
    <!-- 新增按钮 -->
    <button class="button button-icon" ng-click="newTask()">
      <i class="icon ion-compose"></i>
    </button>
  </ion-header-bar>
  <ion-content scroll="false">
    <ion-list>
      <ion-item ng-repeat="task in activeProject.tasks">
        {{task.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu-content>

<!-- 左边栏 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
  <h1 class="title">Projects</h1>
  <button class="button button-icon ion-plus" ng-click="newProject()">
  </button>
</ion-header-bar>
<ion-content scroll="false">
  <ion-list>
    <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
      {{project.title}}
    </ion-item>
  </ion-list>
</ion-content>
</ion-side-menu>

</ion-side-menus>

محاولة »