How can I remove the need to use $scope with ui-router and services?

Question

My ui-router configuration looks like this:

    var homeAccess = {
        name: 'home.access',
        url: 'Access',
        templateUrl: 'app/access/partials/webapi.html',
        controller: [
                '$scope', 
                'accessService', 
                'testService'   
            function (
                $scope, 
                accessService: IAccessService
                testService: ITestService) {
            $scope.ac = accessService;
            $scope.ts = testService;
        }]
    };

In my HTML I then use the accessService and testSaervice like this:

<input ng-model="ac.statusText" />
<input ng-model="ts.Text" />

From what I understand it would be better if I do not use $scope. So can someone tell me how I could implement this without using $scope?

Why do you think it would be better? Surely the articles you've read that tell you to avoid scope explain what the alternative is. Have you tried anything? What I would change in your code is 1. defining a controller in the router configuration, instead of declaring it outside, in its own file; 2. store a form's model in a singleton service. — JB Nizet, Sep 30 '15 at 06:06
FYI, state configuration `url` values should **always** be prefixed with a forward-slash — Phil, Sep 30 '15 at 06:14
@JBNizet - What do you mean by defining a controller in the router configuration. Am I not doing that in my code? My reason for thinking I should not use $scope came up after listening to the AngularJS 2 lectures that were mentioning not to use $scope. — , Sep 30 '15 at 06:27
Let's say you have 20 routes (medium-sized application), each with a controller od 100 lines. This will quickly make your code unmanageable. Define a controller in its own file, give it a name, and pass the name of the controller to the route. — JB Nizet, Sep 30 '15 at 06:42

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

I don't really see the point unless you've got legitimate reasons for avoiding $scope (see AngularJS - Why use "Controller as vm"?). That being said, you can always use the controller as expression...

controller: ['accessService', 'testService', function(accessService, testService) {
    this.ac = accessService;
    this.ts = testService;
}],
controllerAs: 'homeAccess' // or whatever you want to call it

and in your template

<input ng-model="homeAccess.ac.statusText">
<input ng-model="homeAccess.ts.Text">

Keep in mind that this is still using scope by binding your controller instance to $scope as the controllerAs expression.

edited May 23 '17 at 12:14

Community

1
1

answered Sep 30 '15 at 06:08

Phil

157,677
23
242
245

Thanks for your answer. I was thinking to not use $scope after listening to AngularJS 2 presentations. Would it not be better at this time to prepare for 2 by not using $scope? – Sep 30 '15 at 06:24
@Anne Unless you're actually using Angular 2, I wouldn't worry about it. The next version is such a fundamental change, I doubt there's going to be any easy migration strategy anyway, particularly when using 3rd party tools like ui-router – Phil Sep 30 '15 at 06:36

How can I remove the need to use $scope with ui-router and services?

1 Answers1