For instance, I have index.ejs
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template :
})
.when("/tomato", {
template :
});
});
Question here is how to render banana.ejs and tomato.ejs like SPA? So, when I click on the "banana" it should render banana.ejs(not banana.html) without reloading the page.
Hi you may use this following code:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Blue
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
Related
Do the newest versions of angular/angular-route 1.6.1 use hashbang by default? Take this piece of code for example, I have to use #! when linking to partials because #/ or #/partial2 does not work. I thought that you'd have to set a hash prefix but it looks like it's defaulting to that behavior:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<title></title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"</script>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'partials/view1.html',
})
.when('/partial2',{
templateUrl: 'partials/view2.html'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('view1Controller', function ($scope) {
$scope.sports = ['golf', 'basketball', 'hockey', 'tennis', 'football'];
});
myApp.controller('view2Controller', function ($scope) {
$scope.message = 'We are using another controller';
});
</script>
</head>
<body>
<div ng-app='myApp'>
Partial 1 | Partial 2
<div ng-view="">
</div>
</div>
</body>
</html>
Starting angular 1.6.0, #!/ becomes defaults in routes. I basically worked down versions until #/ worked, which was 1.5.11.
template directive is working in the follwing code but template Url is not working?
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Blue
<div ng-view>
</div>
<!--template is working but template url is not working-->
<script">
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : 'hello'
})
.when("/red", {
template : 'hi'
})
.when("/green", {
templateUrl : 'hello.html'
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
You need a webserver like (apache) for using templateUrl.
http://plnkr.co/edit/L4Hxf7KiiVuouPWRv4pl
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template: 'hello'
})
.when("/red", {
template: 'hi'
})
.when("/green", {
templateUrl: 'hello.html'
})
.when("/blue", {
templateUrl: 'blue.html'
});
});
First of all You have syntax error in <script"> -> <script>;
Second: check Your tempalates extension html & htm;
For this file structure Your code work Ok:
I have an issue were my routing is not populating my view.
I have the following code running from an Xampp local server:
angular 1.4.9
index.html:
<html>
<head>
<script src="scripts/angular.js" type="javascript/text"></script>
<script src="scripts/Ng-Route.js" type="javascript/text"></script>
<script src="scripts/app.js" type="javascript/text"></script>
</head>
<body ng-app="myApp">
<div ng-view></div>
</body>
</html>
user.html:
<div>
<fieldset>
Hello, {{ctrl.message}}
</fieldset>
</div>
app.js:
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'user.html',
controller : 'controller as ctrl'
});
$routeProvider.otherwise({ redirectTo: '/' });
});
app.controller('controller', function() {
var self = this;
self.message = 'Everyone';
});
I have absolutely no clue why this is failing, nothing shows up on the page. I am expecting "Hello, Everyone".
Any help would appreciated.
You had mistaken declaring your controller on your route. controller does accept controller name in string/controller function. And use controllerAs option to alias your controller.
$routeProvider
.when('/', {
templateUrl : 'user.html',
controller : 'controller',
controllerAs: 'ctrl'
});
I have two angular js controllers. When the click the ng-href link in recorddetails.html,
I am able to see the result binded as "The activity name is Exercise" but the same if I do with ng-click by clicking button with find() in send.html. I am able to see the recorddetails.html but the page is displaying without the data being binded as "The activity name is {{activity}}".I have provided the code belowe for reference.Kindly, provide some valuable solutions.
index.html
<div ng-controller="controllerOne">
<a ng-href="#/recorddetails/100">Running</a>
</div>
recorddetails.html
<div ng-controller="controllerTwo">
<p> The activity name is {{activity}}</a>// The scope name is Exercise
</div>
send.html
<div ng-controller="controllerThree">
<button ng-click="find()">
</div>
JS file
angular.module('exampleapp', ['ngRoute').config(
[ '$provide', '$httpProvider', '$routeProvider', function($provide, $httpProvider, $routeProvider) {
$routeProvider.
when('/recorddetails/:id', {
templateUrl: '/records/recorddetails.html',
controller: 'controllerTwo'
.otherwise({
redirectTo: '/defaultpage'
});
app.controller('controllerOne',
[ '$scope','$location',function($scope,$location) {`enter code here`
}
app.controller('controllerTwo',
[ '$scope','$location',function($scope,$location) {
$scope.activity = "Exercise";
}
app.controller('controllerThree',
[ '$scope','$location',function($scope,$location) {
$scope.find = function(){
$location.path("/recorddetails/100");
}
}
var app=angular.module('binding',['ngRoute'])
app.config(['$routeProvider',function ($routeProvider)
{
$routeProvider
.when('/',
{
templateUrl:'one.html',
controller:'controllerOne'
})
.when('/recorddetails/:id', {
templateUrl: 'recorddetails.html',
controller: 'controllerTwo'
})
.when('/send', {
templateUrl: 'send.html',
controller: 'controllerThree'
})
}])
app.controller('controllerOne',function($scope,$location){
})
app.controller('controllerTwo', function($scope,$location) {
$scope.activity = "Exercise";
})
app.controller('controllerThree',function($scope,$location) {
$scope.find = function(){
console.log('in 3');
$location.path("/recorddetails/100");
}
})
<html ng-app="binding">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script src="routefile.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
When I open up my app in a window, I get stuck in an infinite loop where angular keeps calling the GameCtrl and freezes the window. Here's the code:
index.html
<!DOCTYPE html>
<html ng-app="baseball">
<head>
<script src="/js/vendor/angular.min.js"></script>
<script src="/js/vendor/d3.v3.min.js"></script>
<script src="/js/baseball.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
baseball.js
var app = angular.module('baseball', []);
function GameCtrl ($scope) {
}
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: GameCtrl,
})
.otherwise({redirectTo:'/'});
});
I feel like this should be trivial; any help would be much appreciated.
Edit
Even with the templateUrl, it still goes into an infinite loop. Here's the updated config and the template code:
baseball.js
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: GameCtrl,
templateUrl: '/templates/field.html'
})
.otherwise({redirectTo:'/'});
});
templates/field.html
<div>hi</div>
Add the content you want to display here <div ng-view></div>
in your route
$routeProvider
.when('/', {
controller: GameCtrl,
templateUrl: path/to/your_content.html
})
You need to include angular-route.js in the head
and then inject 'ngRoute' into your module.
See http://docs.angularjs.org/api/ngRoute and http://docs.angularjs.org/api/ngRoute.$routeProvider