CODEWITHSUNDEEP
javascriptangularjs
Alon
Alon

Reputation: 11955

Can't manage to run a simple angular js example

I wrote a very simple angular js sample that doesn't work and I don't understand why.

If anyone sees what I did wrong please let me know, and if not, what steps should I take in order to face it?

this is my index.html:

<html>
<head>
<script src="/assets/libs/angular-1.4.7.js"></script>
<script src="/assets/libs/angular-ui-router.js"></script>
<script src="app.module.js"></script>
</head>
<body ng-app="example">
This is the index level
<br>
<div ui-view></div>
</body>
</html>

This is my only view (profile.html):

This is a profile page

And this is the js file:

var example = angular.module("example", ['ui.router']);

example.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state("profile", {
            url: "profile",
            templateUrl: "templates/profile"
        })
    $urlRouterProvider.otherwise("/profile")
});

I would expect the result to be:

This is the index level
This is a profile page

But this is what I get:

This is the index level

All the js file pathes are correct because I can see them in the developer tool.

Any help will be profoundly appreciated!

Upvotes: 1

Views: 52

Answers (2)

maurycy
maurycy

Reputation: 8465

I think that its not working for you because templateUrl isn't correct. It should be correct path to a file together with file extension (unless you use something on backend or the template was compiled and named with templates/profile) but angular will make an XHR call to get that file

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

As you have .otherwise redirect to /profile, you should change you URL of state definition to below, so that ui-router will loaded the correct state with correct template.

$stateProvider
  .state("profile", {
     url: "/profile",
     templateUrl: "templates/profile" //make sure this template has correct path
})

Upvotes: 1

Related Questions