as



<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

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

    <script type="text/javascript">
        var app = angular.module("MyApp", ["ngRoute"]);
        app.config(function($routeProvider){
             $routeProvider.when('/main', {
                templateUrl : 'main.htm'
             })
             .when('/About', {
                templateUrl : 'About.htm'
             })
             .when('/Product', {
                templateUrl : 'weather.htm',
                controller: 'weatherCtrl'
             })
             .when('/Contact', {
                templateUrl : 'Contact.htm'
             });
        });

        app.controller('weatherCtrl', function($scope){
            scope.title = "Weather";

        });

    </script>
</head>

<body>

<div ng-app="MyApp" class="container-fluid">
    <div class="container">
        <div class="row header">
            <div class="col-12">
                <h1>Ini Web Burung</h1>
                <i class="fab fa-android"></i>
            </div>
        </div>
        <div class="row menu">
            <div class="col-12">
            <a href="#!main">HOME</a>
            <a href="#!About">About</a>
            <a href="#!Product">Product</a>
            <a href="#!Contact" style="float:right">Contact</a>
            </div>
        </div>

    </div>
</div>
    <ng-view></ng-view>


</body>
</html>