2013-04-25 51 views
3

我可以在角度模塊中加載一次數據嗎?我嘗試使用.run(),但每次訪問頁面時都會調用它。舉例來說,假設有屬於同一模塊2個的HTML頁面:有沒有像角度初始化模塊一次?

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; 
}); 
} 
}]); 

,當我瀏覽從一個網頁到另一個此.RUN()是越來越一再呼籲與CNT爲1。是否有可能有它會在模塊的生命週期中調用一次初始化?或者其他方式是什麼?

+0

請指定您想要實現的目的 – 2013-04-25 11:57:40

+0

您在應用程序中缺少控制器和其他一些項目 – lucuma 2013-04-25 13:20:15

回答

3

看來你缺少一些基礎知識,如控制器。典型的角度設置爲您的應用程序提供ng-view,並通過路由加載其他頁面。下面是一個簡單的例子:

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> 

您將在HTML注意到有一個ng-view,遇到路由時如#/view,routeprovider會查找並提供正確的模板並調用相應的控制器。我相信這是你試圖達到的那種設置。

+0

並且.run()是否可以將$ scope作爲參數? – user2025527 2013-04-25 15:02:28

+0

的想法是,運行正在執行特定於應用程序的事情,並且您的控制器正在執行該頁面所需的任何內容。您可能需要爲登錄代碼創建一個服務,並從您的運行/控制器調用您的服務。 – lucuma 2013-04-25 15:04:03