手册
目录
收藏805
分享
阅读27909
更新时间2022-04-11
前面的章节中我们已经学会了 ionic 框架如何导入到项目中。
接下来我们将为大家介绍如何创建一个 ionic APP 应用。
ionic 创建 APP 使用 HTML、CSS 和 Javascript 来构建,所以我们可以创建一个 www 目录,并在目录下创建 index.html 文件,代码如下:
Todo 
以上代码中,我们引入了 Ionic CSS 文件、 Ionic JS 文件及 Ionic AngularJS 扩展ionic.bundle.js(ionic.bundle.js)。
ionic.bundle.js 文件已经包含了 Ionic核心JS、AngularJS、Ionic的AngularJS扩展,如果你需要引入其他 Angular 模块,可以从 lib/js/angular 目录中调用。
cordova.js 是在使用 Cordova/PhoneGap 创建应用时生成的,不需要手动引入,你可以在 Cordova/PhoneGap 项目中找到该文件,所以在开发过程中显示 404 是正常的。
接下来我们来实现一个包含标题、侧边栏、列表等的应用,设计图如下:

侧边栏创建使用 ion-side-menus 控制器。
编辑我们先前创建的 index.html 文件,修改
内的内容,如下所示:控制器解析:
ion-side-menus:是一个带有边栏菜单的容器,可以通过点击按钮或者滑动屏幕来展开菜单。
ion-side-menu-content:展示主要内容的容器,可以通过滑动屏幕来展开menu。
ion-side-menu:存放侧边栏的容器。
接下来我们创建一个新的 AngularJS 模块,并初始化,代码位于 www/js/app.js 中:
angular.module('todo', ['ionic'])在 index.html 文件的 上面引入 app.js 文件:
修改 index.html 文件 body 标签的内容,代码如下所示:
Todo
Projects
以上步骤我们已经完成了 ionic 基本 APP 的应用。
首先创建一个控制器 TodoCtrl:
在app.js文件中,使用控制器定义列表数据:
angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope) {
  $scope.tasks = [
    { title: 'php中文网' },
    { title: 'www.php.cn' },
    { title: 'php中文网' },
    { title: 'www.php.cn' }
  ];
});在index.html页面中数据列表我们使用 Angular ng-repeat 来迭代数据:
Todo
{{task.title}} 
修改后 index.html body 标签内代码如下:
Todo
{{task.title}} Projects
修改 index.html 在 后添加如下代码:
以上代码中我们通过 定义了新的模板页面。
表单提交时触发 createTask(task) 函数。
ng-model="task.title" 会将表单的输入数据赋值给 task 对象的 title 属性。
修改  
Todo
{{task.title}} 
app.js 文件中,控制器代码如下:
angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope, $ionicModal) {
  $scope.tasks = [
    { title: 'php中文网' },
    { title: 'www.php.cn' },
    { title: 'php中文网' },
    { title: 'www.php.cn' }
  ];
  // 创建并载入模型
  $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();
  };
});通过以上步骤我们已经实现了新增功能,现在我们为 app 添加侧边栏功能。
修改{{activeProject.title}}
{{task.title}} 
添加侧边栏:
Projects
{{project.title}} 
这里我们创建一个新的js 文件 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;
        }
      }
    }
  });
});body 中 ion-side-menus 代码如下::
{{activeProject.title}}
{{task.title}} Projects
{{project.title}} 
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
							
							共5课时
17.2万人学习
							
							共49课时
77万人学习
							
							共29课时
61.7万人学习
							
							共25课时
39.3万人学习
							
							共43课时
70.9万人学习
							
							共25课时
61.6万人学习
							
							共22课时
23万人学习
							
							共28课时
33.9万人学习
							
							共89课时
125万人学习