Angular view not rendering

Please i want to render an angular view in laravel but angular is unable to display my views. This is my main angular template

<!DOCTYPE html>
    <html lang="en" ng-model="myApp">
    <head>
     <meta charset="utf-8">
    <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}"/>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
        function getBaseURL () {
        return location.protocol + "//" + location.hostname + (location.port && ":" + location.port) + "/";
     }
<script type="text/javascript">var baseUrl = window.location.origin</script>
<!-- <script type="text/javascript">window.base_url = <?php echo json_encode(base_url('/')); ?>;</script> -->
 </head>
 <body ng-controller="mainController">
<div id="main">
        <div ng-view></div>
 </div>
<script src="js/jQuery.js" type="text/javascript"></script>
 <script src="angular/angular.min.js" type="text/javascript"></script>
<script src="angular/angular-cookie.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<!-- <script src="js/resources/userController.js" type="text/javascript"></script> -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>

  </body>
</html>

This is my script (app.js)

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider) {
$routeProvider.when('/', {
    templateUrl : 'main.html',
    controller  : 'mainController'
    })
.when('/about', {
 templateUrl : 'pages/about.html',
    controller  : 'aboutController'
 })
.when('/contact', {
    templateUrl : 'pages/contact.html',
    controller  : 'contactController'
 });

});

This is my html (about.html)

<div class="jumbotron text-center">
    <h1>Home Page</h1>

     <p>This is the about page</p>
    </div>

This is my route

Route::get('/', function () {
  return File::get(public_path().'/angular-templates/main.html');
 })->where('angular', '.*');

Angular is able to render the main.html page but not the about.html. Pleeaassee somebody help me. This error is taking me 3 days to fix it.

nanadjei2

10 years ago

Level 4

not

nanadjei2

10 years ago

Best Answer

Level 4

      <html ng-app="myApp">    not    <html ng-model="myApp">

Please or to participate in this conversation.