CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangular-uiangular-ui-bootstrap
Ellone
Ellone

Reputation: 3898

set up AngularUi Application

I'm trying to start a single page application using AngularUi but I'm having trouble making a basic example work. Here are my different files :

index.html :

<!doctype html>
<html lang="en" ng-app="studentDetailApp">
<head>
  <meta charset="UTF-8">
  <title>Student Details App</title>
  <link rel="stylesheet" href="../node_modules/angular-ui-bootstrap/ui-bootstrap-csp.css"/>
</head>

<body>
<div class="row-fluid" ng-controller="StudentController">
  <div class="span2">{{studentName}} </div>
  <div class="span4"><progress percent="studentMark"></progress></div>
</div>

<!--Required JS Files List :start -->
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular/angular-route.js"></script>
<script src="../node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="controllers/controllers.js"></script>
<script src="js/app.js"></script>
<!--Required JS Files List :end -->

</body>
</html>

controller.js :

'use strict';

/* Controllers Module for studentDetailApp application*/
var studentControllerModule = angular.module('studentDetailApp.controllers', ['ngRoute', 'ui.bootstrap']);

/*StudentController: controller for students*/
studentControllerModule.controller('StudentController', function($rootScope, $scope, $location, $routeParams) {

  $scope.studentName = "Sandeep Kumar Patel";
  $scope.studentMark = 75;

});

app.js :

'use strict';

angular.module('studentDetailApp', ['ngRoute', 'studentDetailApp.controllers']).

  config(['$routeProvider', function($routeProvider,StudentController) {

    $routeProvider.when('/', { controller: 'StudentController'});

    $routeProvider.otherwise({redirectTo: '/'});

  }]);

I'm having a progress bar, so I guess AngularUI is properly initialized but it looks like I can't access the controller data.

I'm having this error :

Error: [$injector:modulerr] Failed to instantiate module studentDetailApp due to:

[$injector:modulerr] Failed to instantiate module studentDetailApp.controllers due to:

[$injector:nomod] Module 'studentDetailApp.controllers' 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.

http://errors.angularjs.org/1.4.7/$injector/nomod?p0=studentDetailApp.controllers

minErr/<@http://localhost:8080/node_modules/angular/angular.js:68:12

module/<@http://localhost:8080/node_modules/angular/angular.js:1986:1

ensure@http://localhost:8080/node_modules/angular/angular.js:1910:38

module@http://localhost:8080/node_modules/angular/angular.js:1984:1

loadModules/<@http://localhost:8080/node_modules/angular/angular.js:4390:22

forEach@http://localhost:8080/node_modules/angular/angular.js:336:11

loadModules@http://localhost:8080/node_modules/angular/angular.js:4374:5

loadModules/<@http://localhost:8

Upvotes: 0

Views: 76

Answers (1)

Henry00
Henry00

Reputation: 421

Did you start this project from scratch?

I suggest using Yeoman. It is an Angular project generator

https://github.com/yeoman/generator-angular

Upvotes: 1

Related Questions