Basic angularjs code not working properly

Question

Have installed the angularjs and Twitter.Bootstrap packages succesfully

This is my index.html:

<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script src="Scripts/app.js"></script>
    <link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
    <title>Amazing Todo</title>
</head>
<body>
    <div class="container">
        <div ng-view></div>
    </div>
</body>
</html>

This is my app.js:

var TodoApp = angular.module("TodoApp", []).
    config(function ($routeProvider) {
        $routeProvider.
        when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
            otherwise({ redirectTo: '/' });
    });

var ListCtrl = function ($scope, $location) {
    $scope.test = "testing";
};

And, this is my list.html:

<h1>Test: {{test}}</h1>

This should work fine. However the index.html is not showing the content of list.html. I think the angularjs part is not working properly.

No idea about what am i doing wrong?

You should move all your JS to the footer.

Phill
– Phill

2014-04-27 07:33:17 +00:00
Commented Apr 27, 2014 at 7:33 — Phill
– Phill, Commented Apr 27, 2014 at 7:33
@Phill sorry couldnot get you...could you please elaborate

priyam
– priyam

2014-04-27 07:36:15 +00:00
Commented Apr 27, 2014 at 7:36 — priyam
– priyam, Commented Apr 27, 2014 at 7:36
Like this: pastebin.com/nKTsRfzR

Phill
– Phill

2014-04-27 07:39:42 +00:00
Commented Apr 27, 2014 at 7:39 — Phill
– Phill, Commented Apr 27, 2014 at 7:39
@Phill : it still doesnot work!

priyam
– priyam

2014-04-27 07:44:29 +00:00
Commented Apr 27, 2014 at 7:44 — priyam
– priyam, Commented Apr 27, 2014 at 7:44

callmekatootie · Accepted Answer · 2014-04-27 08:08:39Z

2

Once you have defined a module, you need to define your controllers for that module and not independently.

Thus, your controller should be rewritten as:

TodoApp.controller('ListCtrl', [ '$scope', '$location',
    function ($scope, $location) {
        $scope.test = "Testing";
    }
]);

This should show the view in question.

answered Apr 27, 2014 at 8:08

callmekatootie

11.2k16 gold badges73 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

priyam Over a year ago

thnx @callmekatootie however it still doesnot solve the issue

Radim Köhler · Accepted Answer · 2014-04-27 14:29:30Z

1

I would say, that if you check errors in console (in Chrome or IE press F12) you should see:

...Failed to instantiate module TodoApp due to: Error: [$injector:unpr] Unknown provider: $routeProvider...

The reason for this expectation is that we ask IoC to inject $routeProvider while not correctly listing dependent modules. This is the above code:

var TodoApp = angular
  // here we say: we do not need any other module
  .module("TodoApp", [])
  // here we ask: inject $routeProvider from other module
  .config(function ($routeProvider)

So to make it runing we have to include the module 'ngRoute'

var TodoApp = angular
  // here we say: we need these modules to make our module working properly 
  .module("TodoApp", [
    'ngRoute'
  ])
  // now we can ask for the provider, 
  // using minification-safe syntax
  .config(
  [        '$routeProvider',
  function ($routeProvider) {
      $routeProvider.
      ...
  }]);

And also do not forget to also reference this module scripts:

<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<!-- here we have to load this module -->
<script src="Scripts/angular-route.js"></script>

answered Apr 27, 2014 at 14:29

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

2 Comments

Radim Köhler Over a year ago

Could you share the error from the console, please? I've tried localy and with these changes... it is really working. Do you have angular-route inside the scripts folder?. Summary: 1) if you will append the angular-route.js and 2) change the TodoApp as my snippet shows.. then if the list.html is in the same folder as index.thml ... it must work ;)

Radim Köhler Over a year ago

Here is the plunker: plnkr.co/edit/kHnXwlDcXmbm4poE8s1I - it is working, containing your code plus the above fixes

M22an · Accepted Answer · 2014-04-27 09:53:00Z

0

What is your directory structure can you check if list.html is in the same directory as index.html, if not specify a relative path from the application root?

answered Apr 27, 2014 at 9:53

M22an

1,3021 gold badge19 silver badges35 bronze badges

3 Comments

callmekatootie Over a year ago

Your answer seems more appropriate as a comment.

M22an Over a year ago

This is a bit embaressing, but I posted as an answer coz, i didn't have enough reputation to comment :(

priyam Over a year ago

both list.html and index.html are indeed in the same location

cst1992 · Accepted Answer · 2016-02-26 09:48:43Z

Since no one has posted a full correct answer to this question and it hasn't been closed yet, here is another answer.
This is your function:

var ListCtrl = function ($scope, $location) {
    $scope.test = "testing";
};

This is a bare function, which isn't of much use. You need a controller so that Angular knows what to do with {{ test }}:

<div ng-controller="someController">
    <h1>{{ test }}</h1>
</div>

If you insist on keeping the function as a separate variable, you could do so and still have a controller:

var ListCtrl = function ($scope, $location) {
    $scope.test = "testing";
};

TodoApp.controller('someController', ListCtrl);

This also works.

Despite of this, your UI won't show, as there's an error in it:

var TodoApp = angular.module("TodoApp", [])

You're using $routeProvider and .when(),.otherwise(), for which you need ngRoute as a dependency:

var TodoApp = angular.module("TodoApp", ['ngRoute'])

Your app should work after that.

Collectives™ on Stack Overflow

Basic angularjs code not working properly

4 Answers 4

1 Comment

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related