CODEWITHSUNDEEP
angularjsangular-ui-router
Hassan
Hassan

Reputation: 349

how to add routing using angular-ui-router?

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 nothing is displayed in browser. 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://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
     <script src="myApp.js"></script>
     <script src="myAppCtrl.js"></script>
     <script src="routes.js"></script>
     <script src="headerDirective.js"></script>
     <script src="searchDirective.js"></script>
         <script src="myDataDirective.js"></script>

          </head>
    <body>

               <div ng-view></div>

      </body>
   </html>

myAppCtrl:

   // TODO: Wrap in anonymous function
      (function () {
   var myApp = angular.module('myApp', ['ui.router']);


         // 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;
           });
      }]);

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

       myApp.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>

routes.js:

 angular.module('myAppCtrl')
   .config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
    function ($stateProvider, $locationProvider, $urlRouterProvider) {

     $urlRouterProvider.otherwise('/index.html');

     // See route.webapp.js for allowed routes
     $stateProvider
      .state('app', {
        templateUrl: '/templates/app.html',
        controller: 'myAppCtrl',
        abstract: true
      })
      .state('app.home', {
        url: '/home',
        templateUrl: '/templates/index.html',
        controller: 'myAppCtrl'
      })
      .state('app.about', {
        url: '/about',
        templateUrl: '/templates/about.html',
         controller: 'aboutController'
      })
      .state('app.contact', {
        url: '/contact',
        templateUrl: '/templates/contact.html',
         controller: 'contcatController'
      });

     $locationProvider.html5Mode(true);
    }
  ]);

})();

Myapp tree view

any guide thanks.

Upvotes: 0

Views: 91

Answers (1)

Freezystem
Freezystem

Reputation: 4874

First there is a problem with your config block :

myApp.config(...)

not 

angular.module('myAppCtrl').config(...);

Else you're redeclaring a new module. That doesn't make sense. You mix up controllers and module, that's two different things.

Then you have to change some things in your HTML file :

If you're using UI-Router it's :

<div ui-view></div>

not like ngRouter :

<div ng-view></div>

Then you're using $locationProvider.html5Mode(true);

So you have to configure your server to emulate paging, see doc.

Finally you have to add the base href of your angular application in the <head> tag like that :

<base href="/">

Upvotes: 1

Related Questions