html5 - Routing trouble in Angular & NodeJS [angular] -


i have problem angular js, i've created login.html & home.html.. after login want change page home.html.

my routing not working, default url localhost/angular <- display login.html after login url changes localhost/home, wont display home.html

i tried routing "realpath" localhost/angular/view/home.html still no good

my folder & file order

  • angular (folder keep angular lib)
  • app (folder keep app.js routing)
  • view (folder keep home.html)
  • login.html (as index)
  • server.js (node.js server)
  • user_auth.js (function login)

my code login.html

<html ng-app="myapp" > <head>     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>      <script src="angular-1.0.6/angular.js"></script>     <script src="app/js/app.js"></script>  </head> <title>desainku</title> <body> <h2>login</h2>          <div  ng-controller="ajaxctrl" >             <p>                 <label>username:</label>                 <input type="text" name="username" ng-model="username" />             </p>             <p>                 <label>password:</label>                 <input type="password" name="password" ng-model="password" />             </p>              <input type="submit" value="submit" ng-click="submitpost()" />            <p>{{result}}</p>  </div> </body></html>

my code app.js (routing , send server)

var app = angular.module('myapp', []); app.config(['$routeprovider','$locationprovider',function($routeprovider, $locationprovider) {     $locationprovider.html5mode(true);     $routeprovider.when('/angular/home', {         templateurl: 'view/home.html',         controller : 'homectrl'     }); }]); function homectrl($scope){     alert('someone call me'); } app.controller('ajaxctrl', function($scope, $location) {     var url = "http://localhost:7788/login";     $scope.submitpost = function() {         $.ajax({             url: url,             type: 'post',             datatype: 'json',             data: {username: $scope.username, password: $scope.password},             success: function(data) {                 $scope.$apply(function(){                 $scope.result=data.message;                     if (data.status === 'true') {                         alert($location.path());                         $location.path('home').replace();                 }                 });            },             error: function(data) {                 alert('error data server');             }         });     }; });'

my code server.js & user_auth.js

------------server     var express     = require ('express'),         app         = new express(),          calldb      = require ("./user_auth.js"),         fs          = require('fs');     app.post('/login',calldb.login);  ------------user_auth  exports.login = function(req, res) {     conndb.check_user(req.body, function(err) {         console.log(req.header);         res.header("access-control-allow-origin", "*");         res.header("access-control-allow-headers", "content-type,x-requested-with");         if (err) {             res.send(json.stringify({status: 'false', message: 'error login'}));          } else {             res.send(json.stringify({status: 'true', message: 'succesfull login'}));         }     }); };

user2401192,

first things first need declare ng-view in html :

    <div ng-view></div>

now when templateurl changes ( e.g. execute $location.path('home').replace(); ), 

$routeprovider.when('/angular/home', {     templateurl: 'view/home.html',     controller : 'homectrl' });

your ng-view replaced content of new url. in case view/home.html.

two things i'd add :

  1. don't use classic $.ajax(..), use $http service, because has nice advantages of promise apis, , extremely useful http interceptors ( might not sound - e.g. showing loading splash or intercepting 403 unauthorized requests.
  2. nothing :), there 1 thing actually.

Comments

Post a Comment