AngularJS- Routing
- Vorherige Seite AngularJS- Animation
- Nächste Seite AngularJS-Anwendung
ngRoute Das Modul hilft Ihrer Anwendung, eine Single Page Application zu werden.
Was ist Routing in AngularJS?
Wenn Sie zu verschiedenen Seiten in der Anwendung navigieren möchten, aber auch möchten, dass die Anwendung ein SPA (Single Page Application) ist und keine Seitenneuladung erfolgt, können Sie ngRoute Modul.
ngRoute Das Modul leitet Ihre Anwendung zu verschiedenen Seiten weiter, ohne dass das gesamte Anwendungsumfeld neu geladen werden muss.
Beispiel
Navigieren zu "red.htm"、"green.htm" und "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Startseite</a></p>
<a href="#!red">Rote Farbe</a>
<a href="#!green">Grüne Farbe</a>
<a href="#!blue">Blaue Farbe</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
我需要什么？
为了使你的应用程序为路由做好准备，你必须包含 AngularJS Route 模块：
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
然后，您必须将 ngRoute 添加为应用程序模块中的依赖项：
var app = angular.module("myApp", ["ngRoute"]);
现在您的应用程序可以访问提供 $routeProvider 的路由模块。
请使用 $routeProvider 在应用程序中配置不同的路由：
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
它去哪里了？
您的应用程序需要一个容器来放置路由提供的内容。
这个容器就是 ng-view 指令。
可以通过三种不同的方式在应用程序中包含 ng-view 指令：
Beispiel
<div ng-view></div>
Beispiel
<ng-view></ng-view>
Beispiel
<div class="ng-view"></div>
应用程序只能有一个 ng-view 指令，这将是该路由提供的所有视图的占位符。
$routeProvider
Verwenden $routeProvider，您可以定义当用户单击链接时要显示的页面。
Beispiel
定义 $routeProvider：
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
使用应用程序的 config 方法定义 $routeProvider。在应用程序加载时将执行在 config 注册的工作。
Controller
Verwenden $routeProvider，Sie können auch für jede "Ansicht" einen Controller definieren.
Beispiel
Controller hinzufügen:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "Ich liebe London";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "Ich liebe Paris";
});
"london.htm" und "paris.htm" sind einfache HTML-Dateien, in denen Sie AngularJS-Ausdrücke hinzufügen können, genau wie in anderen HTML-Teilen Ihrer AngularJS-Anwendung.
Diese Dateien sehen so aus:
london.htm
<h1>London</h1>
<h3>London ist die Hauptstadt Englands.</h3>
<p>Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich und hat eine Metropolregion von über 13 Millionen Einwohnern.</p>
<p>{{msg}}</p>
paris.htm
<h1>Paris</h1>
<h3>Paris ist die Hauptstadt Frankreichs.</h3>
<p>Der Raum Paris ist einer der größten Bevölkerungszentren in Europa und hat mehr als 12 Millionen Einwohner.</p>
<p>{{msg}}</p>
Template
Im obigen Beispiel haben wir in $routeProvider.when Methode verwendet templateUrl Eigenschaft.
Sie können auch template Eigenschaft, die es Ihnen ermöglicht, HTML direkt im Eigenschaftswert zu schreiben, anstatt auf die Seite zu verweisen.
Beispiel
Schreiben Sie das Template:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Klicken Sie auf die Links, um diesen Inhalt zu ändern</p>"
})
.when("/banana", {
template : "<h1>Banane</h1><p>Bananas enthalten etwa 75% Wasser.</p>"
})
.when("/tomate", {
template : "<h1>Tomate</h1><p>Tomaten enthalten etwa 95% Wasser.</p>"
});
});
otherwise-Methode verwendet
Im obigen Beispiel haben wir $routeProvider die when-Methode verwenden.
Sie können auch otherwise Methoden, wenn keine anderen Routen übereinstimmen, wird sie zur Standardroute.
Beispiel
Wenn neither auf den Link "Banana" noch auf den Link "Tomato" geklickt wurde, teilen Sie ihnen mit:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
template : "<h1>Banane</h1><p>Bananas enthalten etwa 75% Wasser.</p>"
})
.when("/tomate", {
template : "<h1>Tomate</h1><p>Tomaten enthalten etwa 95% Wasser.</p>"
})
.otherwise({
template : "<h1>Kein</h1><p>Es wurde nichts ausgewählt.</p>"
});
});
- Vorherige Seite AngularJS- Animation
- Nächste Seite AngularJS-Anwendung
