Not able to implement Views and Route in Angular JS

Question

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

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>

"Error: [$compile:tpload] errors.angularjs.org/1.4.8/$compile/… — Shiva Saxena
– Shiva Saxena, Commented Nov 4, 2016 at 11:03
Wouldn't be able to resolve the template location. will you please show me the directory structure of your app. May be try this.. instead of using '/partials/home.html', use 'partials/home.html'. I mean remove slash from the beginning. — Manish Singh
– Manish Singh, Commented Nov 4, 2016 at 11:06
@ManishSingh My main page (index.html) is in a folder named website on Desktop. Inside website folder, I have index.html and another folder named partials. Inside partials are the three templates i.e. about, home and experiments .html I tried removing slash but didn't work any other idea — Shiva Saxena
– Shiva Saxena, Commented Nov 4, 2016 at 11:33
I think, the better way to go into developer options -> source tab.. check which file is gets loaded because everything seems fine. — Manish Singh
– Manish Singh, Commented Nov 4, 2016 at 11:38

Anil Kumar Ram · Accepted Answer · 2016-11-04 12:11:40Z

1

Check your modified code.. and DEMO here updated snippet

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

app.config(function($routeProvider){
    $routeProvider
    .when('/', { templateUrl:'partials/about.html',controller : 'MainCtrl'})
    .when('/about', { templateUrl:'partials/about.html',controller : 'abtCtrl'})
    .when('/experiments', { templateUrl:'partials/experiments.html',controller : 'exptCtrl'})
    .otherwise({ redirectTo:'/other',  templateUrl:'partials/other.html'})
});

app.controller('MainCtrl', function($scope) {
    $scope.x = "Hello";
});
app.controller('abtCtrl', function($scope) {
    $scope.x = "About";
});
app.controller('exptCtrl', function($scope) {
    $scope.x = "exptCtrl";
});

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

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


<div ng-app="demoApp" >
    <h2 style="background-color:#ccc">
      {{5+5}}
    </h2>
    <div style="background-color:#bbb; padding:10px;">
      <a href="#/about">About</a> &nbsp; 
      <a href="#/experiments">Expt</a> &nbsp; 
      <a href="#/other">Other</a>
    </div>
    
    
    <div ng-view="" id="ng-view"></div>
    
    <script type="text/ng-template" id="partials/about.html">
    		<h1>About Page</h1>
    </script>
    <script type="text/ng-template" id="partials/experiments.html">
    		<h1>Experiment Page</h1>
    </script>
    <script type="text/ng-template" id="partials/other.html">
    		<h1>Other Page</h1>
    </script>
</div>

edited Nov 4, 2016 at 12:11

answered Nov 4, 2016 at 11:11

Anil Kumar Ram

1,22111 silver badges14 bronze badges

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

2 Comments

Shiva Saxena Over a year ago

Hi Anil, thanks for resolving the {{ 5+5 }} error.... but still I am not able to get templates in my ng-view ..... my directory structure is Desktop - - > Website - -> index.html , Partials --> about.html, home.html, experiments.html

Anil Kumar Ram Over a year ago

i ve updated snippet and fiddle... jsfiddle.net/fA968/272 hope this will help you .

Nikhil Mohanan · Accepted Answer · 2016-11-04 11:05:46Z

-2

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>

<body ng-app="myApp">

  <p><a href="#/">Main</a>
  </p>

  <a href="#/red">Red</a>
  <a href="#/green">Green</a>
  <a href="#/blue">Blue</a>

  <div ng-view></div>

  <script>
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
      $routeProvider
        .when("/", {
          template: "<div>first view</div>"
        })
        .when("/red", {
          template: "<div>second</div>"
        })
        .when("/green", {
          template: "<div>third</div>"
        })
        .when("/blue", {
          template: "<div>fourth</div>"
        });
    });
  </script>

  
</body>

</html>

This is how we are configuring routeProvider

edited Nov 4, 2016 at 11:05

answered Nov 4, 2016 at 11:00

Nikhil Mohanan

1,2601 gold badge12 silver badges23 bronze badges

1 Comment

Nikhil Mohanan Over a year ago

template can be templateUrl if you would like give template urls

Collectives™ on Stack Overflow

Not able to implement Views and Route in Angular JS

MY WEBSITE

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

MY WEBSITE

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related