CODEWITHSUNDEEP
asp.net.netangularjsasp.net-mvc-4asp.net-web-api
priyam
priyam

Reputation: 25

Basic angularjs code not working properly

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?

Upvotes: 0

Views: 156

Answers (4)

cst1992
cst1992

Reputation: 3941

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.

Upvotes: 0

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

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>

Upvotes: 1

M22an
M22an

Reputation: 1292

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?

Upvotes: 0

callmekatootie
callmekatootie

Reputation: 11238

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.

Upvotes: 2

Related Questions