Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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