#ionic官方Todo Guide

代码在
https://github.com/gongbaodd/myExperinments/tree/ionic_todo 一直想写一个app，但是懒得设计，看到ionic官方有个guide而且没有中文版，所以写一个。

1. 在head中添加对应的css和js

2. body添加controller

3. Todo的界面，分别是左边栏（负责分配todo的类型——projects）和主界面（负责分配每一个todo项——tasks） … …

4. Todo的行为 angular.module(‘todo’,[‘ionic’]) .factory(‘Projects’,function() { … }） .controller(‘TodoCtrl’,function($scope,$timeout,$ionicModal,Projects,$ionicSideMenuDelegate) { … })

5. 左边栏结构

   Projects

   {{project.title}}

6. 左边栏行为 .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){ return { title:projectTitle, tasks:[] }; }, getLastActiveIndex:function(){ return parseInt(window.localStorage[‘lastActiveProject’])||0; }, setLastActiveIndex:function(index){ window.localStorage[‘lastActiveProject’] = index; } } })

7. 主界面结构

   Todo

   {{task.title}}

8. 主界面行为 .controller(‘TodoCtrl’,function($scope,$timeout,$ionicModal,Projects,$ionicSideMenuDelegate) {

    var createProject = function(projectTitle){
        var newProject = Projects.newProject(projectTitle);
        $scope.projects.push(newProject);
        Projects.save($scope.projects);
        $scope.selectProject(newProject,$scope.projects.length-1);
    }
   
    $scope.projects = Projects.all();
   
    $scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];
   
    $scope.newProject = function() {
        var projectTitle = prompt("Project name");
        if(projectTitle){
            createProject(projectTitle);
        }
    };
   
    $scope.selectProject = function(project,index){
        $scope.activeProject = project;
        Projects.setLastActiveIndex(index);
        $ionicSideMenuDelegate.toggleLeft(false);
    };
   
    $ionicModal.fromTemplateUrl('new-task.html',function(modal) {
        $scope.taskModal = modal;
    },{
        scope:$scope,
        animation:'slide-in-up'
    });
   
    $scope.createTask = function(task) {
   
        if(!$scope.activeProject||!task){
            return ;
        }
        $scope.activeProject.tasks.push({
            title:task.title
        });
        $scope.taskModal.hide();
    
        Projects.save($scope.projects);
    
        task.title = "";
    };
   
    $scope.newTask = function() {
        $scope.taskModal.show();
    };
    $scope.closeNewTask = function() {
        $scope.taskModal.hide();
    };
    $scope.toggleProjects = function() {
        $ioncSideMenuDelegate.toggleLeft();
    };
   
    $timeout(function() {
        if($scope.projects.length == 0){
            while(true){
                var projectTitle = prompt('Your first project title');
                if(projectTitle){
                    createProject(projectTitle);
                    break;
                }
            }
        }
    })
    });
    

9. 新建项目的模态对话框 Cancel

   Create Task