Search code examples
javascriptangularjsangularjs-directiveangularjs-routingng-view

AngularJs View not showing

Hi I am a new comer to angular js. when I load the page it shows two errors

1 - Error: [$injector:unpr]

2 - Error: [$injector:cdep]

HTML

index.html

<body ng-app="MyApp">
    <nav>
        <!-- navbar items displaying here -->
    </nav>
    <div ng-view></div>
</body>
<script src="libs/js/angular.js"></script>
<script src="libs/js/angular-route.min.js"></script>
<!--angular controller file-->
<script src="libs/apps.js"></script>
<script src="libs/controller.js"></script>
<!--Other UI Libraries-->
<script src="libs/js/jquery.min.js"></script>

partials/developers.html

  <section class="developer">

  <div class="container-fluid">
  <div class="col-md-9 col-md-offset-3">
<form ng-submit="check()">
<div class="form-group">
  <div class="col-md-6"> 
    <input type="text" class="form-control" autofocus="true"  ng-model-options="{debounce: 300}" ng-model="search" placeholder="Search text here"/>
    </div>
  </div>

</form> 
  </div>
  <div class="sort col-md-5 col-md-offset-3">
  <label class="formgroup">Sort By</label>
    <select ng-model="order">
      <option value="name" selected="selected">
        Name
      </option>
      <option value="org">
        Organisation
      </option>
      <option value="designation">
        Designation
      </option>
    </select>
    <label class="formgroup">
      <input ng-model="direction" type="radio" name="order" checked>
      Ascending
    </label>
<label class="formgroup">
        <input ng-model="direction" type="radio" name="order" value="reverse">
        Descending
</label>

  </div>
  <div class="col-md">
    <div class="col-md-9 col-md-offset-3">
    <div class="col-md-6 mydiv"  ng-clock>
      <ul ng-show="search  ">
        <li class="items" ng-repeat="item in list | filter:search | orderBy:order:direction" ng-model-options="{ updateOn: 'blur' }">
            <label class="lbl">Name</label><p class="text name" ng-bind="item.name"></p>
            <label class="lbl">Designation</label><p  class="text desig" ng-bind=" item.designation"></p>
            <label class="lbl">Organisation</label><p  class="text org" ng-bind="item.org"></p>
              <div class="clear"></div>
        </li>
      </ul>
    </div>

  </div>

</div><!--Container fluid closes-->

</section>

app.js

var myApp = angular.module("MyApp",[
    'ngRoute',
    'appController'
    ]);

myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
    when('/list',{
        templateUrl : 'partials/developers.html',
        controller:'DeveloperController',
    }).
    otherwise({
        redirectTo: '/list'
    });

}]);

controller.js

var appController = angular.module("appController", []);
appController.controller('DeveloperController', ['$scope','$http',function($scope,$http) {

   $scope.name="asdsas";

}]);

see the console image here

EDIT

this is my directory structure of project. will it make any trouble. I'm not running it on wamp or any other server.

anyone please help me to sort it out

Solution

  • The error is caused due to missing inclusion of ngRoute module. It needs to be included separately

    Try including the following in your scripts

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

    Refer this for more details.