How to separate UI from controller with angular?

Question

I'm developing angular web app, I have this doubt that whether it's possible to separate UI from controller absolutely clean?

I have a controller method which send request to server to retrieve data. If there's some error occurs, I need to notify the user with some friendly messages. So I'm thinking I have to call certain api of UI framework to notify the user either with a popup or some kind of toast. But doing that, doesn't it mean I'm embedding UI code into my controller logic? Isn't that the opposite of clean separation between UI and controller? If I want to switch to another UI framework, that means I need to alter my controller code as well.

I'm a newbie of web app, hope someone can clarify my doubts. What will you do?

generally you would build services which communicate with external resources or perform third party actions like toast messages... — Claies
– Claies, Commented Jan 22, 2014 at 2:12

Justin Noel · Accepted Answer · 2014-01-22 02:21:51Z

1

I have a controller method which send request to server to retrieve data. If there's some error occurs, I need to notify the user with some friendly messages. So I'm thinking I have to call certain api of UI framework

You don't necessarily need to do this. In your UI, you can have HTML (UI code) that shows the user the problem. Using ng-if, this UI code is hidden from the user. If you controller detects a load failure, it can then set a value on the controller that will do the following

Cause the UI code to display
Optionally, set the display information in the UI code

<div ng-if="displayError">{{errorMsg}}</div>

Then, in your controller, something like this:

MyService.getData().then(
    function(responseData) {

        $scope.goodData = responseData;
    },

    function(failure) {

        $scope.displayError = true;
        $scope.errorMsg = "Failed to Retrieve Data"

    }
);

answered Jan 22, 2014 at 2:21

Justin Noel

6,25511 gold badges47 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aaron Shen Over a year ago

Thanks for such quick response, Justin.

Collectives™ on Stack Overflow

How to separate UI from controller with angular?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related