0

I have a login page, and a home page and the way I am implementing them is that each has its own module. Login page has loginApp and home page has myApp. When I click the submit, I want to navigate to home.html.

In my index.html(login page), I have this:

   <script>
     angular.module("whole", ["loginApp", "myApp"]);
   </script>

And at top I declared this:

<html ng-app="whole" class="ng-scope">

Now I am stuck at this ngRoute. I have this:

"use strict";
var lapp = angular.module("loginApp", ["ngRoute", "ngCookies"]);

lapp.config(["$routeProvider", function ($routeProvider) {
    $routeProvider
            .when("/", {
                templateUrl: "index.html"
            })
            .when("/home", {
                templateUrl: "home.html"
            })
            .otherwise({redirectTo: '/'});
}]);

and this in my loginCtrl:

$scope.login = function () {
        var credentials = {
            username: $scope.username,
            password: $scope.password
        };
        Auth.login(credentials, function (res) {
            init();
            $location.path("views/home.html");
        }, function (err) {
            init();
        });

and this in my html:

<div ng-controller="loginCtrl" class="login">
  <form ng-submit="login()" method="post" name="form" novalidate>  
   <!--two inputs and stuff-->
   <input type="submit" value="Login">
 <!--Then some closing tags, whatever-->

My initial url is :

http://localhost:8000/public_html/

after I click submit(login), it changes to

http://localhost:8000/public_html/views/home.html#/basic

but then the view doesn't change unless I refresh the page. There was another post about this but he did a typo and I am sure I did type "templateUrl" correctly. I do not even have an idea about what might have caused this bug. I just assumed ngRoute.

halfer
  • 18,701
  • 13
  • 79
  • 158
Benson Zhang
  • 125
  • 1
  • 9
  • obviously.. you need to add another path like `.when("/home", { templateUrl: "views/home.html" })` and point it in your `$location.path('/home')` – Nirus Feb 11 '15 at 11:51
  • Yeah I added that. I had that long time ago before I start messing around with it... Still, the view wouldn't change. – Benson Zhang Feb 11 '15 at 12:02
  • 1
    you are still using the `.otherwise` incorrectly. you should be re-directing to a *route*, not to a *file*. try `.otherwise({redirectTo: '/'});` – Claies Feb 11 '15 at 12:05
  • ok try with `window.location.href= "#/home"` insteat of `$location.path` if its still not working.. check the location of your html files.. – Nirus Feb 11 '15 at 12:11
  • Well... window.location.href = "views/home.html" works. But then I don't even need $location. I guess it was my bad. – Benson Zhang Feb 11 '15 at 12:21
  • That's wrong practice. From your answer's above what i came to know is the **home.html** is not loading inside `ng-view` but its separately loaded as another HTML page which is wrong. see your debug console for errors.. – Nirus Feb 11 '15 at 12:25
  • I would suggest you to paste a jsfiddle link .. Yor error might be related to CORS if yes follow http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome – Nirus Feb 11 '15 at 12:26
  • But that's what I am aiming for. I don't want a huge module that handles both login and graphs (in home.html). – Benson Zhang Feb 11 '15 at 12:27
  • Then why are you using `ng-route` that the defy the purpose on the whole.. – Nirus Feb 11 '15 at 12:29

1 Answers1

2

You're missusing the '.otherwise'

You need to seperate the understanding between a templateUrl to path.

A template url is a url points on an html file that will get injected into the ng-view directive

A path is your surfix of the url telling your router which templateUrl (and other configs) should be used

For example:

App config block:

$routeProvider
   .when("/login", {
         templateUrl: "login.html"
     })
   .when("/home", {
         templateUrl: "home.html"
     })
     .otherwise({redirectTo: '/home'}); <-- if no path is matched, use this path

Controller:

  $scope.login = function () {
    var credentials = {
        username: $scope.username,
        password: $scope.password
    };

    Auth.login(credentials, function (res) {
        init();
        $location.path("/home");
    }, function (err) {
        init();
    });
Ben Diamant
  • 5,706
  • 1
  • 31
  • 48