2

i am using routing in angular.js my code is :

   //controllers.js

 var ar= angular.module('ar', []);

ar.controller('lc', ['$scope', '$http', function($scope, $http){
    $http.get('login.json').success(function(data){
        $scope.art=data;
    })
}])

ar.controller("search", function(){
    this.search='a';

    this.getdata=  function  (searchquery) {
        console.log(searchquery);
    }
});



//main.js (app.js)

var myApp= angular.module('myApp',[
  'ngRoute',
  'ar'
  ]);

myApp.config(['$routeProvider', function ($routeProvider) {
 $routeProvider.
 when('/login', {
  templateUrl: 'inc/login.html',
  controller: 'lc'
 }).
 otherwise({
  redirectTo: '/login'
 });
}]);

when i goto the Homepage its not redirect to the Login page and when i click on the login button its not working either.

<!DOCTYPE html>
<html class="no-js" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>

    </style>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/main.css">

    <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/angular-route.js"></script>
    <script src="js/main.js"></script>
    <script src="js/controllers.js"></script>

</head>
<body>



<ul class="nav navbar-nav pull-right">
        <li class="active"><a href="#">Home</a></li>
         <li><a href="#/login">Login</a></li>
        </ul>
        </div><!--/.navbar-collapse -->

in bottom: i have include jquery and bootstrap's file. this is a bootstrap application. this is live example : Live example

Improve this question
8
  • can you share html as well... Commented Sep 16, 2014 at 5:45
  • let me upload it to the server. Commented Sep 16, 2014 at 5:54
  • i have include the live example to the question Commented Sep 16, 2014 at 5:58
  • Routes are changing fine. You have not added place to include the template for login Commented Sep 16, 2014 at 6:01
  • templateUrl: 'inc/login.html', is this is correct? Commented Sep 16, 2014 at 6:02

2 Answers 2

Reset to default
2

Routes are specified correctly. What you need is to define the ng-view in your template so that the templates mentioned in specific routes are loaded into the main template

Something like : 

<div class="page-container">
    <div ng-view></div>
</div>

ng-view will be the place where every template mentioned in the router will be loaded.

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

7 Comments

when i add this its give me this error: Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
You should be adding this in main index.html file where you have defined ng-app="myApp". What error did you get?
yes i have added it into the main index file see the live example i have update the code: codebag.org/stackoverflow/#/login
its working know i have change the files of angular.js
@user3636439 : I highly recommend that you use ui-router instead of ng-router as its no longer a part of Angular core. Glad the solution worked. cheers.
|
-1

i think there might be issue with your path .. its mvc base and routes define your path :)

Improve this answer

1 Comment

the paths are correct .if the paths are incorrect the console have the errors

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.