javascript - Cannot switch view in HTML5 mode in AngularJS -
i playing around this code make work html5 links. somehow not able make work: view not resolved url. in addition, not clear whether need put "/" in front of view name. if do, browser url link shows "file:///addstudent" without base, on other hand , if not, see url base. supposed that? in case see error message: "this webpage not found". doing wrong here? thanks!
testangularjs.htm
<html> <head> <title>angular js views</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> <base href="file:///home/myusername/projects/parser_ui/"> </head> <body> <h2>angularjs sample application</h2> <div ng-app="mainapp"> <p><a href="addstudent">add student</a></p> <p><a href="viewstudents">view students</a></p> <div ng-view></div> <script type="text/ng-template" id="addstudent.htm"> <h2> add student </h2> {{message}} </script> <script type="text/ng-template" id="viewstudents.htm"> <h2> view students </h2> {{message}} </script> </div> <script> var mainapp = angular.module("mainapp", ['ngroute']); mainapp.config["$locationprovider", "$routeprovider", function($routeprovider, $locationprovider) { // use html5 history api $locationprovider.html5mode(true); $routeprovider. when('/addstudent', { templateurl: 'addstudent.htm', controller: 'addstudentcontroller' }). when('/viewstudents', { templateurl: 'viewstudents.htm', controller: 'viewstudentscontroller' }). otherwise({ redirectto: 'addstudent' }); }]; mainapp.controller('addstudentcontroller', function($scope) { $scope.message = "this page used display add student form"; }); mainapp.controller('viewstudentscontroller', function($scope) { $scope.message = "this page used display students"; }); </script> </body> </html>
runs in plunkr not locally here:
<!doctype html> <html> <head> <title>angular js views</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> <base href="/"> </head> <body> <h2>angularjs sample application</h2> <div ng-app="mainapp"> <p><a href="/addstudent">add student</a></p> <p><a href="/viewstudents">view students</a></p> <div ng-view></div> <script type="text/ng-template" id="addstudent.htm"> <h2> add student </h2> {{message}} </script> <script type="text/ng-template" id="viewstudents.htm"> <h2> view students </h2> {{message}} </script> </div> <script> var mainapp = angular.module("mainapp", ['ngroute']); mainapp.config(["$locationprovider", "$routeprovider", function($locationprovider, $routeprovider) { // use html5 history api $locationprovider.html5mode(true); $routeprovider. when('/addstudent', { templateurl: 'addstudent.htm', controller: 'addstudentcontroller' }). when('/viewstudents', { templateurl: 'viewstudents.htm', controller: 'viewstudentscontroller' }). otherwise({ redirectto: '/addstudent' }); }]); mainapp.controller('addstudentcontroller', function($scope) { $scope.message = "this page used display add student form"; }); mainapp.controller('viewstudentscontroller', function($scope) { $scope.message = "this page used display students"; }); </script> </body> </html>
Comments
Post a Comment