CODEWITHSUNDEEP
angularjs
Prabhat Kashyap
Prabhat Kashyap

Reputation: 13

AngularJS unable to load view

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]

Upvotes: 1

Views: 195

Answers (4)

LJ.Wizard
LJ.Wizard

Reputation: 605

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.

Upvotes: 0

Naga Sandeep
Naga Sandeep

Reputation: 1431

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?

Upvotes: 0

jan_kiran
jan_kiran

Reputation: 302

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

Upvotes: 0

squaleLis
squaleLis

Reputation: 6484

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>

Upvotes: 1

Related Questions