Created
October 1, 2015 15:12
-
-
Save hernan604/3eb5e7891941bc79383b to your computer and use it in GitHub Desktop.
angular routes example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Welcome to the Mojolicious real-time web framework!</title> | |
| </head> | |
| <!-- | |
| <body> | |
| <h2>Welcome to the Mojolicious real-time web framework!</h2> | |
| This is the static document "public/index.html", | |
| <a href="/">click here</a> to get back to the start. | |
| </body> | |
| --> | |
| <body> | |
| <div class="ng-scope" ng-app="pathApp" ng-controller="MainCtrl"> | |
| RouterProvider: | |
| <br> | |
| <br> | |
| <a href="#!Book/Edit">Edit</a> | | |
| <a href="#!Book/Delete">Delete</a> | | |
| <a href="#!Book/Add">Add</a> | | |
| <a href="#!Book/Show">Show</a> | | |
| <a href="#!Book/Other">Other</a> | |
| <div ng-view=""><div class="box ng-scope edit" ng-class="classname">Edit</div></div> | |
| </div> | |
| <script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js"></script> | |
| <script> | |
| angular.module('pathApp', [], function ($routeProvider, $locationProvider) { | |
| $locationProvider.hashPrefix('!'); | |
| $routeProvider.when('/Book/Edit', { | |
| template: '<div class="box" ng-class="classname">Edit</div>', | |
| controller: function ($scope) { | |
| $scope.classname = 'edit'; | |
| } | |
| }).when('/Book/Delete', { | |
| template: '<div class="box" ng-class="classname">Delete</div>', | |
| controller: function ($scope) { | |
| $scope.classname = 'delete'; | |
| } | |
| }).when('/Book/Show', { | |
| template: '<div class="box" ng-class="classname">Show</div>', | |
| controller: function ($scope) { | |
| $scope.classname = 'show'; | |
| } | |
| }).when('/Book/Add', { | |
| template: '<div class="box" ng-class="classname">Add</div>', | |
| controller: function ($scope) { | |
| $scope.classname = 'add'; | |
| } | |
| }).when('/Book/Error', { | |
| template: '<div class="box" ng-class="classname">Error Path</div>', | |
| controller: function ($scope) { | |
| $scope.classname = 'error'; | |
| } | |
| }).when('/persons/:id', { | |
| template: '<div class="box" ng-class="classname">SHOW PERSON ID... </div>', | |
| controller: function ($scope) { | |
| $scope.classname = 'person'; | |
| } | |
| }) | |
| .otherwise({ redirectTo: 'Book/Error' }); | |
| // $locationProvider.html5Mode(true); | |
| }); | |
| function MainCtrl($scope) { | |
| $scope.test = '123'; | |
| } | |
| //@ sourceURL=pen.js | |
| </script> | |
| <script src="//codepen.io/assets/editor/live/css_live_reload_init.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment