CODEWITHSUNDEEP
angularjsroutes
Hassan
Hassan

Reputation: 349

how to add routing in angularjs app?

I am new to angularjs ,i make a sample app with custom directives now i add routing as well but it doesn't working.When i start project index file is loaded in browser that is working fine but when i click on nav bar links then about and contact page is not displayed it's remains on index.html. here is my index.html:

      <html ng-app="myApp">
        <head>
       <title>Reddit New World News (Task)</title>
     <link href='http://fonts.googleapis.com/css?family=Varela+Round'                rel='stylesheet' type='text/css'>
     <script src="angular/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js"></script>
     <script src="myApp.js"></script>
     <script src="myAppCtrl.js"></script>
     <script src="headerDirective.js"></script>
     <script src="searchDirective.js"></script>
         <script src="myDataDirective.js"></script>
         <!-- start menu -->

          </head>
    <body>

           <div header-table></div>
          <div class="content" ng-controller = "myAppCtrl">
            <div class="container" >
               <div ng-view></div>
         </div>
       </div>

      </body>
   </html>

myAppCtrl:

   // TODO: Wrap in anonymous function
      (function () {
   var myApp = angular.module('myApp', ['ngRoute']);
   // configure our routes
   myApp.config(function($routeProvider) {
       $routeProvider

    // route for the home page
    .when('/', {
      templateUrl : 'code/index.html',
      controller  : 'myAppCtrl'
    })

    // route for the about page
    .when('/about', {
     templateUrl : 'code/about.html',
     controller  : 'aboutController'
   })

   // route for the contact page
    .when('/contact', {
      templateUrl : 'code/contact.html',
     controller  : 'contactController'
     });
   });


         // TODO: min-safe with bracket notation
        myApp.controller('myAppCtrl', ['$scope', '$http',                  function($scope, $http) {
         $scope.sortType     = '';
         $scope.sortReverse  = true;

        // TODO: Keep lines short - it's easier to read
       $http.get("https://www.reddit.com/r/worldnews/new.json")
           .success(function (response) {
              $scope.stories = response.data.children;
           });
      }]);

           myAppCtrl.controller('aboutController',function(){
               // create a message to display in our view
            $scope.message = 'Everyone come and see how good I look!';
           });

       myAppCtrl.controller('contactController', function($scope) {
         $scope.message = 'Contact us! JK. This is just a demo.';
       });
    })();

headerDirective.html:

    <div class="top-header"></div>
    <div class="container">

     <nav class="navbar navbar-default">
     <div class="container-fluid">
        <div class="header">         
        <h1>Reddit</h1>
       </div>
     <div class="header-right">
       <h2>World's Latest News</h2>
     </div>
   <div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
     </div>
    </div>
   </nav>
     <div class="clearfix"></div>
 </div>

Myapp tree view

any guide thanks.

Upvotes: 1

Views: 201

Answers (1)

Arjan Treur
Arjan Treur

Reputation: 86

Like some people allready mentioned, you should deffinitly read the docs and probably watch some tutorials. I'm trying to see what you are doing, but it's not clear to me.

But I think I see where it goes wrong in your thoughts:

You have 3 'templates' index.html, about.html and contact.html. In your config You use them in your routing. By watching your files my guess is that you are expecting that, depending on the route, these html-files will be loaded. Just like when redirecting to that page.

What you should do is make a index.html with the html You use on every page. this can be the <head></head> only, but can also contain your header with navigation and footer. Then you use <ng-view></ng-view> or <div ng-view></div> where you want the templates to load in your page. These templates don't need to contain the parts you allready defined in your index.html. You have only the content in it.

So, a simple example:

index.html

<html>
  <head>
    //loading your scripts etc.
  </head>
  <body>
    <ng-view></ng-view>
  </body>
</html>

Than, instead of creating a template called index.html, you make a template home.html with the content:

<div class="container">
  <h1>My Home</h1>
</div>

Now the contentpart from your home.html will load in your index.html where you define de ng-view.

An other thing I noticed is the path you define in templateUrl. You define the location as code/about.html. You have to give it the path from your index.html (the main html) In your case that will just be templateUrl: 'about.html'.

I would suggest putting the different files in different folders. So, one for your templates, one for your js-files (probably a js-folder with another folder in it for your js-file with directives etc.).

I hope this will help you on your way. But deffinitly read the docs and watch some tutorials. It will help you a lot.

Upvotes: 1

Related Questions