私はangularjsを学習しています。私はそれを理解するのに苦労しています。Angularjs:ルーティング後にコントローラ機能を呼び出す方法
以下のコードの私の希望/期待される動作は次のとおりです。
- ユーザーはrouteProviderはNG-ビューにparis.htmlページをロードし、要求をインターセプトパリリンク(アンカータグ)
- をクリック。
- コントローラの 'getCity'関数は、データを取得し、london.html式に表示されるスコープ変数を設定します。
しかし、HTMLページがng-viewに読み込まれたときに 'getCity'関数を使用するようにangularjsを設定する方法がわかりません。私が得ることができる最も近いのは、CityController内から 'getCity'関数を呼び出すことです。これは、リンクがクリックされたときだけでなく、アプリケーション全体(index.html)が読み込まれるときに関数を呼び出すという望ましくない影響を与えるようです。コントローラーにはさまざまな機能があります。
ng-clickを使用してコントローラの機能を呼び出すこともできますが、ルートプロバイダを介してng-viewにHTMLページを読み込む方法がわかりません。
ご協力いただければ幸いです。学習の目的のために構築された小さなアプリから以下のコードを参照してください。
index.htmlを
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
</head>
<body>
<ol>
<li><a href="#/cities/paris">Paris</a></li>
</ol>
<div class="content-wrapper" ng-controller="CityController">
<div ng-view></div>
</div>
<script src="resources/js/app.js"></script>
<script src="resources/js/CityController.js"></script>
</body>
</html>
app.js
var app = angular.module("mainApp", [ 'ngRoute' ]);
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider.
when('/cities/paris', {
templateUrl : 'resources/paris.html',
controller : 'CityController'
}).
otherwise({
redirectTo : ''
});
} ]);
CityController.js
app.controller('CityController', function($scope, $http) {
$scope.getCity = function() {
$http.get('city')
.success(function(response) {
$scope.name = response.name;
$scope.country = response.country;
}).error(function() {
//Output error to console
});
};
//$scope.getCity();
});
それはindex.htmlには、あなたが
paris.html
This is Paris.
<br><br><br>
Name: {{name}}<br>
Country: {{country}}
<br><br><br>