Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Ze Yang
Ze Yang
495 Points
Posted by Ze Yang
Ze Yang
495 Points

ng-view doesn't work!

I try to use ng-view to rout to another html file. But it 's didn't work here is my code:

index.html 
<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="homecntrl">
    <div>
    <nav><a href="#neworder">New Order


        </a>

    <table >
        <tr>
            <th>ID</th>
            <th>Desc</th>
            <th>Amount</th>
        </tr>
        <tr ng-repeat="product in products">
            <td>{{product.id}}</td>
            <td>{{product.description}}</td>
            <td>{{product.amount}}</td>
        </tr>
    </table>

    <div id="main">
        The view displays here...
        <div ng-view>Bingding</div>
    </div>
        </nav>
        </div>
</body>    
</html>

var app = angular.module("app", ['ngRoute']);
app.configure = (function ($routeProvider) {

    $routeProvider
        .when('/neworder', {
            templateUrl: 'neworder.html',
        controller: 'newcntrl'

    });

});
app.controller("homecntrl", function ($scope, $http) {
    $http.get('products.json').success(function (data) {

        $scope.products = data;
    });

})
app.controller("newcntrl", function ($scope) {
    $scope.message = "THis is a New Order";
   })
neworder.html 
<body>
    <div class="jumbotron text-center">
        <h2>{{message}}</h2>
    </div>
</body>

1 Answer

Mike Ulvila
Mike Ulvila
16,268 Points
Mike Ulvila
Mike Ulvila
16,268 Points

You need an ng-app="app" on the body tag, then you can move your ng-controller to the next level div.