UI-Router stellt eine Alternative zu ngRoute dar. UI-Router wird vom AngularUI Team entwickelt und setzt auf einen anderen Ansatz als ngRoute. Die Views werden hierbei nicht nur anhand des Pfades verändert, sondern definieren einen „state“. Hierbei kann der Zustand der Seite verändert werden, ohne den Pfad zu verändern. Ein Beispiel
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!-- index.html --> <!DOCTYPE html> <html> <head> <!-- Bootstrap CSS for Layouting --> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/> <!-- AngularJS and UI-Router --> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> <!-- Our application file --> <script src="example.js"></script> </head> <!-- Apply the angular application to our side --> <body ng-app="ui-router-example"> <!-- Navigation --> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" ui-sref="home">UI-Router Example</a> </div> <ul class="nav navbar-nav"> <li><a ui-sref="users">Users</a></li> <li><a ui-sref="about">About</a></li> </ul> </nav> <!-- Main Container --> <div class="container"> <!-- Ui-Router uses ui-view instead of ng-view --> <ui-view /> </div> </body> </html> |
Bootstrap wird hier zum gestalten der Seite genutzt. Ansonsten…