AngularJS unable to load view

Question

Index.html

<html ng-app="studentApp">
<head>
  <meta charset="utf-8">
  <title>Angular.js Example</title>
  <script type="text/javascript" src="https://code.angularjs.org/1.4.0/angular.min.js"></script>

  <script src="https://code.angularjs.org/1.4.0/angular-route.min.js"></script>
  <script src=".././app/component/studentApp.module.js"></script>
  <script src=".././app/component/studentApp.route.js"></script>
  <script src=".././app/component/list/list.ctrl.js"></script>
  <script src=".././app/component/list/list.html"></script>
  <script src=".././app/component/list/list.factory.js"></script>

  <link rel="stylesheet" type="text/css" href="../app/assets/style.css">
</head>

<body>
<div class="header">
  <h1>Welcome to my AngularJS Web App</h1>
  <h2>Angular JS UI</h2>
</div>


<div ui-view> </div>

<div class="footer"style="bottom: 0px">
  <h2>This is my footer</h2>
  <h3>Copyright</h3>
</div>
</body>

</html>

studentApp.route.js

angular.module('studentApp').config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('list');

  $stateProvider

    .state('list', {
        url: '/list',
        templateUrl: '.././component/list/list.html',
        controller: 'studentCtrl'
      })
});

studentApp.module.js

//(function (){
    "use strict";
    angular.module('studentApp', [
        'ui.router'
        ])
//}());

list.ctrl.js

angular.module('studentApp').controller('studentCtrl', function($scope,$state ,$http) {

    alert("here");

});

Directory Structure

I'm trying to load list.html in index.html but unsuccessful every time.

I m getting errors:

Uncaught SyntaxError: Unexpected token <

Uncaught Error: [$injector:modulerr]

squaleLis · Accepted Answer · 2016-02-24 09:13:36Z

1

In index.html, you loaded angular-route.min.js that is the default route manager for AngularJS.

Your code wants to use instead angular-ui-router.min.js, that is a popular routing library.

Try to replace

<script src="https://code.angularjs.org/1.4.0/angular-route.min.js"></script>

with

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>

answered Feb 24, 2016 at 9:13

squaleLis

6,5242 gold badges25 silver badges32 bronze badges

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

4 Comments

Prabhat Kashyap Over a year ago

Its giving me error in Google Chrome showing italic_Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. _italic However working on Firefox with a error SyntaxError: expected expression, got '<'

squaleLis Over a year ago

following this, you are loading form file://? What IDE are you using? (Are you a student, isn't it?)

Prabhat Kashyap Over a year ago

Thanks Its working now on localhost, I m using WebStrom and yes I m a student

squaleLis Over a year ago

I recognized WebStorm and I knew that it has a ready-to-use local server, but, well, you discovered before :) very good!

jan_kiran · Accepted Answer · 2016-02-24 09:26:41Z

0

https://code.angularjs.org/1.4.0/angular-route.min.js is route provider which is default router in angular js.

Since you want to stateprovider, have a look into this github which helps to use the stateprovider

https://github.com/angular-ui/ui-router

answered Feb 24, 2016 at 9:26

jan_kiran

3023 silver badges16 bronze badges

Comments

Naga Sandeep · Accepted Answer · 2016-02-24 09:27:38Z

0

Along with the other two answers,

Please remove <script src=".././app/component/list/list.html"></script>

If you need to include list.html in Index.html, you do it like

<script type="text/ng-template" id="../../app/component/list/list/html">
content
<script/>

Please ensure that this path is correct. templateUrl: '.././component/list/list.html', shouldn't there be two ..'s instead of 1?

answered Feb 24, 2016 at 9:27

Naga Sandeep

1,4312 gold badges13 silver badges26 bronze badges

Comments

LJ.Wizard · Accepted Answer · 2016-02-24 09:28:30Z

There are a few issues with your app setup.

Each sub-module (controllers, services etc) needs to have it's own module name. So your sub-modules should look like this:

list.ctrl.js

angular.module('studentApp.controller', [])
.controller('studentCtrl', function($scope,$state ,$http) {

    alert("here");

});

studentApp.route.js

angular.module('studentApp.route', [])
.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('list');

  $stateProvider

.state('list', {
    url: '/list',
    templateUrl: '.././component/list/list.html',
    controller: 'studentCtrl'
  })
});

And then you need to inject your sub-modules into your main module:

studentApp.module.js

angular.module('studentApp', ['studentApp.route', 'studentApp.controller', 'ui.router'])

And then as the other answers mention, you need to change your library, since you are using ui-router instead of Angular's default router.

Collectives™ on Stack Overflow

AngularJS unable to load view

4 Answers 4

4 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Linked

Related