AngularJS ui-router template does not loading

Question

I'm new to AngularJS. I've following egghead.io I've set up a controller and model to retrieve message from input component and display it. I'm using ui-router.

Here's my index.html

<!DOCTYPE html>
<html ng-app="app">
    <head lang="en">
        <meta charset="UTF-8">
        <title> </title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
        <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <div ui-view=""></div>
    </body>
</html>

Here's my app.js

angular.module('app',["ui.router"])

            .config([function($stateProvider) {
                $stateProvider
                    .state('index', {
                        url:"",                 
                        templateUrl:"templates/first.html",
                        controller:"FirstCtr as first"
                    });

            });

            .controller("FirstCtr", function FirstCtr() {
                var first = this;
                first.greeting = "First";

            });

Here's my templates/first.html

<input type="text" ng-model="first.greeting"/>
    <div ng-class="first.greeting">
        {{first.greeting}} {{"World"}}
    </div>

After I go to http://localhost:8080, it was blank and throw this error

Please give me some suggestions.

Pankaj Parkar · Accepted Answer · 2015-07-30 20:07:45Z

1

Your state definition should be be declared controller alias in controllerAs option of state, with it you need to remove the semicolon from config block end.

Also you need to inject $stateProvider dependency properly to avoid error.

Code

angular.module('app', ["ui.router"])

//missed `'$stateProvider'` dependency here
.config(['$stateProvider', function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      templateUrl: "templates/first.html",
      controller: "FirstCtr",
      controllerAs: "first"
    });
}]) //remove semicolon from here as you are appending app in chain

.controller("FirstCtr", function FirstCtr() {
  var first = this;
  first.greeting = "First";
});

Working Plunkr

edited Jul 30, 2015 at 20:07

answered Jul 30, 2015 at 19:41

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

5 Comments

user3698126 Over a year ago

I got 'SyntaxError: missing } after property list in app.js' and [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it.'

Pankaj Parkar Over a year ago

@user3698126 that was my bad.. take a look at update..should work for sure 100%

user3698126 Over a year ago

I'm sorry, but I got SyntaxError: expected expression, got '.' and [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Pankaj Parkar Over a year ago

@user3698126 now take a update again..should fixed now..Also look at error for further detail

Pankaj Parkar Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

AngularJS ui-router template does not loading

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related