what url should I use to reach the "/phone" part from the routing? I am trying this http://localhost:8888/workspace/AngA/phones but the page is blank. Or maybe the url is correct, and I forgot something else.
Here is the whole code (2 html pages for the view, 2 js pages) :
//in home.html
<h1>home</h1>
<p>
Add a {{ test }}
</p>
----
//in index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view>hello</div>
</body>
</html>
----
//in app.js
'use strict';
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/home.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}
]);
----
//in controllers.js
'use strict';
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', function ($scope) {
$scope.test = 'age';
});
phonecatControllers.controller('PhoneDetailCtrl', function($scope, $routeParams){
});
You haven't specified html5mode so to access that page you would do something like this instead:
http://localhost:8888/workspace/AngA/#/phones
Related
my templateUrl doesn’t want to work. How can I correctly indicate the route or where i should to put the home.html?
My jsp file:
<html ng-app='myShoppingList'ng-controller="myCtrl">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script type="text/javascript" src="/resources/js/main.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Product Page</title>
</head>
<body>
Home
<ng-view></ng-view>
</body>
</html>
main.js
var app = angular.module('myShoppingList', ["ngRoute"]);
app.config(function ($routeProvider) {
.when('/home', {
templateUrl: 'SpringIntro\src\main\resources\home.html',
controller: 'myCtrl'
})
});
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
app.controller('myCtrl', function ($scope) {
console.log('myCtrl');
})
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 used Angular for a while, but it has changed greatly since I last used it... I'm running into some issues, as I can't get the application to load at all.
When I try to load the individual webpages, I get just the basic HTML, but no error messages... [I'm loading it using the live preview option in Brackets]
The file hierarchy is as follows:
index.html
bower_components
js
-- app.js
-- ctrl
--- about.js
--- home.js
html
-- home.html
-- about.html
The files:
index.html
<!DOCTYPE HTML>
<html lang="en" np-app="stagerite" ng-controller="indexCtrl">
<head>
<!-- meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- title/icon -->
<title>StageRite - {{ Page.title() }}</title>
<link rel="shortcut icon" href="img/" />
<!-- bower imports -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- local css -->
<!-- local js -->
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/ctrl/index.js"></script>
<script type="text/javascript" src="js/ctrl/home.js"></script>
<script type="text/javascript" src="js/ctrl/about.js"></script>
<!-- fonts -->
</head>
<body unresolved fullbleed>
<div ng-view></div>
</body>
</html>
app.js
/*global angular, console, alert*/
(function () {
'use strict';
/* Initialize application. */
var stagerite = angular.module('stagerite', [
'ngRoute'
]);
/* Set routes. */
stagerite.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/about', {
templateUrl: '../html/about.html',
controller: 'aboutCtrl'
}).
when('/home', {
templateUrl: '../html/home.html',
controller: 'homeCtrl'
}).
otherwise({
templateUrl: '../html/home.html',
controller: 'homeCtrl'
});
}]);
/* Set page titles. */
stagerite.factory('Page', function () {
var title = 'Home';
return {
title: function () {
return title;
},
setTitle: function (newTitle) {
title = newTitle;
}
};
});
}());
home.html
<div ng-controller="homeCtrl">
</div>
index.js
/*global angular, console, $, alert*/
/*jslint plusplus: true*/
(function () {
'use strict';
var indexCtrl = angular.module('stagerite', []);
indexCtrl.controller('indexCtrl', ['$scope', 'Page', function ($scope, Page) {
$scope.Page = Page;
}]);
}());
home.js
/*global angular, console, $, alert*/
/*jslint plusplus: true*/
(function () {
'use strict';
var homeCtrl = angular.module('stagerite', []);
homeCtrl.controller('homeCtrl', ['$scope', 'Page', function ($scope, Page) {
Page.setTitle('Home');
}]);
}());
So i created a simple app.js like this
var app = angular.module('app', ['ngRoute', 'ngResource']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'html/home.html',
});
});
but when i create a separate file routes.js
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'html/home.html',
});
});
The homepage is not shown. I double checked everything and i added the routes.js to the index page.
But it gives me this error : Uncaught ReferenceError: app is not defined.
But i don't know why? the app is not an anonymous function.
This is my index page
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-resource.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-route.js"></script>
<script type="text/javascript" src="routes.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Since you use app variable in routes.js you need to load this file after app.js where this variable is created:
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="routes.js"></script>
Alternatively you could setup routes in separate modules and use those modules as dependencies to main module:
var app = angular.module('app', ['ngRoute', 'ngResource', 'main', 'admin']);
and then for example in main-moudle.js:
angular.module('main', []).config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'html/home.html',
});
I have upgraded from Angular.JS 1.1.5 to 1.2.26 and now im geting
Error: [$injector:unpr] Unknown provider: $routeProvider
Here is my index.html:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div ng-app="app">
<header ng-include="'partials/menu.html'"></header>
<div id="body">
<ng-view></ng-view>
</div>
</div>
</body>
</html>
Here is my app.js:
var app = angular.module('app', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/tasks', {
templateUrl: 'partials/tasks.html',
controller: 'tasksCtrl'
}).
when('/goals', {
templateUrl: 'partials/goals.html',
controller: 'goalsCtrl'
}).
when('/notes', {
templateUrl: 'partials/notes.html',
controller: 'notesCtrl'
}).
otherwise({
redirectTo: "/"
});
}
]);
I also tried Angular and Angular-route versions 1.2.6, 1.2.9, 1.3.0 but same issue.
I need Angular features that are only 1.2.0+, so downgrading is not an option.