I have script.js which has following code
(function(angular) {
'use strict';
angular.module('ngViewExample', ['ngRoute', 'ngAnimate'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookCtrl',
controllerAs: 'book'
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterCtrl',
controllerAs: 'chapter'
});
$locationProvider.html5Mode(true);
}])
.controller('MainCtrl', ['$route', '$routeParams', '$location',
function($route, $routeParams, $location) {
this.$route = $route;
this.$location = $location;
this.$routeParams = $routeParams;
}])
.controller('BookCtrl', ['$routeParams', function($routeParams) {
this.name = "BookCtrl";
this.params = $routeParams;
}])
.controller('ChapterCtrl', ['$routeParams', function($routeParams) {
this.name = "ChapterCtrl";
this.params = $routeParams;
}]);
})(window.angular);
and in html view I have
<div ng-controller="MainCtrl as main">
Choose:
<a href="Book/Moby">Moby</a> |
<a href="Book/Moby/ch/1">Moby: Ch1</a> |
<a href="Book/Gatsby">Gatsby</a> |
<a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
<a href="Book/Scarlet">Scarlet Letter</a><br/>
<div class="view-animate-container">
<div ng-view class="view-animate"></div>
</div>
<hr />
<pre>$location.path() = {{main.$location.path()}}</pre>
<pre>$route.current.templateUrl = {{main.$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{main.$route.current.params}}</pre>
<pre>$routeParams = {{main.$routeParams}}</pre>
also I have book.html and chapter.html.
But it is throwing error while I click any link.
Any help will be really appreciable
I am new in Angular
the error stack
Error: The operation is insecure.
Jf/l.url@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:44:436
h@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:104:180
ef/this.$get</</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:107:221
hf/this.$get</m.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:134:393
hf/this.$get</m.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:131:418
hf/this.$get</m.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:135:158
ef/this.$get</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:106:46
Gf/c@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:35:70
e/<()angular.min.js (line 108)
Ye/this.$get</<()angular.min.js (line 80)
hf/this.$get</m.prototype.$digest()angular.min.js (line 131)
hf/this.$get</m.prototype.$apply()angular.min.js (line 135)
ef/this.$get</<()angular.min.js (line 106)
Gf/c()angular.min.js (line 35)
Please define base element in head with relative Url
Like - <base href="http://web_directory/">
In your application html5Mode is enabled so you should define base path of your web site.
<head> <base href="http://web_directory/"> </head>