Search code examples
javascriptangularjscontrollerurl-routing

ng-view or controller is not working

I'm trying to build a little web-app with AngularJS. I have an index.html at root directory and 3 other html pages in html subdirectory

  • login.html
  • list.html

  • detail.html

    1. At the first time, the index.html has to load login.html. In this page there are 3 input for send data login in another validation system. After login OK:

    1.2 the index.html load the list.html page and, afer clicking over an element of a list

    1.3 the index.html show the details in detail.html. Very typical web-app.

At now, my index.html don't show the login.html code!

There's the code

HTML part

index.html

<!DOCTYPE html>
<html  >
    <head lang="en">
        <meta charset="UTF-8">
        <title>CV Alibo - Tab</title>
        <link rel="stylesheet" href="./css/style.css"/>
        <script src="./lib/angular.js"></script><!-- angular-min.js , version stable by angularJS.org -->
        <script src="./lib/angular-route.js"></script>
        <script src="./js/cvAliboApp.js"></script>
        <script src="./js/cvAliboController.js"></script>
    </head>
    <body ng-app="cvAliboApp">
        <div>
            <h1>Test JS</h1>
            <p>Between two rows, you can see more page</p>
        </div>
        <hr/>
        <div ng-view>
        </div>
        <hr/>
    </body>
</html>

html/login.html

<div ng-controller='cvAliboLogin'>
    <h1>CV Alibo - Login</h1>
    <p>
        <input type="text"    name="username" >
        <input type="text"    name="password" >
        <input type="button"  name="login" >
    </p>
</div>

html/list.html

<div ng-controller='cvAliboList' id="list">
        <h1>LIST</h1>
</div>

html/detail.html

<div ng-controller='cvAliboDetail' id='detail'>
    <h1>DETAIL</h1>
</div>

Javascript

js/cvAliboApp

'use strict';


var cvAliboManager = angular.module('cvAliboApp', ['ngRoute']).
config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl:'html/login.html', controller: 'cvAliboLogin'
      }).when('/list', {
            templateUrl:'html/list.html',   controller: 'cvAliboList'
      }).when('/list/:id', {
            templateUrl:'html/detail.html', controller: 'cvAliboDetail'
      }).otherwise({redirectTo: '/'});
});

js/cvAliboController.js

'use strict';

var cvAliboManager = angular.module('cvAliboApp', []);
    cvAliboManager.controller('cvAliboLogin',
        function cvAliboLogin($scope) {
           alert("cvAliboLogin");
        }
    );

    cvAliboManager.controller('cvAliboList',
        function cvAliboController($scope) {
            alert("cvAliboList");
        }
    );

    cvAliboManager.controller('cvAliboDetail',
            function cvAliboController($scope) {
                alert("cvAliboDetail");
            }
        );

    /*
     * maybe error syntax? TODO ctrl 
    module.run(function($http){
        $http.get('/resources/fakeData.json')
             .success(function(data){
                 alert("OK)");
             })
             .error(function(data){
                 alert('Error');
            });
    });*/
  • AngularJS Version is 1.2.18.
  • The angular-routing file is alone and imported
  • With alert, i see that module.run is uncorrect and i commented this, avoiding syntax error in loading javascript code
  • The JS are imported safely
  • the constructos are declared and implemented

Why my index.html don't show the login.html? Why doesn't it show anything?

Any suggestion is welcome ...

Solution

  • I think the issue is with the first line of your js/cvAliboController.js : By doing var cvAliboManager = angular.module('cvAliboApp', []); you are redefininng your app without any dependency, i.e. without ngRoute, so you can't resolve the routes and nothing gets displayed.

    Try to recall it without the brackets : var cvAliboManager = angular.module('cvAliboApp');