Is it compatible with angular 1.4/material?

[talgatbaltasov]

Is it compatible with angular 1.4/material? if yes, can you give some examples how to use without $scope? because $scope is not available in components coontroller

[sompylasar]

@talgatbaltasov Better use angular-locker as a service.

[egilkh]

I use it with angular-material 0.10 and angular 1.4 with not problem. And I do nothing else than what I have always done.

What do you mean $scope is not available in components controller? Do you have an example that does not work?

[talgatbaltasov]

@egilkh here http://www.codeproject.com/Articles/891436/Introduction-to-Basics-of-Angular-newRouter
Each component will have its own Controller identified by "CapitalizedComponentName"Controller. There is one special thing to note is that this controller is a bit different from other controllers. It doesn't need $scope for two-way binding. Angular wont be able to instantiate the controller if we pass $scope in it. It defines its observable properties on this.

[egilkh]

this.somevariable = $localStorage.somevariable; does not work for you ?

[talgatbaltasov]

angular.module('doctor.home', [])
.controller('HomeController', ["$localStorage", "$http", HomeController]);
// .controller('HomeController', HomeController1);
function HomeController($localStorage, $http) {
this.save = function(email, password){

    $http({
        method: 'POST',
        url: 'http://doctor-auth.lcl/api/auth/auth/login',
        data: "email=" + email + '&password='+password,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .success(function(data, status, headers, config) {
        $http.get('http://doctor-auth.lcl/api/auth/user/authToken?auth_token='+data['auth_token']).
        success(function(data1, status, headers, config) {
            data1 = angular.fromJson(data1);
            $localStorage.email = data1['email'];
            this.email = $localStorage.email;

        }).
        error(function (data1, status, headers, config) {
            alert(data1);
        });
    }).
    error(function(data, status, headers, config) {
        alert(data);
    });

}

}
this doesn't work for me

[egilkh]

angular.module('doctor.home', [])
.controller('HomeController', ["$localStorage", "$http", HomeController]);
// .controller('HomeController', HomeController1);
function HomeController($localStorage, $http) {
    this.email = $localStorage.email;

this.save = function(email, password){

    $http({
        method: 'POST',
        url: 'http://doctor-auth.lcl/api/auth/auth/login',
        data: "email=" + email + '&password='+password,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .success(function(data, status, headers, config) {
        $http.get('http://doctor-auth.lcl/api/auth/user/authToken?auth_token='+data['auth_token']).
        success(function(data1, status, headers, config) {
            data1 = angular.fromJson(data1);
            this.email = data1['email'];;
        }).
        error(function (data1, status, headers, config) {
            alert(data1);
        });
    }).
    error(function(data, status, headers, config) {
        alert(data);
    });

}
}

Could you try this?

[talgatbaltasov]

app.js

---

'use strict';

angular.module('doctor',
['ngMaterial', 'ngStorage','doctor.home', 'doctor.welcome', 'ngNewRouter'])
.controller('AppController', [ '$router', AppController]);
function AppController($router) {
$router.config([
{ path: '/', redirectTo: '/home' },
{ path: '/home', component: 'home' },
{ path: '/welcome', component: 'welcome' }
]);
}
home.html

---

Hello {{home.name}}!

{{home.email}}

{{home.name}}

i have error
................
Failed to instantiate module doctor due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.0/$injector/modulerr?p0=n...)
at Error (native)
at http://doctor.lcl/bower_components/angular/angular.min.js:6:416
at http://doctor.lcl/bower_components/angular/angular.min.js:37:476
at n (http://doctor.lcl/bower_components/angular/angular.min.js:7:322)
at g (http://doctor.lcl/bower_components/angular/angular.min.js:37:50)
at http://doctor.lcl/bower_components/angular/angular.min.js:37:219
at n (http://doctor.lcl/bower_components/angular/angular.min.js:7:322)
at g (http://doctor.lcl/bower_components/angular/angular.min.js:37:50)
at bb (http://doctor.lcl/bower_components/angular/angular.min.js:40:332)
at d (http://doctor.lcl/bower_components/angular/angular.min.js:19:264

[egilkh]

I'd recommend you use angular.js instead of angular.min.js while developing to get more meaningful error messages from angular. p0=n... is not that insightful.

Maybe you can reformat your comment after you use that non-minified one? I suspect you'll see the error more clearly (at least I will).

If you could surround the files with triple backticks for the sources that would be nice too.

[talgatbaltasov]

@egilkh look, this works
angular.module('doctor.home', [])
.controller('HomeController', ["$localStorage", "$http", HomeController]);
// .controller('HomeController', HomeController1);
function HomeController($localStorage, $http) {
this.email = $localStorage.email;
this.save = function(email, password){

    $http({
        method: 'POST',
        url: 'http://doctor-auth.lcl/api/auth/auth/login',
        data: "email=" + email + '&password='+password,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .success(function(data, status, headers, config) {
        $http.get('http://doctor-auth.lcl/api/auth/user/authToken?auth_token='+data['auth_token']).
        success(function(data1, status, headers, config) {
            data1 = angular.fromJson(data1);
            this.email = data1['email'];
            $localStorage.email = data1['email'];
            // this.$storage.name = data1['name'];
            // this.email = this.$storage.email;
            // this.name = this.$storage.name;
            // alert(this.email);
            // alert(data1);
        }).
        error(function (data1, status, headers, config) {
            alert(data1);
        });
    }).
    error(function(data, status, headers, config) {
        alert(data);
    });

}

}

but in another .html i can't get localstorage

Welcome {{welcome.name}}!

{{$localstorage.email}}

[egilkh]

Use {{ email }} in the html. And this.email = $localStorage.email; in the
Controller ?

On Thursday, June 18, 2015, talgatbaltasov notifications@github.com wrote:

@egilkh https://github.com/egilkh look, this works
angular.module('doctor.home', [])
.controller('HomeController', ["$localStorage", "$http", HomeController]);
// .controller('HomeController', HomeController1);
function HomeController($localStorage, $http) {
this.email = $localStorage.email;
this.save = function(email, password){

$http({
    method: 'POST',
    url: 'http://doctor-auth.lcl/api/auth/auth/login',
    data: "email=" + email + '&password='+password,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data, status, headers, config) {
    $http.get('http://doctor-auth.lcl/api/auth/user/authToken?auth_token='+data['auth_token']).
    success(function(data1, status, headers, config) {
        data1 = angular.fromJson(data1);
        this.email = data1['email'];
        $localStorage.email = data1['email'];
        // this.$storage.name = data1['name'];
        // this.email = this.$storage.email;
        // this.name = this.$storage.name;
        // alert(this.email);
        // alert(data1);
    }).
    error(function (data1, status, headers, config) {
        alert(data1);
    });
}).
error(function(data, status, headers, config) {
    alert(data);
});

}

}

but in another .html i can't get localstorage
Welcome {{welcome.name}}!

{{$localstorage.email}}

—
Reply to this email directly or view it on GitHub
#100 (comment).

[egilkh]

Closing. There is no reason why ngStorage should not be compatible with 1.4 or Material (as design or the angular-material module). Tests does not indicate anything wrong with ngStorage in regards to these 2.