Is there something like initialize module once in angular?

angularjs

Solution

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.

Problem

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?

Original source