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?

Answer 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"

    }
);