So when i click the links in index.html the path in browser changes but it doesnt show the content of sivu1.html and sivu2.html
Here is my index.html
<html ng-app="appi">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script>
<script src="appi.js"></script>
</head>
<body>
Sivu ykköne
Sivu kakkone
<div ng-view></div>
</body>
</html>
Here is the appi.js
var appi = angular.module("appi", ["ngRoute"]);
appi.config(["$routeProvider", "$locationProvider",
function($routeProvider, $locationProvider){
$routeProvider.when
("/sivu1", {templateUrl: "templates/sivu1.html", controller: "sivu1controller"});
$routeProvider.when
("/sivu2", {templateUrl: "templates/sivu2.html", controller: "sivu2controller"});
$routeProvider.otherwise({redirectTo: "/home"});
$locationProvider.html5Mode({enabled:true, requireBase:false});
}]);
appi.controller("sivu1controller",["$scope", function($scope){
$scope.viesti = "Tässä sivu ykkönen(1)";
}]);
appi.controller("sivu2controller",["$scope", function($scope){
$scope.viesti = "Tässä sivu kakkonen(2)";
}]);
sivu1.html and sivu2.html both have the same content
<h2>{{ viesti }}</h2>
Folder structure
Change your href from
Sivu ykköne
\Sivu kakkone
To
Sivu ykköne
Sivu kakkone
It should be working now.
Related
I am using this angular-seed project https://github.com/angular/angular-seed and replaced ng-route with ui-router. It is almost done by i didn't find how to solve this error.
Here is the full error:
angular.js:9503 Error: [$injector:unpr] Unknown provider: interpolateFilterProvider <- interpolateFilter
http://errors.angularjs.org/1.2.13/$injector/unpr?p0=interpolateFilterProvider%20%3C-%20interpolateFilter
at angular.js:78
at angular.js:3556
at Object.getService [as get] (angular.js:3683)
at angular.js:3561
at Object.getService [as get] (angular.js:3683)
at Parser.$filter (angular.js:13972)
at Parser.filter (angular.js:10090)
at Parser.filterChain (angular.js:10081)
at Parser.statements (angular.js:10056)
at Parser.parse (angular.js:9935)
Here is my full code
app.js
var myApp=angular.module('myApp', [
'ui.router',
'myApp.view1',
'myApp.view2'
]);
myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/view1');
}]);
view1.js
var myApp = angular.module('myApp.view1', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/view1');
$stateProvider
.state('view1', {
url: '/view1',
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
});
myApp.controller('View1Ctrl', [function() {
}]);
view2.js
var myApp = angular.module('myApp.view2', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/view2');
$stateProvider
.state('view2', {
url: '/view2',
templateUrl: 'view2/view2.html',
controller: 'View2Ctrl'
});
});
myApp.controller('View2Ctrl', [function() {
}]);
view1.html
<div ui-view>This is the partial for view 1.</div>
view2.html
<p>This is the partial for view 2.</p>
<p>
Showing of 'interpolate' filter:
{{ 'Current version is v%VERSION%.' | interpolate }}
</p>
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<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">
<link rel="stylesheet" href="bower_components/html5- boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
</head>
<body ng-app="myApp">
<div ui-view></div>
<ul class="menu">
<li><a ui-sref="view1">view1</a></li>
<li><a ui-sref="view2">view2</a></li>
</ul>
<div>Angular seed app: v<span app-version></span></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
Try injecting myApp.version on your app.js.
var myApp=angular.module('myApp', [
'ui.router',
'myApp.view1',
'myApp.view2',
'myApp.version'
]);
myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/view1');
}]);
My problem is with template Url in angularjs.
So when i put this code in my editor and run it it works perfectly:
HTML:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app = "app">
<div ng-view></div>
</body>
</html>
Js:
var app = angular.module('app', [])
app.config(function($routeProvider){
$routeProvider.when('/', {
template: 'page',
})
.when('/helloUser', {
template: "ds"
})
.otherwise({
redirectTo: '/'
})
})
That worked fine but as soon as i try to put a templateUrl It goes of here is my example code for that:
index.html
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app = "app">
<div ng-view></div>
</body>
</html>
page.html:
Hello World
main.js:
var app = angular.module('app', [])
app.config(function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'page.html'
})
.when('/helloUser', {
template: "ds"
})
.otherwise({
redirectTo: '/'
})
})
EDIT:
1
down vote
accept
You must inject the ngRoute module:
var app = angular.module('app', ['ngRoute'])
Not work:
You must inject the ngRoute module:
<script src="angular-route.js">
var app = angular.module('app', ['ngRoute'])
I have this index.html page:
<html>
<head ng-app="myApp">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test App/title>
<link rel="stylesheet" href="app.css">
</head>
<body ng-controller="mainController">
index2
<div ng-view></div>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
And this is my app.js script:
'use strict';
var myApp = angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/index2', {
templateUrl: 'views/index2.html'
})
.otherwise({redirectTo: '/views/index2.html'});
});
myApp.controller('mainController', function ($scope) {
});
And my views/index2.html is contains only single 123 element.
When I'm clicking link on my index.html, nothing happens, no routing.
What I'm doung wrong?
upd: I run it from IntelliJ IDEA so it's nothing about webserver is missing ,I think.
You have ng-app directive applied to your head tag:
<head ng-app="myApp">
This means that ng-app will apply to head tag only. Instead you need to move it to your html tag:
<html ng-app="myApp">
I am practicing AngularJS and have one problem:
ng-route doesn't work even though I added angular-route.js.
Here is my app.js file:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/intro.html'
})
.when('game', {
templateUrl: 'views/game.html',
controller: 'TableController'
})
.when('about', {
templateUrl: 'views/about.html'
})
.otherwise({
redirectTo: '/'
});
}]);
and here is my index.html
<!DOCTYPE html>
<html>
<head>
<title>Color Picking</title>
<meta name="author" content="pexea12">
<meta charset="utf-8">
<meta name="viewport" content="device=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Script -->
<script src="js/bootstrap/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</head>
<body ng-app="app">
<header>
<br>
<h2>Color Picking</h2>
<br>
</header>
<div id="main">
<div ng-view></div>
</div> <!-- main -->
<!-- AngularJS -->
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/angular-route.js"></script>
<script src="js/app.js"></script>
<!-- Services -->
<script src="js/services/ColorService.js"></script>
<!-- Factories -->
<script src="js/factories/RandomFactory.js"></script>
<!-- Controllers -->
<script src="js/controllers/TableController.js"></script>
</body>
</html>
My folder tree is:
css (css files, Bootstraps)
js (app.js, controllers, services, factories, ...)
views
My website works with http://localhost:8080/ but doesn't work with localhost:8080/about or localhost:8080/game.
I am really stuck at this point and can't find the solution.
I think your're having a problem after your .when, should be :
$routeProvider
.when('/', {
templateUrl: 'views/intro.html'
})
.when('/game', {
templateUrl: 'views/game.html',
controller: 'TableController'
})
.when('/about', {
templateUrl: 'views/about.html'
})
.otherwise({
redirectTo: '/'
});
You're missing the / in your routes
I'm trying to use AngularJS in my webapp so dynamically create a menu and then populate the page based on the selection. I have created all the components needed, however it seems that since I split out my controllers I'm getting the following error. Any ideas why?
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=MenuCtrl&p1=not%20a%20function%2C%20got%20undefined
The code I have is as follows:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myWebApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=yes, width=device-width, target-densitySpi=device-dpi, initial-scal=1.0" />
<link href="css/MainStyles.css" rel="stylesheet" type="text/css" media="screen">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js" type="text/javascript"></script>
<!-- AngularJS Controllers -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/home.js"></script>
<title>
Page Title
</title>
</head>
<body>
<div id="menu_bar" ng-controller="MenuCtrl">
<ul>
<li ng-repeat="menuItem in menuItems">
{{menuItem.name}}
</li>
</ul>
</div>
<div id="page_content">
<div ng-view></div>
</div>
</body>
js/app.js
var myWebApp = angular.module('myWebApp', [
'ngRoute',
'myWebAppControllers'
]);
myWebApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
redirectTo: '/home'
}).
when('/home', {
templateUrl: '/partials/home.html',
controller: 'HomeCtrl'
}).
otherwise({
templateUrl: '/partials/404.html',
});
}]);
js/controllers.js
var myWebAppControllers = angular.module('myWebAppControllers', []);
myWebAppControllers.controller('MenuCtrl', function ($scope, $location) {
$scope.menuItems = [
{
'name': 'Home',
'path': '#/home'
}
];
});
js/controllers/home.js
var myWebAppControllers = angular.module('myWebAppControllers', []);
myWebAppControllers.controller('HomeCtrl', function ($scope, $location) {
$scope.title = "Home"
});
You are defining the same module twice (and by that overriding the first one), once in controllers.js and the other in controllers/home.js. If you want both controllers to be under the same module, you need to define it once with
var myWebAppControllers = angular.module('myWebAppControllers', []);
And in other places only retrieve it:
var myWebAppControllers = angular.module('myWebAppControllers');