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 <div ng-app="MyApp"> instead of <div ng-app="MyApp" and the last sentence also need a closing > — Ricconnect
– Ricconnect, Commented Jan 30, 2015 at 9:28
hey i had not noticed @Ricconnect 's comment while posting my answer. — chandings
– chandings, Commented Jan 30, 2015 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
– droidev, Commented Jan 30, 2015 at 10:48
You are still missing a closing tag for your html tag :) </html has to be </html>. Besides that, your code looks fine I think. — Ricconnect
– Ricconnect, Commented Jan 30, 2015 at 11:07
that all fine in my editor, but still the same error, I think the error might be related with routeProvider — droidev
– droidev, Commented Jan 30, 2015 at 11:10

Community · Accepted Answer · 2017-05-23 12:07:53Z

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, 2017 at 12:07

CommunityBot

11 silver badge

answered Jan 30, 2015 at 10:50

Neetu

363 bronze badges

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

5 Comments

droidev Over a year ago

nope, I have added both angular.js as well as angular-route.min.js

Neetu Over a year ago

I've created a plunker with your code which has the stuff working. See this plnkr.co/edit/4pGxWf7aKzZ5PxOxZpuM?p=preview

droidev Over a year ago

oh thats is really cool, and it is working fine in plunker, but then why in not here :D

chandings Over a year ago

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

droidev Over a year ago

@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

chandings · Accepted Answer · 2015-01-30 10:37:28Z

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, 2015 at 10:37

chandings

5493 gold badges9 silver badges23 bronze badges

Collectives™ on Stack Overflow

AngularJs View not showing

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related