I'm developing Admin panel and user panel. Admin panel was working fine and the code was written in ExpressJs. Now i wanted to design my User panel in AngularJs. i created HTML pages and app.js page.
use strict;
angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home.html',
controller: 'homeCtrl'
});
$routeProvider.when('/profile/:userId', {
templateUrl: 'profile.html',
controller: 'profileController'
});
$routeProvider.otherwise({redirectTo: '/home'});
}])
.controller('profileController', function($scope, $http, $routeParams) {
$scope.params = $routeParams;
$http.get('json_files/record_'+$scope.params.userId+'.json').success(function(response) {
$scope.details = response;
});
})
.controller('homeController', function() {
});
This is my app.js file.
Below is my profile.html
<html lang="en" ng-app="myApp" class="no-js">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="http://localhost:8000/">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="profileController">
<table>
<thead>
<tr>
<td>CategoryID</td>
<td>CategoryName</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="category in categories">
<td>{{category.CategoryID}}</td>
<td>{{category.CategoryName}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I'm getting the error as below whenever i'm trying to access the page as http://localhost:8000/profile/1
Not Found
The requested URL /profile was not found on this server.
Don't know whats going wrong... or where I did mistake...
Kindly suggest anything.
You are missing ng-view in your index page. All your routes will be replaced by this tag.
refer this link : https://docs.angularjs.org/api/ngRoute/directive/ngView
index.html
<html lang="en" ng-app="myApp" class="no-js">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
home.html
<div> Home page
<a href="#/profile/1" >Go to Profile page</a>
</div>
profile.html
<div> Profile page
<a href="#/home" >Go to Home page</a>
<div>
app.js
(function() {
"use strict";
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home.html',
controller: 'homeCtrl'
});
$routeProvider.when('/profile/:userId', {
templateUrl: 'profile.html',
controller: 'profileController'
});
$routeProvider.otherwise({
redirectTo: '/home'
});
}])
.controller('profileController', function($scope, $http, $routeParams) {
$scope.params = $routeParams;
/*$http.get('json_files/record_' + $scope.params.userId + '.json').success(function(response) {
$scope.details = response;
});*/
})
.controller('homeCtrl', function() {})
.controller('profileController', function() {})
})();
You have to put your project root path first, then '#' and than the route.
Check https://docs.angularjs.org/tutorial/step_09 for more details.
Related
I'm using angularjs 1.6 to create a simple app just to display a list of groups and to display all users for each group ...
my problem is I can't display the list of users using ng-view
this is my index.html :
<!DOCTYPE html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My application</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/bootstrap-3/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/app.css">
</head>
<body>
<div ng-controller="groupctrl">
<div class="well">
<ul ng-repeat="grp in group">
<li class="link" ng-click="displayusers(grp.uuid)">{{ grp.name }}</li>
<li class="link" ng-click="displayusers(grp.uuid)">{{ grp.name }}</li>
</ul>
</div>
</div>
<div ng-view>
</div>
</body>
<script src="assets/angular.min.js"></script>
<script src="assets/angular-route.min.js"></script>
<script src="controllers/app.js"></script>
<script src="controllers/route.js"></script>
<script src="controllers/service.js"></script>
<script src="controllers/mainctrl.js"></script>
</html>
app.js
var app = angular.module('application', ['ngRoute']);
route.js and mainctrl.js
app.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
templateUrl: 'index.html'
})
// .when('/group', {
// templateUrl: 'group.html',
// controller: 'groupctrl'
// })
.when('/users', {
templateUrl: 'users.html',
controller: 'usersctrl'
})
.otherwise({redirectTo: '/'});
}]);
app
.controller('groupctrl', function($scope, $timeout, $location, apiService) {
$scope.hello = "hello 123";
apiService.getgroup().then(function(data){
$scope.group = data;
});
$scope.displayusers = function(idgroup){
apiService.getusers(idgroup);
$location.path('/users');
};
})
.controller('usersctrl', function($scope, $timeout, apiService) {
apiService.getusers().then(function(data){
$scope.users = data;
});
});
users.html
<div ng-controller="usersctrl">
<div ng-repeat="user in users">
<div class="well text-center">
<h2>{{ user.name }}</h2>
<h5>{{ user.index }}</h5>
<button class="btn btn-success" ng-click="edit(user.index)">EDIT</button>
<button class="btn btn-danger" ng-click="delete(user.index)">DELETE</button>
</div>
</div>
</div>
thank's for helping !
Referring to comments provided by the question's author, the problem is with accessing to the users.html file as prompted in error:
XMLHttpRequest cannot load file:///home/folder-test/Documents/application/users.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https
This problem is resolved in other SO questions such as this and more specifically for AngularJS here.
I am started learning angularJs and on first setup, app wont work.
What is wrong in my code? I'am try everything and I don't have any idea what to do.
When run in browser it show only html, but message not showing? Please help!
Here is index.html
<!doctype html>
<html lang="en-US" ng-app="helloWorldApp">
<head>
<title>Angular Hello, Mordor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="AngularJS Tutorial App">
<script src="js/libs/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/libs/angular-cookies.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<div ng-view></div>
</body>
here is code in main.html and show.html where showing message
<div>{{message}}</div>
then app.js
// Chapter2/app.js
'use strict';
// App Module
var helloWorldApp = angular.module('helloWorldApp', [
'ngRoute',
'helloWorldControllers'
]);
helloWorldApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/main.html',
controller: 'MainCtrl'
}).when('/show', {
templateUrl: 'partials/show.html',
controller: 'ShowCtrl'
});
$locationProvider.html5mode(false).hashPrefix('!');
}]);
And Controllers.js
// chap2/controllers.js
'use strict';
// Controllers
var helloWorldControllers = angular.module('helloWorldControllers', []);
helloWorldControllers.controller('MainCtrl', ['$scope', '$location', '$http',
function MainCtrl($scope, $location, $http) {
$scope.message = "hello Mordor.";
}]);
helloWorldControllers.controller('ShowCtrl', ['$scope', '$location', '$http',
function ShowCtrl($scope, $location, $http) {
$scope.message = "Show the World";
}]);
I whipped up a simplified example based on yours that works. I am not sure why yours doesn't show any error, but the main issue was that you had a typo in html5Mode. Here is a working example Plunker based on your code:
http://plnkr.co/edit/MZIxG2sasm1hV1vA21Fa?p=preview
Notice that you had a case error in your html5Mode function, you had mode in lower case:
helloWorldApp.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'main.html',
controller: 'MainCtrl'
}).when('/show', {
templateUrl: 'show.html',
controller: 'ShowCtrl'
});
$locationProvider.html5Mode(false).hashPrefix('!');
}
]);
First and fore most mitake you are missing the ng-app which is the bootstrapper for angular
<html ng-app="helloWorldApp">
<head>
<title>Angular Hello, Mordor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="AngularJS Tutorial App">
<script src="js/libs/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/libs/angular-cookies.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
I have a problem with routing.
When the routing changes the scripts included in the head do not work within the template is loaded, it is as if the functions are disabled or absent.
main.php
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Site</title>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
<script src="routes.js" type="text/javascript"></script>
<script src="script2.js" type="text/javascript"></script>
<script src="script3.js" type="text/javascript"></script>
<base href="/"></base>
</head>
<body>
<div class="page" ng-view ng-controller="myappCtrl" anim-class></div>
</body>
</html>
routes.js
'use strict';
var app = angular.module("myapp", [
"ngRoute",
"ngAnimate"
]);
// ROUTE CONFIG
app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$locationProvider.hashPrefix('!');
$routeProvider.
when("/dashboard", {
templateUrl: "dashboard.php",
controller: "dashboardCtrl",
animate: "slide-left"
}).
when("/associati", {
templateUrl: "associati.php",
controller: "associatiCtrl",
animate: "slide-left"
}).
otherwise({
redirectTo: "/dashboard"
});
}]);
// PAGE ANIMATE DIRECTIVE
app.directive('animClass',function($route){
return {
link: function(scope, elm, attrs){
var enterClass = $route.current.animate;
elm.addClass(enterClass)
scope.$on('$destroy',function(){
elm.removeClass(enterClass)
elm.addClass($route.current.animate)
})
}
}
});
/************************************************
**************** CONTROLLER *********************
************************************************/
// MAIN CONTROLLER
app.controller("myappCtrl", function($rootScope, $scope, $location) {
});
// DASHBOARD CONTROLLER
app.controller("dashboardCtrl", function($scope) {
});
// ASSOCIATI CONTROLLER
app.controller("associatiCtrl", function($scope) {
});
Every time you change the css files are included page regularly while js no longer work.
Suggestions?
That's a silly question, but I can't manage to make my <ng-view> inherit <meta charset="UTF-8"> from the main containing page.
I have something like this in index.html :
<!doctype html>
<html lang="en" ng-app="BalrogApp">
<head>
<meta charset="UTF-8">
<!-- Some css and data... -->
</head>
<body style="padding-top: 50px">
<div header></div>
<ng-view></ng-view>
<div footer></div>
<script src="../node_modules/angular/angular.js"></script>
<!-- Some JS includes... -->
</body>
</html>
The view is set in routeConfiguration.js :
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/requestsList.html',
controller: 'requestsController',
controllerAs: 'r'
})
.when('/projects', {
templateUrl: 'views/projectsList.html',
controller: 'projectsController',
controllerAs: 'p',
})
.otherwise({
redirectTo: '/'
});
}]);
app.run(['$rootScope', '$route', function($rootScope, $route) {
$rootScope.$on('$routeChangeSuccess', function() {
document.title = $route.current.title;
});
}]);
But the content in requestList.html or any view isn't UTF-8 encoded.
How can I make all my views use UTF-8 encoding ?
I had the same problem.
I did the following to fix it.
index.html
-With notepad I checked the encode type, it was correct UTF-8.
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
home.html, it is managed by the routeProvider, and shown within ng-view
<div class="well">
<div ng-view></div>
</div>
When I checked the encode type for the home.html it was ANSI, I have just saved all the htmls as UTF-8. Problem solved
Encoded in ANSI - screenshot
i am using routing in angular.js
my code is :
//controllers.js
var ar= angular.module('ar', []);
ar.controller('lc', ['$scope', '$http', function($scope, $http){
$http.get('login.json').success(function(data){
$scope.art=data;
})
}])
ar.controller("search", function(){
this.search='a';
this.getdata= function (searchquery) {
console.log(searchquery);
}
});
//main.js (app.js)
var myApp= angular.module('myApp',[
'ngRoute',
'ar'
]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'inc/login.html',
controller: 'lc'
}).
otherwise({
redirectTo: '/login'
});
}]);
when i goto the Homepage its not redirect to the Login page and when i click on the login button its not working either.
<!DOCTYPE html>
<html class="no-js" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Login</li>
</ul>
</div><!--/.navbar-collapse -->
in bottom:
i have include jquery and bootstrap's file.
this is a bootstrap application.
this is live example :
Live example
Routes are specified correctly. What you need is to define the ng-view in your template so that the templates mentioned in specific routes are loaded into the main template
Something like :
<div class="page-container">
<div ng-view></div>
</div>
ng-view will be the place where every template mentioned in the router will be loaded.
i think there might be issue with your path .. its mvc base and routes define your path :)