Arjun Hegde Arjun Hegde - 5 months ago 14
AngularJS Question

How to give href for angularjs routes

I am new to Angular.js and Im currently trying to learn about ngRoute, but its not displaying anything

This is app.js config file

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

// configure our routes
app.config(function($routeProvider) {
$routeProvider

// route for the home page

.when('/', {
templateUrl : 'index.html',
controller : 'mainController'
})

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

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


This is main index.html

<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/>
</head>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>

<body ng-app="myApp">


<h1> User :{{user}}</h1>


<a href="#about">
about
</a>

<h1>User :{{user}}</h1>

</html></body>
</html>

<script src="app.js"></script>

<script src="mainController.js"></script>
<script src="loginController.js"></script>


These are my controllers

//mainController.js
app.controller('mainController',function($scope, $http) {

$scope.user = "user";
});
//loginController.js
app.controller('loginController',function($scope, $http) {


$scope.user = "user";

});


This is

When I click on about, it gives CANNOT GET /about, because it checks for node routes..How should I give the href for about?

Answer

Because you have ng-app = "blog" in your html and you have angular.module("myApp",['ngRoute']); in your js