ionic_demo

依赖和注入

angular-resource

bower install angular-resource@1.5.3 --save

<script src="lib/angular-resource/angular-resource.js"></script>

angular.module('myApp', ['ngResource']);

angular-underscore-module

bower install angular-underscore-module --save

<script src="lib/underscore/underscore-min.js"></script>
<script src="lib/angular-underscore-module/angular-underscore-module.js"></script>

angular.module('myApp', ['underscore'])

config

$resourceProvider.defaults.stripTrailingSlashes = false;
$resourceProvider.defaults.actions.update = {
    method: 'PUT',
    params: {
      id: "@id"
    }
};
$resourceProvider.defaults.actions.patch = {
    method: 'PATCH',
};

list

controller

var task = $resource('url/:id/');
task.get(function (res) {
    $scope.taskList = res;
}, function (err) {
    alert(JSON.stringify(err));
})

$scope.toDetail = function (item) {
    Task.detail = _.clone(item);
    $state.go('tab.task-detail',{
        id:item.id
    })
}

$scope.toAdd = function () {
    $state.go('tab.task.detail',{
        id:0
    })
}

html

1.title
    <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-android-add" ng-click="toAdd()"></button>
    </ion-nav-buttons>
2.list
    <ion-item class="item item-icon-left" ng-repeat="item in taskList" ng-click="toDetail(item)">
        <i ng-if="item.is_completed" class="icon ion-checkmark-round"></i>
        <span>{{item.title}}</span>&nbsp;<span>{{item.created | date:'yyyy/MM/dd' }}</span>
        <p>{{item.description}}</p>
    </ion-item>

doRefresh

<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>

function getData() {
    Task.getTask.get(function (res) {
        $scope.taskList = res;
    }, function (err) {
        alert(JSON.stringify(err));
    }).$promise.finally(function () {
        $scope.$broadcast('scroll.refreshComplete');
    });
}

config timestamp

$httpProvider.interceptors.push(function () {
    return {
        'request': function (config) {
            config.url += (config.url.indexOf("?") === -1 ? "?" : "&") + "v=" + Date.now();
            return config;
         }
    };
});

details

controller

1.route
    .state('tab.task-detail', {
        url: '/account/:id',
        views: {
        'tab-account': {
            templateUrl: 'templates/task-detail.html',
            controller: 'TaskDetailCtrl'
             }
        }
    });

2.factory
    .factory('Task', function ($resource) {
        var task = {};
        task.detail = {};
        task.getTask = $resource('url/:id/');
        return task;
    })

3.controller
    var id = $stateParams.id;
    var isNew = id == 0 ? true : false;

    $scope.data = isNew ? {
        title:null,
        description:null
    } : _.clone(Task.detail);

    $scope.addTask = function () {
        if (isNew) {
            task.save($scope.data,function () {
                $ionicHistory.goBack();
            });
        } else {
            Task.getTask.put($scope.data,function () {
                $ionicHistory.goBack();
            });
        }
    }

    $scope.deleteTask = function () {
        Task.getTask.delete({id:id});
    }

html

<ion-nav-buttons side="right">
    <button ng-if="data.id != null" class="button button-icon icon ion-minus-round" ng-click="deleteTask()"></button>
</ion-nav-buttons>


<label class="item item-input">
    <input ng-model="data.title" type="text" placeholder="标题">
</label>
<label class="item item-input">
    <textarea ng-model="data.description" rows="6" placeholder="对该任务的描述"></textarea>
</label>
<button ng-disabled="(data.title == null || data.title == '') && (data.description == null || data.description == '')" class="button button-block button-positive" ng-click="addTask()">提交</button>