Angular JS: Können zwei verschiedene Seiten dieselbe ng-app und ng-controller haben?

Ich baue einige Webseiten, wo ich den Inhalt mit Hilfe von eckigen zeigen muss.Angular JS: Können zwei verschiedene Seiten dieselbe ng-app und ng-controller haben?

Problem: Die Links, die meine Seite zu einer anderen Seite führen, laden die Seite nicht, sie ändert nur die URL, aber nicht den Inhalt der Seite.

Ich glaube, es passiert, weil ich gleiche ng-app und ng-Controller auf allen Seiten verwende.

Ich tue dies, weil ich gleichen Winkel Skript js auf allen Seiten (dh zentralisiert.)

auf allen Seiten verwenden möge, verwendet es gleichen Ajax-Aufruf mit unterschiedlichen Parametern (nach der Anforderung.)

Gibt es einen Ausweg, damit ich mein angulares Skript zentralisieren kann und das Problem auch gelöst ist.

Dank

Quelle

2016-05-02 kanishka

Wo und wie verwenden Sie die ngApp-Anweisung? Teilen Sie den Code – Satpal

Ich benutze es als: auf allen Seiten Auch wenn ich die Seite aktualisieren, bringt es mich auf die gewünschte Seite (als URL ist bereits geändert) – kanishka

AngularJS ist eigentlich SPA (Single Seite app). Es hat eine Seite mit verschiedenen Ansichten. Verwenden Sie das Routing-Konzept von angularJS, um die Ansichten zu wechseln. Sie müssen nicht zwei verschiedene ng-app-Namen oder Controller-Namen angeben. Jede Ansicht hat ihren eigenen Controller. (überprüfen Sie AngularJS SPA Concept)

Untenstehendes Beispiel könnte Ihnen helfen.

Index.HTML

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-$route-service-production</title> 
 
    
 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script> 
 
    <script src="script.js"></script> 
 
    
 

 
    <script type="text/javascript"> 
 
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />')); 
 
    </script> 
 
</head> 
 
<body ng-app="ngRouteExample"> 
 
    <div ng-controller="MainController"> 
 
    Choose: 
 
    <a href="Book/Moby">Moby</a> | 
 
    <a href="Book/Moby/ch/1">Moby: Ch1</a> | 
 
    <a href="Book/Gatsby">Gatsby</a> | 
 
    <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> | 
 
    <a href="Book/Scarlet">Scarlet Letter</a><br/> 
 

 
    <div ng-view></div> 
 

 
    <hr /> 
 

 
    <pre>$location.path() = {{$location.path()}}</pre> 
 
    <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre> 
 
    <pre>$route.current.params = {{$route.current.params}}</pre> 
 
    <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre> 
 
    <pre>$routeParams = {{$routeParams}}</pre> 
 
</div> 
 
</body> 
 
</html>

book.html

controller: {{name}}<br /> 
 
Book Id: {{params.bookId}}<br />

chapter.html

controller: {{name}}<br /> 
 
Book Id: {{params.bookId}}<br /> 
 
Chapter Id: {{params.chapterId}}

script.js

(function(angular) { 
 
    'use strict'; 
 
angular.module('ngRouteExample', ['ngRoute']) 
 

 
.controller('MainController', function($scope, $route, $routeParams, $location) { 
 
    $scope.$route = $route; 
 
    $scope.$location = $location; 
 
    $scope.$routeParams = $routeParams; 
 
}) 
 

 
.controller('BookController', function($scope, $routeParams) { 
 
    $scope.name = "BookController"; 
 
    $scope.params = $routeParams; 
 
}) 
 

 
.controller('ChapterController', function($scope, $routeParams) { 
 
    $scope.name = "ChapterController"; 
 
    $scope.params = $routeParams; 
 
}) 
 

 
.config(function($routeProvider, $locationProvider) { 
 
    $routeProvider 
 
    .when('/Book/:bookId', { 
 
    templateUrl: 'book.html', 
 
    controller: 'BookController', 
 
    resolve: { 
 
     // I will cause a 1 second delay 
 
     delay: function($q, $timeout) { 
 
     var delay = $q.defer(); 
 
     $timeout(delay.resolve, 1000); 
 
     return delay.promise; 
 
     } 
 
    } 
 
    }) 
 
    .when('/Book/:bookId/ch/:chapterId', { 
 
    templateUrl: 'chapter.html', 
 
    controller: 'ChapterController' 
 
    }); 
 

 
    // configure html5 to get links working on jsfiddle 
 
    $locationProvider.html5Mode(true); 
 
}); 
 
})(window.angular);

Wir können die genaue Lösung untersuchen, wenn Sie Ihren Code veröffentlichen.

Quelle

2016-05-02 08:12:34 MAC

Angular JS: Können zwei verschiedene Seiten dieselbe ng-app und ng-controller haben?

Antwort

Verwandte Themen