-1

enter image description hereI have an empty MVC project, however I do have a folder created by name MyViews and containes html (view1.html and view2.html) while the script html is under the main project folder (Location is below global.asax file).

<html data-ng-app="App">

<head>
  <title></title>
</head>

<body>
  <div>
    <div data-ng-view=""></div>
    <input type="text" name="txtName" data-ng-model="typedName" />
    <br />Typed Name is: {{ typedName }}
    <br />Names:
    <ul>
      <li data-ng-repeat="person in Customers | orderBy:'name' |  filter:typedName ">{{ person.name | uppercase}} - {{ person.city }}
      </li>
    </ul>
  </div>
  <script src="Scripts/angular.min.js"></script>
  <script>
    angular.module('App', []).config(function($routeProvider) {
        $routeProvider
          .when('/View1', {
            controller: 'Fir',
            templateUrl: '/MyViews/View1.html'
          })
          .when('/View2', {
            controller: 'Fir',
            templateUrl: '/MyViews/View2.html'
          })
          .otherwise({
            redirectTo: '/View1'
          });
      })
      .controller('Fir', function($scope) {
        $scope.Customers = [{
          name: 'Kiam',
          city: 'Los Angeles'
        }, {
          name: 'Se',
          city: 'Los Vegas'
        }]
      });
  </script>
</body>

</html>
​

Why views are not loaded? :(

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
Jasmine
  • 5,186
  • 16
  • 62
  • 114
  • Is there any errors ? – Pierre-Alexandre Moller Apr 03 '15 at 14:53
  • Did you load your app with ng-app="App"?? – Christophe Dufour Apr 03 '15 at 14:56
  • Why did you open a new question on the same subject when you are clearly having an active conversation with someone attempting to answer your previous question on the exact same subject (even offering a chat session within the last hour)? http://stackoverflow.com/questions/29433376/why-this-is-not-loading-view1-cshtml-in-mvc-empty-web-application-angular – Claies Apr 03 '15 at 14:57
  • @ChristopheDufour: Yes, I do have it all correct, no luck still. See my updated code above.....I pasted completely. – Jasmine Apr 03 '15 at 15:00
  • ok, so since this seems to be slightly different from your previous question, let's see if we can't figure this out... can you post the contents of your `MyAngularTutorial.html` – Claies Apr 03 '15 at 15:01
  • @Claies: Well observed, same question, but sadly that someone disappeared :( Didn't help me solve my issue, but he did suggested me to have "/" in front. – Jasmine Apr 03 '15 at 15:02
  • @Claies: Good to c u again :) :) i remember u...I am soo slow that I am still on the same video I posted yesterday but didn't spent good time with focus to watch video.... – Jasmine Apr 03 '15 at 15:03
  • I'm guessing that you have errors in the console; you are using the `$routeProvider` but you aren't including it in your app dependencies and you aren't loading the script either. – Claies Apr 03 '15 at 15:09
  • @Claies: He does exactly same in video (Please see at time 52.26) and I do the same :( https://www.youtube.com/watch?v=i9MHigUZKEM – Jasmine Apr 03 '15 at 15:13
  • 1
    Just out of curiosity, since you seem to be trying to follow that video frame by frame, which version of angular did you include in your project? in fact in his video, there is a red frame on the bottom which says "angular 1.2 or higher changes routing a little", and it basically directs you to the angular discussion that describes what I put in my answer here. – Claies Apr 03 '15 at 15:21
  • @Claies: Thank you very much, I followed your suggestion worked like a charm :) But was wondering how to download and add that route JS now I did myself... :) New to all these :) and yes, his video is soo nice that i understand and i repeat repeat and understand slowly... oh thank you, I never observed that notes on his youtube video..I just downloaded and waatching offline :( I never read those notes :( I will next read those comments and follow updates too... Thanks for letting me know this, I was unaware to see there.. – Jasmine Apr 03 '15 at 15:29

2 Answers2

2

You are trying to use the angular routing module ngRoute, but you never actually included it on your page.

You need two changes in order for this code to work correctly; First, you need to load the ngRoute module on your page, and of course have the module available in your Scripts directory. i.e. 

<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>

Second, you need to include ngRoute in your module dependencies of your app, like so:

angular.module('App', ['ngRoute']).config(function($routeProvider) {

As I have mentioned to you before, you cannot follow a two year old video guide and expect it to work correctly with current versions of angular. There have been many breaking changes, including this case, where the angular route module was moved to it's own file.

Claies
  • 22,124
  • 4
  • 53
  • 77
  • Thank you, but how do you know the name of that module as ngRoute? I can keep any name? or is it from the documents you came to know it is called ngRoute? I saw it in the link you gave.... Also, I now realize that the video uploader has written some comments on routing changes which I failed to observe as I was watching video offline by downloading (Didn't see what is written in description under this video by him :( ) Thanks for cautioning me, I will now make sure to read for every video I watch :) – Jasmine Apr 03 '15 at 15:33
  • Also, I did a small correction, I have to use ngRoute under single quotes.....Else it doesn't work :S – Jasmine Apr 03 '15 at 15:35
  • 1
    yes, this is just something that you would have to read the documentation to know; newer tutorials and videos use the name enough that you may see it mentioned, even if you don't know where it is in the documentation. But angular is a very big framework, with a lot of documentation... – Claies Apr 03 '15 at 15:36
  • Thank you so much...I am afraid how am I gona understand difficult concepts... I am learning slowly... I will watch new videos too after completing this video... I am also trying to do same in my VS what he does... it make me understand well... – Jasmine Apr 03 '15 at 15:39
0

Could you check if your MyViews folder is in the same path as your JavaScript file ?

Also, try to avoid path starting with / which indicate a path from the root of your application.

The templateUrl path have to be relative to the called JavaScript file.

app/
    main.js
    MyViews/
        View2.html
Monkey Monk
  • 984
  • 9
  • 19