AngularJs View not showing

Question

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

You have a typo in your index.html, first sentence need to be `
` instead of `
` — Ricconnect, Jan 30 '15 at 09:28
hey i had not noticed @Ricconnect 's comment while posting my answer. — chandings, Jan 30 '15 at 10:38
@Ricconnect hei actually I've given like that for a demo, I'm edited the question same as my code, please have a look — droidev, Jan 30 '15 at 10:48
that all fine in my editor, but still the same error, I think the error might be related with routeProvider — droidev, Jan 30 '15 at 11:10
@chandings its not empty it contains lot of code line,I am adding it in the qn anyway, please check — droidev, Jan 30 '15 at 11:22

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

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.

edited May 23 '17 at 12:07

Community

1
1

answered Jan 30 '15 at 10:50

Neetu

36
3

nope, I have added both angular.js as well as angular-route.min.js – droidev Jan 30 '15 at 10:53
I've created a plunker with your code which has the stuff working. See this http://plnkr.co/edit/4pGxWf7aKzZ5PxOxZpuM?p=preview – Neetu Jan 30 '15 at 11:07
oh thats is really cool, and it is working fine in plunker, but then why in not here :D – droidev Jan 30 '15 at 11:12
are you running from a local server? if not it will not load templates. You need to create a localhost using any technology php, node what ever you are comfortable with n run it from that – chandings Jan 30 '15 at 11:32
@Neetu error was with my route.min.js , I dont why, I have downloaded it form angular js official website. now its worknig fine bcs I'm using CDN.. Thnks – droidev Jan 30 '15 at 11:43

score 0 · Answer 2 · answered Jan 30 '15 at 10:37

0

the code provided for index.html is incorrect. See if this helps

<div ng-app="MyApp">
    <div ng-view>
    </div>
</div>

answered Jan 30 '15 at 10:37

chandings

549
3
9
23

AngularJs View not showing

2 Answers2