CODEWITHSUNDEEP
javascriptangularjsng-view
John Tangney
John Tangney

Reputation: 33

ngView is not rendering templates

I'm not able to render templates in ng-view in my angular app when I run it in various browsers or on a localhost using node. The console isn't throwing any errors. I've read everything I can find online about this problem but none of them is the answer to my problem. I'm using a macbook pro with El Capitan OS. I'm wondering if I've done something funny to my computer over the past year as a beginner coder, by sudo installing stuff and running things without a virtual environment. Or maybe there's some stupidly obvious error here that I've overlooked while trying every permutation I can think of.

This is my index.html file:

   <!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>My App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body ng-app="OIApp">
     <nav id="mainnav" class="navbar navbar-inverse navbar-fixed-top">

        <div class="container"> 

            <div class="navbar-header">

            <a class="navbar-brand" href="#">
                <h1>My App</h1>
            </a>

            </div> 
            <ul class="nav navbar-nav navbar-right">

                <li class="active">
                    <a href="#/">Home</a>
                </li>
                <li>
                    <a href="#/about">About</a>
                </li>
                <li>
                    <a href="#/blog">Blog</a>
                </li>
                <li>
                    <a href="#/products">Products</a>
                </li>

            </ul>
        </div>
    </nav> 

        <div ng-controller="OIController1">
            <div ng-view>

            </div>

        </div>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
    <script src="OIController.js"></script>
    <script src="OIApp.js"></script>
    <script src="config.js"></script>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

App.js looks like this:

var app = angular.module("OIApp", ["ngRoute", "myControllers"])

Controller.js is like this:

   angular.module('myControllers', [])

.controller('OIController1', function($scope, $route) {
    $scope.names = [
        {name:"Colin Wilson", blurb: "Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
        {name:"Graham Hancock", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
        {name:"John Moriarty", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also ..."},
        {name:"William Thompson", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."} 
        ];

    });

Config.js:

    angular.module('myRoutes', ['ngRoute', 'myControllers'])

.config('$routeProvider', function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "/index.html",
        controller : "OIController1",
    })

    .when("/about", {
        templateUrl : "/about.html",
        controller : "OIController1"
    })

    .otherwise({
      redirectTo:'/'
    });

});

And this is about.html which I'm trying to render in ngView:

<div class="col-sm-2" ng-repeat="x in names">
    {{x.name}}
    {{x.blurb}}
</div>

Upvotes: 3

Views: 710

Answers (2)

Sravan
Sravan

Reputation: 18647

You have syntax error, [] is missing in route provider.

Pls run the below snippet.

// Code goes here

var app = angular.module("OIApp", ["ngRoute", "myControllers"]);
  
  app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when("/", {
        
    })

    .when("/about", {
        templateUrl : "about.html",
        controller : "OIController1"
    })

    .otherwise({
      redirectTo:'/'
    });

}]);

var test = angular.module('myControllers', [])
test.controller('OIController1', function($scope, $route) {
    $scope.names = [
        {name:"Colin Wilson", blurb: "Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
        {name:"Graham Hancock", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
        {name:"John Moriarty", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also ..."},
        {name:"William Thompson", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."} 
        ];

    });
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>My App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body ng-app="OIApp">
  
  <script type="text/ng-template" id="about.html">
  <div class="col-sm-2" ng-repeat="x in names">
    {{x.name}}
    {{x.blurb}}
</div>
</script>
  
  <script>
  
  



  
</script>


     <nav id="mainnav" class="navbar navbar-inverse navbar-fixed-top">

        <div class="container"> 

            <div class="navbar-header">

            <a class="navbar-brand" href="#">
                <h1>My App</h1>
            </a>

            </div> 
            <ul class="nav navbar-nav navbar-right">

                <li class="active">
                    <a href="#/">Home</a>
                </li>
                <li>
                    <a href="#/about">About</a>
                </li>
                <li>
                    <a href="#/blog">Blog</a>
                </li>
                <li>
                    <a href="#/products">Products</a>
                </li>

            </ul>
        </div>
    </nav> 

        <div ng-controller="OIController1">
            <div ng-view>

            </div>

        </div>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
    
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

HEre is the plunker

Upvotes: 1

Manish Singh
Manish Singh

Reputation: 538

There are few issues:

    //------------------------------------
    //Let say, it's a app.router.js
    //------------------------------------
     angular.module('myRoutes', ['ngRoute', 'myControllers'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
        .when("/", {
            templateUrl : "index.html",
            controller : "OIController1",
        })

        .when("/about", {
            templateUrl : "about.html",
            controller : "OIController1"
        })

        .otherwise({
          redirectTo:'/'
        });

    }]);

    //------------------------------------
    //Let say, it's a app.module.js
    //------------------------------------

    angular.module("OIApp", ["ngRoute", "myRoutes", "myControllers"]);

//------------------------------------
//Let say, it's a app.controller.js
//------------------------------------        

    angular.module('myControllers', [])
    .controller('OIController1', function($scope) {
        $scope.names = [
            {name:"Colin Wilson", blurb: "Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
            {name:"Graham Hancock", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
            {name:"John Moriarty", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also ..."},
            {name:"William Thompson", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."} 
            ];
        });

I hope this should work

Upvotes: 1

Related Questions