CODEWITHSUNDEEP
angularjs
user2025527
user2025527

Reputation: 129

Is there something like initialize module once in angular?

Can I have loading some data once in angular module? I tried to use .run() but it gets called whenever page is accessed. For Example: say there are 2 html pages belonging to 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 to 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 to 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 I navigate from one page to another this .run() is getting called again and again with cnt as 1. Is it possible to have it called once in life- time of module getting initialized? Or what is the other way?

Upvotes: 3

Views: 8148

Answers (1)

lucuma
lucuma

Reputation: 18339

It seems you are missing some basics such as a controller. The typical angular setup is having an ng-view for your app and loading the other pages via routing. Here is a 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 this is where you load data or whatever ONE time');  // this only runs ONE 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">
  This is the main page. Main nav:

   <a ng-href="#/view1">Go to Page1</a>&nbsp;&nbsp;
    <a ng-href="#/view2">Go to Page2</a>
 <div ng-view></div>
</body>
</html>

You will notice in the html there is an ng-view, when a route is encountered such as #/view the routeprovider looks it up and provides the correct template and calls the appropriate controller. I believe this is the kind of setup you are trying to achieve.

Upvotes: 3

Related Questions