Shiva Saxena Shiva Saxena - 1 month ago 7
AngularJS Question

Not able to implement Views and Route in Angular JS

I have created simple html files about.html, experiments.html and home.html in a folder named partials but not able to render there view in ng-view also I tried a simple {{ 5+5 }} but that also didn't work id i am using config also along with controller.



https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js'>
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js">
Demo Angular JS




LOGO



MY WEBSITE







{{ 5 + 5 }}



var app = angular.module('demoApp', ["ngRoute"])

.config(function($routeProvider){
$routeProvider
.when('/about', { templateUrl:'/partials/about.html'})
.when('/experiments', { templateUrl:'/partials/experiments.html'})
.otherwise({ redirectTo:'/home', templateUrl:'/partials/home.html'})
})

.controller(function MainCtrl($scope){
$scope.x = "Hello";
});
</script>
</body>
</html>

Answer

Check your modified code.. and DEMO here

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

app.config(function($routeProvider){
    $routeProvider
    .when('/about', { templateUrl:'/partials/about.html'})
    .when('/experiments', { templateUrl:'/partials/experiments.html'})
    .otherwise({ redirectTo:'/home',  templateUrl:'/partials/home.html'})
});

app.controller('MainCtrl', function($scope) {
    $scope.x = "Hello";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>


<div ng-app="demoApp" ng-controller="MainCtrl">
    {{5+5}}
</div>