jquery - Route in angular js not workng -
i new angular js getting issue in angular js route page. when page load shows header , footer only.
index.html
<!doctype html> <html lang="en"> <head> <title>my first angularjs blog</title> <!-- bootstrap core css --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- custom css --> <link href="css/blog-home.css" rel="stylesheet"> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body ng-app="blogapp"> <!-- navigation --> <div ng-include="'includes/header.html'"> </div> <ng-view></ng-view> <div ng-include="'includes/footer.html'"> </div> <!-- jquery --> <script src="js/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script> <!-- bootstrap core javascript --> <script src="js/bootstrap.min.js"></script> <script src="controller.js"></script> </body> </html> controller.js:
var myapp = angular.module("blogapp", ['ngroute']); myapp.config(function($routeprovider){ $routeprovider .when('/home',{ templateurl:'home.html', controller:'blogcontroller' }) .when('/list',{ templateurl:'list.html', controller:'blogcontroller' }) .when('/add',{ templateurl:'add.html', controller:'addcontroller' }) .otherwise({ redirectto:'/home' }); }); myapp.controller('blogcontroller',function ($scope,$http){ $http({method: 'get' , url: 'getallblog.php'}).success(function(data){ $scope.allblog = data; }); }); myapp.controller('addcontroller', function($scope,$http){ $scope.new_post =function(){ $http.post("addblog.php" ,{'title' : $scope.title ,'description' : $scope.description }).success(function(data,status,headers,config){ console.log("inserted successfully"); }); } ; }); home.html
<!-- page content --> <div class="container"> <div class="row"> <!-- blog entries column --> <div class="col-md-8"> <h1 class="page-header"> angular blog </h1> <div > <div ng-repeat="blg in allblog | filter : yourname"> <!-- first blog post --> <h2> <a href="#">{{blg.title}}</a> </h2> <p><span class="glyphicon glyphicon-time"></span> posted on {{blg.created_on }}</p> <hr> <p style="text-align:justify;">{{blg.description}}</p> <hr> </div> </div> <!-- pager --> <ul class="pager"> <li class="previous"> <a href="#">← older</a> </li> <li class="next"> <a href="#">newer →</a> </li> </ul> </div> <!-- blog sidebar widgets column --> <div ng-include="'includes/sidebar.html'"> </div> </div> <!-- /.row --> <hr> <!-- footer --> <div ng-include="'includes/footer.html'"> </div> </div> <!-- /.container --> add.html
<!-- page content --> <div class="container"> <div class="row"> <!-- blog entries column --> <div class="col-md-6"> <h1 class="page-header"> angular blog </h1> <div > <form class="form-signin"> <h2 class="form-signin-heading">new post here</h2> <div class="row"> <div class="col-md-12"> <label for="posttitle" class="sr-only">email address</label> <input type="text" id="posttitle" class="form-control" ng-model="title" required=""><br> <span>title : {{title}}</span> </div> </div> <br> <div class="row"> <div class="col-md-12"> <label for="postdetails" class="sr-only">password</label> <textarea id="postdetails" class="form-control" ng-model="description" required=""></textarea> <br> <span>blog description: {{description}}</span> </div> </div> <br> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <button class="btn btn-lg btn-primary btn-block" type="button" ng-click="new_post()" name="newpost">post now</button> </div> <div class="col-md-3"></div> </div> </form> </div> </div> <div class="col-md-2"></div> <!-- blog sidebar widgets column --> <div ng-include="'includes/sidebar.html'"> </div> </div> <!-- /.row --> </div> <!-- /.container --> list.html
<div class="container"> <div > <h2>blog list</h2> <p>here awsome blog list</p> <table class="table"> <thead> <tr> <th>title</th> <th>blog</th> <th>posted on</th> <th>action</th> </tr> </thead> <tbody> <tr ng-repeat="blg in allblog"> <td>{{blg.title}}</td> <td>{{blg.description}}</td> <td>{{blg.created_on }}</td> <td><a href="">edit</a> || <a href="">delete</a></td> </tr> </tbody> </table> </div> </div> here when open default page header , foot open, not call page home, add or list.html. doing mistake ? appreciate if response .. thanks
you have include
<script data-require="angular-sanitize@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-sanitize.js"></script>
in index.html dependencies angular-route full fill.
i simplified plunker,
http://embed.plnkr.co/8u0in7rs7kfmmqindat0/preview
in angularjs 1.2.0 , later only, ngroute has been moved own module before version dont need include angular-route.min.js in index.html , ['ngroute'] module di
Comments
Post a Comment