CODEWITHSUNDEEP
angularjsangular-ui-router
j-p
j-p

Reputation: 3828

AngularJS ui.router giving me a blank page

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)

Upvotes: 0

Views: 761

Answers (2)

Jef
Jef

Reputation: 350

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.

Upvotes: 1

laser
laser

Reputation: 570

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

Upvotes: 0

Related Questions