angular2 using javascript, route is not working, angular used for client for nodjs rest api.
+--client
| +---bower_components
| ¦ +---angular
| ¦ +---angular-route
| ¦ +---bootstrap
| ¦ +---jquery
| +---controllers
| | +--users.js
| +---css
| | +--style.css
| +---views
| | +--users.html
| +---app.js
| +---index.html
+--models
| +-userinfo.js
+--app.js
+--package.js
app.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
// add the client for it
app.use(express.static(__dirname+'/client'));
// Required to add for json bodyParser
app.use(bodyParser.json());
Users = require('./models/userinfo');
index.html
<html ng-app="myApp">
<head>
<title>BookStore</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Users...</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#/user">Show Users</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
</div>
</div><!-- /.container -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./app.js"></script>
<script src="./controllers/users.js"></script>
</body>
</html>
/client/app.js
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($routeProvider){
console.log('function myApp called.....');
$routeProvider
.when('/user',{
controller:'UserController',
templateUrl: './views/users.html'
})
.otherwise({
redirectTo: '/'
});
});
/controller/users.js
var myApp = angular.module('myApp');
myApp.controller('UserController', ['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams){
console.log('UserController loaded...');
// $scope.getBooks = function(){
// $http.get('/api/user').success(function(response){
// $scope.books = response;
// });
// }
}]);
All the code above provided. REST-API's are working fine. index page is also working fine. But unable to route at users.html, even console log printed.
output: enter image description here
after click on show user enter image description here
Thanks
via KRABHI
No comments:
Post a Comment