AngularJS ui.router giving me a blank page

Question

I see a couple unanswered question along these lines - hopefully, I will state this in a way that elicits a solution. Thanks in advance

AngularJS 1 - using grunt

index.html

<!doctype html >
<html ng-app="studentAdmissions" >

    <head>

        <meta charset="utf-8" >
        <meta name="description" content="" >
        <meta name="viewport" content="width=device-width" >

        <title>Student Admissions</title>


        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
        <script src="https://unpkg.com/[email protected]/release/angular-ui-router.js"></script>
    </head>

    <body>

        <!--[if lt IE 10]>
          <p class="browsehappy" >You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" >upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div ui-view ></div>

        <script src="app/app.js" charset="utf-8" ></script>

    </body>

</html>

app/app.js

var app = angular.module( 'studentAdmissions', ['ui.router'] );

app.config( function( $stateProvider, $urlRouterProvider ) {

    $urlRouterProvider.otherwise( '/' );

    $stateProvider
    .state( 'home', {
        url:'/'
        ,template:'<h1>My Home</h1>'
    })

})

I do not get an error, just a blank page.

I have also tried, but the result is the same.

$stateProvider
    .state( 'home', {
        url:'/'
        ,templateUrl:'views/home.html'
})

I am currently scouring the docs, but am not having much luck finding the issue.

I have added the missing file references noted below (thank you) - Console is now showing error, which looks to me like its coming from angularjs.js file - which probably isn't the case.

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=studentAdmissions&p…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.1%2Fangular.min.js%3A21%3A332)

Jef · Accepted Answer · 2017-02-06 20:02:20Z

1

Do you have a script tag linking the angular.js library?

Example:

<script src="vendor/angular.js" type="text/javascript"></script>

This should live in your index.html file.

answered Feb 6, 2017 at 20:02

Jef

3506 silver badges14 bronze badges

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

2 Comments

Jef Over a year ago

Sorry dude, it happens. Did you get your problem fixed tho? Or was there anything else?

Jef Over a year ago

Awesome! Glad to help.

laser · Accepted Answer · 2017-02-06 19:55:20Z

0

May be you need to change <div ui-view ></div> to

<ui-view></ui-view>

You can find example here https://ui-router.github.io/ng1/tutorial/helloworld

answered Feb 6, 2017 at 19:55

laser

5705 silver badges20 bronze badges

3 Comments

j-p Over a year ago

this did not work, however, now i get a missing angular error - app.js:1 Uncaught ReferenceError: angular is not defined at app.js:1

laser Over a year ago

@jpmyob that is another error. You are missing angularjs library at all.

laser Over a year ago

@jpmyob see in example link: <script src="lib/angular.js"></script> <script src="lib/angular-ui-router.js"></script>

Collectives™ on Stack Overflow

AngularJS ui.router giving me a blank page

2 Answers 2

2 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Related