angularjs - Is there something like initialize module once in angular? -
can have loading data once in angular module? tried use .run() gets called whenever page accessed. example: there 2 html pages belonging same module:
testpage1.html: <html ng-app="myapp"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="js/angular.min.js"></script> <script src="js/jquery-1.8.2.js"></script> <script src="js/app.js"></script> </head> <body> <p><a ng-href="testpage2.html">go page2</a></p> </body> </html> testpage2.html: <html ng-app="myapp"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="js/angular.min.js"></script> <script src="js/jquery-1.8.2.js"></script> <script src="js/app.js"></script> </head> <body> <p><a ng-href="testpage1.html">go page1</a></p> </body> </html> app.js: var myapp = angular.module('myapp', []); var cnt = 0; myapp.run(['$rootscope', '$http', function(scope, $http) { if(scope.loggedin == undefined || scope.loggedin == null) { $http.get('rest/userdata').success(function(data) { cnt++; alert(cnt); scope.loggedin = true; }); } }]);
when navigate 1 page .run() getting called again , again cnt 1. possible have called once in life- time of module getting initialized? or other way?
it seems missing basics such controller. typical angular setup having ng-view
app , loading other pages via routing. here simple example:
http://beta.plnkr.co/edit/rnzwewxtjfri49bvw50v?p=preview
app.js
var app = angular.module('myapp', []). config(['$routeprovider', function($routeprovider) { $routeprovider.when('/view1', {templateurl: 'testpage1.html', controller: page1ctrl}); $routeprovider.when('/view2', {templateurl: 'testpage2.html', controller: page2ctrl}); $routeprovider.otherwise({redirectto: '/view1'}); }]).run(function () { // instance-injector alert('only run on first page load load data or whatever 1 time'); // runs 1 time }) function mainctrl($scope) { $scope.name = 'main'; } function page1ctrl($scope) { $scope.name = 'page 1'; } function page2ctrl($scope) { $scope.name = 'page 2'; }
html:
<html ng-app="myapp" > <head> <meta charset="utf-8"> <title>angularjs plunker</title> <link rel="stylesheet" href="style.css"> <script>document.write("<base href=\"" + document.location + "\" />");</script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script> <script src="app.js"></script> </head> <body ng-controller="mainctrl"> main page. main nav: <a ng-href="#/view1">go page1</a> <a ng-href="#/view2">go page2</a> <div ng-view></div> </body> </html>
you notice in html there ng-view
, when route encountered such #/view
routeprovider looks , provides correct template , calls appropriate controller. believe kind of setup trying achieve.