javascript - AngularJS share session data between controllers of different partial views? -
i'm new angularjs , don't know whether i'm doing things here right. have welcome , login page. able login on login page , logged on page of application. i'm aware localstorage or cookies better service store session data, wanted try out. when connect user using service in login partial view, session variables of controllers aren't updated. why?
i guess issue quite simple fix , due fact missed something.
thank in advance time.
harald
here comes code:
template html:
<!doctype html> <html lang="en" ng-app="myapp"> <head> <meta charset="utf-8"> <title>yahoo 2014 - welcome</title> <link rel="icon" type="image/png" href="img/favicon.png"> <link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/animations.css"> <link rel="stylesheet" href="css/template.css"> <script src="lib/jquery/jquery-1.10.2.js"></script> </head> <body ng-controller="appctrl"> <header> <nav role="navigation" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="row"> <div class="col xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="navbar-header"> <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="index.html"><img src="img/logo.png" alt="yahoo logo" class="img-responsive navbar-brand"/></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#/group">groupe</a></li> <li><a href="services.html">services</a></li> <li><a href="software.html">logiciels</a></li> <li><a href="sectors.html">secteurs</a></li> <li><a href="join_us.html">rejoignez-nous</a></li> <li><a href="investors.html">investisseurs</a></li> <li><a href="http://www.yahoo.com/">english version</a></li> <li ng-hide="connected" ><a href="#/login">login</a></li> <li ng-hide="!connected"><a href="#/profile" ng-bind="nickname"> </a></li> </ul> </div> </div> </div> </div> </nav> </header> <div ng-view></div> {{connected}} {{username}} <footer> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="row"> <div class="col xs-12 col-sm-12 col-md-12 col-lg-12"> <ul class="nav navbar-nav"> <li><a href="legal.html">mentions légales</a></li> <li><a href="website_plan.html">plan du site</a></li> <li><a href="mailto:webmaster@infotel.com">contacter l'administrateur</a></li> </ul> </div> </div> <div class="row"> <div class="col xs-4 col-sm-4 col-md-4 col-lg-4"> <p>© copyright yahoo 2014</p> </div> </div> </div> </nav> </footer> <!-- in production use: <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> --> <script src="../bower_components/angular/angular.js"></script> <script src="../bower_components/angular-route/angular-route.js"></script> <script src="lib/angular/angular-animate.js"></script> <script src="lib/angular/angular-resource.js"></script> <script src="lib/bootstrap/bootstrap.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script> </body> </html> index.html partial view
<div id="content"> <div class="container-fluid"> <div class="row"> <div class="col xs-12 col-sm-12 col-md-12 col-lg-12"><a id="bannerlink" href="http://www.yahoo.com"><img id="bannerimage" src="img/slider-mobile1.jpg" alt="banner image" class="img-responsive"></a></div> </div> <div class="row"> <div class="articles" ng-repeat="article in articles"> <div class="col xs-4 col-sm-4 col-md-4 col-lg-4"> <h3>{{article.title}}</h3> <p>{{article.content}}</p> </div> </div> </div> </div> </div> login html partial view:
<div id="content" ng-controller="loginctrl"> <form name="login" action="#" ng-submit="login()"> <table> <tr> <td> <p>nickname</p> </td> <td> <input type="text" name="nickname" ng-model="nickname" required> </td> </tr> <tr> <td> <p>password</p> </td> <td> <input type="password" name="password" ng-model="password" required> </td> </tr> </table> <input type="submit" id="submit" value="submit"> </form> </div> app.js:
'use strict'; // declare app level module depends on filters, , services angular.module('myapp', [ 'ngroute', 'myapp.filters', 'myapp.services', 'myapp.directives', 'myapp.controllers' ]). config(['$routeprovider', function($routeprovider) { $routeprovider.when('/index', {templateurl: 'partials/index.html', controller: 'indexctrl'}); $routeprovider.when('/group', {templateurl: 'partials/group.html', controller: 'groupctrl'}); $routeprovider.when('/login', {templateurl: 'partials/login.html', controller: 'loginctrl'}); $routeprovider.otherwise({redirectto: '/index'}); }]); controllers:
'use strict'; /* controllers */ angular.module('myapp.controllers', []) .controller('appctrl', ['$scope', 'session', function(scope, session) { scope.connected=session.isconnected(); scope.username="harald"; scope.login = session.connect(); scope.disconnect = session.disconnect(); scope.$watch('connected', function(){ alert("connected changed!"); }); }]) .controller('indexctrl', [ '$scope', 'article', function(scope, article) { scope.articles = article.query(); }]) .controller('groupctrl', [function() { }]) .controller('loginctrl', [ '$scope', 'session', function(scope, session) { scope.connected=session.isconnected(); scope.login = session.connect(); scope.disconnect = session.disconnect(); }]); services:
'use strict'; /* services */ // demonstrate how register services // in case simple value service. var myappservices = angular.module('myapp.services', ['ngresource']). value('version', '0.1'); myappservices .factory('article', ['$resource', function(resource){ return resource('articles/:articleid.json', {}, { query: {method:'get', params:{articleid:'articles'}, isarray:true} }); }]) .factory('session', function() { var connected = false; var nickname = "unknown"; return{ isconnected : function() { return connected; }, getnickname : function() { return nickname; }, connect : function() { connected = true; window.alert("connected service!"); }, disconnect : function() { connected = false; } } });
isconnected() returns boolean. when change connected in service, assign new value, won't affect $scope.connected
you keep 2 in sync using watch function:
scope.$watch(session.isconnected, function(connected){ $scope.connected = connected; });
Comments
Post a Comment