CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Hassan
Hassan

Reputation: 349

ui.router not working ? here is my app on plunker:http://plnkr.co/edit/JdRB2m0aWjllDcze09S2?p=preview

I am new to angularjs ,i make a sample app and now i add ui.router to the app and its showing nothing even links are are not working . i want to submit a form and show all form data on about.html. Index.html

 <!DOCTYPE html>
     <html ng-app="mylinkApp">
     <head>
        <title>Angular app (Task)</title>

      <meta charset="utf-8">

       <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
       <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
        <link href="css/simple-sidebar.css" rel="stylesheet">
       <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
       <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> 
       <script src="js/script.js"></script>
        <script src="js/homeDataDirective.js"></script>

      </head>

          <!-- ########################################### -->

        <body ng-controller="mainController">
               <div class="wrapper">
                 <header id="header" class="clear">
                <h1><img src="../Code/img/logo.png" style="width:200px" height="100px"/></h1>
            </header>
           </div>

         <div id="wrapper">

            <!-- Sidebar -->
              <div id="sidebar-wrapper">
                  <ul class="sidebar-nav">
                      <li class="sidebar-brand">
                          <a href="">
                              Quick Links
                          </a>
                      </li>
                      <li>
                          <a href="#home">Home</a>
                      </li>
                      <li>
                          <a href="#about">About</a>
                      </li>
                      <li>
                          <a href="#siteMap">SiteMap</a>
                      </li>

                   </ul>
              </div>
      <div id="page-content-wrapper">
                  <div class="container-fluid">
                      <div >
                           <div ng-view class="jumbotron text-center" style="height:475px"></div>
                      </div>
                  </div>
              </div>


        </div>

     <div id="wrapper">
         <footer id="footer" class="clear">

        <p style="text-align:center">Copyright &copy; 2015 - All Rights Reserved</p>

       </footer>
    </div>
     </body>
     </html>

script.js

// create the module and name it mylinkApp

var mylinkApp= angular.module('mylinkApp',['ui.router']); mylinkApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 

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

  // See route.webapp.js for allowed routes 
 $stateProvider 
    .state('home', { 
             url: '/home', 
            templateUrl: '../templates/home.html', 
            controller: 'homeController' 
          }) 
     .state('about', { 
    url: '/about', 
      templateUrl: '../templates/about.html', 
              controller: 'aboutController' 
            }) 
       .state('siteMap', { 
       url: '/siteMap', 
      templateUrl: '../templates/sitemap.html', 
      controller: 'contactController' 
           }) 

       } 
       ]); 

    // create the controller and inject Angular's $scope 
   mylinkApp.controller('homeController', function($scope) { 
      // create a message to display in our view 
       $scope.message = 'Everyone come and see how good I look!'; 

    }); 

        // create the controller and inject Angular's $scope 
  mylinkApp.controller('mainController', function($scope,$state) { 
   // create a message to display in our view 
     // $scope.message = 'Everyone come and see how good I look!'; 
     $state.go('home'); 
          }); 

     mylinkApp.controller('aboutController', ['$scope', 'userService', function($scope, userService) { 
       $scope.userService = userService;
       $scope.user = $scope.userService.user; 
       $scope.message = 'Look! I am an about page.'; 
   }]); 

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

can anyone guide me how do i make ui.router working?

Upvotes: 1

Views: 97

Answers (2)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

There is the updated plunker - WORKING

Your code is almost perfect. The only changes I made - was fixing the wrong names referencing files. Firstly, the root file (ran by Plunker) should be index.html not Code/index.html. Also, states should use templateUrl related to file names, i.e. instead of this:

.state('home', { 
    url: '/home', 
    templateUrl: '../templates/home.html', 
    ...
                  }) 
.state('about', { 
    url: '/about', 
    templateUrl: '../templates/about.html', 
    ...

we need

.state('home', { 
    url: '/home', 
    templateUrl: 'Code/templates/home.html', 
    ...
                  }) 
.state('about', { 
    url: '/about', 
    templateUrl: 'Code/templates/about.html', 
    ...

Also, the redirection to be used when wrong url is passed, should target url of some state (not a template or root html file):

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

There were many of these typos or misspellings. But that's it. The rest is working. Just remember - if we use type email for registration:

<input type="text" class="form-control" ng-model="user.name">
<input type="email" class="form-control" ng-model="user.email">

It must be really valid email provided (or in fact some validation logic to disable registering) - to see that result on next screen, e.g.

user name:  me
user email: [email protected]

Check the updated version here

Upvotes: 1

Nicolas
Nicolas

Reputation: 75

I can see several things

  • when using ui-router, you should use the directive ui-view and not ng-view (which is for ngRoute)
  • for the links you should use ui-sref="stateName" instead of href="/", as ui-sref="home"

Upvotes: 0

Related Questions