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
Related
So I am using ngroute to like redirect to other html pages. I got this off from a tutorial online but when I try to run, it does not show the message or it doesn't go the desired page. For example, if I want to click on the homepage on the nav bar, it should redirect to the homepage. If I want to redirect to login page, it should go to login page. I am not sure what is wrong. enter code hereThis is what I have:
index.html
<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="UTF-8">
<title>Quiz HomePage</title>
<link rel="stylesheet" href="cs/homepage.css">
<script src="lib/angular.js"></script>
<script src="js/home.js"></script>
<!-- NG ROUTE -->
<script type="text/javascript" src="i"></script>
</head>
<body ng-controller="mainController">
<h1>Welcome To The Online Quiz Management</h1>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li style="float: right">Login</li>
</ul>
</div>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</body>
</html>
home.js
// creating the module
var app = angular.module("homepageApp", ["ngRoute"]);
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the homepage
.when("/homepage", {
templateUrl: "homepage.html",
controller: "mainController"
})
// route for login
.when("/login", {
templateUrl: "login.html",
})
// route for about
.when("/about", {
templateUrl: "about.html",
controller: "aboutController"
})
// route for contact
.when("/contact", {
templateUrl: "contact.html",
controller: "contactController"
});
});
// create the controller and inject Angular's $scope
app.controller("mainController", function($scope) {
$scope.message = 'Everyone come our homepage';
});
app.controller("loginController", function($scope) {
});
about.html
<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<h1>About Page</h1>
<p>{{ message }}</p>
</body>
</html>
As #Barclick said, you have to import angular-route correctly.
Since you are using angularjs from your local, not sure which version you are using. There have been some changes to the library from version 1.6+ . Please look at the detailed answer here :
https://stackoverflow.com/a/41655831/6347317
I have created a plunker with angular 1.6+ . Please see below:
http://plnkr.co/edit/xDOSh3OSdKcBFTPJN6qj?p=preview
Note: Please see the way the route is referenced in HTML "#!route".
HTML:
<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<h1>Welcome To The Online Quiz Management</h1>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li style="float: right">Login</li>
</ul>
</div>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</body>
</html>
JS:
// creating the module
var app = angular.module("homepageApp", ['ngRoute']);
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the homepage
.when('/', {
templateUrl: 'homepage.html',
controller: 'mainController'
})
// route for login
.when('/login', {
templateUrl: 'login.html',
})
// route for about
.when('/about', {
templateUrl: 'about.html',
controller: 'aboutController'
})
// route for contact
.when('/contact', {
templateUrl: 'contact.html',
// controller: 'contactController'
});
});
// create the controller and inject Angular's $scope
app.controller("mainController", function($scope) {
$scope.message = 'Everyone come our homepage';
});
app.controller("aboutController", function($scope) {
$scope.message = 'Everyone come our about page';
});
I've been working on my ngRoute without sucess. I can't load the module 'ngRoute'. I don't know why. When I try this code, nothing happens, just a blank page.
Here is my app.js .
var app = angular.module('tutorialApp', ['ngRoute', 'tutorialCtrlModule']);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "views/viewCourse.html"
controllers : "tutorialCtrl"
});
});
My index.html:
<html ng-app="tutorialApp">
<head>
<meta charset="utf-8">
<title>Teste</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<script src="lib/angular-route.min.js"></script>
<script src="lib/angular-locale-pt-br.js"></script>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/tutorialCtrl.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div ng-view></div>
</body>
</html>
Two Things:
Load angular-route.js after loading Angular.js
there is a syntax Error while defining the route in app.js; as there should be a comma ',' after 'templateUrl' value.
It should look like this:
.when("/", {
templateUrl : "views/viewCourse.html",
controllers : "tutorialCtrl"
});
Also do you mind sharing the URL while accessing this page in your the browser.
I have created a simple Plunker: http://plnkr.co/edit/tBisV2hhmJbHOyYAPPhn
angular.module("myApp", ['ngRoute']);
angular.module("myApp").config(function($routeProvider) {
$routeProvider
.when('/test', {
templateUrl: 'Welcome.html',
controller: 'TestController',
controllerAs: 'testController'
})
});
angular.module("myApp").controller('testCtrl', testCtrl);
function testCtrl($timeout, $q, $log, $location, $scope) {
$scope.navigate = function(){
$log.info('Success');
$location.path('/test');
}
}
When i click on the href the url change but nothing seems to happens.
really i don't know where is the problem.
Here the index html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<meta charset="utf-8">
<title>APP</title>
</head>
<body>
<div>
<p>addRecord</p>
<ng-view></ng-view>
</div>
<script>
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/show', {
templateUrl: 'views/addRecord.html',
});
});
</script>
</body>
</html>
this is folder structure
enter image description here
You have nowhere mentioned ng-app
<head ng-app="myApp">
DEMO
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'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.