Base solution for your next web application
Open Closed

Moving from AngularJS to Angular 2 #3338


User avatar
0
kacey created

I decided to try out my abilities with Angular 2 by trying to design the SimpleTaskSystem in angular 2. As a novice in angular 2, I am having issues calling the C# GetTasks method in the angular project. There are no samples in angular 2 to guide me on how to do it.

The following AngularJS code is what I am trying to do with angular 2:

$scope.$watch('selectedTaskState', function(value) {
                vm.refreshTasks();
            });

            vm.refreshTasks = function() {
                abp.ui.setBusy( //Set whole page busy until getTasks complete
                    null,
                    taskService.getTasks({ //Call application service method directly from javascript
                        state: $scope.selectedTaskState > 0 ? $scope.selectedTaskState : null
                    }).success(function(data) {
                        vm.tasks = data.tasks;
                    })
                );
            };

What I was trying to do in Angular 2:

@Component({
  //selector: 'app-list',
  templateUrl: './list.component.html',
  animations: [appModuleAnimation()],
  styleUrls: ['./list.component.css']
})
export class ListComponent extends AppComponentBase {

  constructor(injector: Injector, private _taskService: TaskServiceProxy) {
      super(injector);
  }

  tasks: TaskDto[] = [];
  taskInput: GetTaskInput = null;

  ngOnInit() {
      this.getTasks();
  }

  getTasks(): ListOfTaskDto {
      this._taskService.getTasks().subscribe
  }

}

[b]The Method in C#[/b]

public List<TaskDto> GetTasks(GetTaskInput input)
        {
            var tasks = _taskRepository.GetAllWithUsers(input.AssignedUserId, input.State);

            return new List<TaskDto>(tasks.MapTo<List<TaskDto>>());
        }

Having some of the samples already on the website in Angular 2 will go a long way in helping newbies like me intending a quick jump on the technology to take on impending projects. Thanks.


No answer yet!