I am trying to figure out why I have this error:
Uncaught Error: [$injector:modulerr]
I have the following code in index.html
<!DOCTYPE html>
<html ng-app="MainApp">
<head>
<meta charset="utf-8">
<link rel='stylesheet' type='text/css' href='core/sty.css'>
<script src="core/CS/ang/angular.min.js"></script>
<script src="core/CS/ang/angular-resource.min.js"></script>
<script src="core/CS/ang/angular-route.min.js"></script>
</head>
<body>
<div id="header-cont">
<div id="header">
<ul style="list-style:none;">
<li style="display:inline;float:left;"><font style="font-size:38px;top:-5px;left:-1px;position:fixed;">title</font></li>
<li class="menu">News</li>
<li class="menu"><ul class="sub-menu">
<li class="SMoption">1 First login</li>
<li class="SMoption">2 Duble register</li>
</ul>account</li>
</ul>
</div>
</div>
<ng-view></ng-view>
<script src="core/CS/mainscript.js"></script>
<script src="core/CS/config.js"></script>
<script src="core/CS/controllers.js"></script>
<script src="core/CS/modules.js"></script>
</body>
</html>
The mainscript.js
'use strict';
var appv = angular.module("MainApp", ['ngRoute','ngResource']);
And config.js
'use strict';
appv.config(function($routeProvider) {
$routeProvider.
when('/', {
//controller: 'HomeController',
templateUrl: 'views/home.html'
}).
when('/page/:pgId', {
//controller: 'PageController',
templateUrl: 'views/page.html'
}).
when('/article/:pgId/:artId', {
//controller: 'ArticleController',
templateUrl: 'views/article.html'
}).
when('/admin/:adCode', {
//controller: 'AdminController',
templateUrl: 'views/admin.html'
}).
otherwise({templateUrl: 'views/home.html'});
$locationProvider.html5Mode(true);
});
As you can see I have included the ng-route.js, ngRoute module, but something doesn't work...
you enable the html5 mode by adding $locationProvider.html5Mode(true); but you didn't inject the $locationProvider provider into the config function, adding that will solve the problem :)
appv.config(function($routeProvider, $locationProvider ) {
.........
You need to include $locationProvider as a dependency in your config function like this:
'use strict';
appv.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/', {
//controller: 'HomeController',
templateUrl: 'views/home.html'
}).
when('/page/:pgId', {
//controller: 'PageController',
templateUrl: 'views/page.html'
}).
when('/article/:pgId/:artId', {
//controller: 'ArticleController',
templateUrl: 'views/article.html'
}).
when('/admin/:adCode', {
//controller: 'AdminController',
templateUrl: 'views/admin.html'
}).
otherwise({templateUrl: 'views/home.html'});
});
Related
I am using angular-ui-router tutorial.
It does not work when i want to load home.html page.
I defined 3 states for each page and define their template url,but no navigation is working at all.
http://localhost:8080/index.html#/home.
this is index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>catalogue</title>
<link rel="stylesheet" type="text/css"
href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="css/myStyle.css" />
</head>
<body ng-app="MyApp" >
<div ui-view >
</div>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
this is app.js :
var app=angular.module("MyApp",['ui.router']);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider.state('home',{
url:'/home',
templateUrl: 'views/home.html',
controller: 'HomeController'
});
$stateProvider.state('chercher',{
url:'/chercher',
templateUrl: 'views/chercher.html',
controller: 'MyController'
});
$stateProvider.state('newProduct',{
url:'/newProduct',
templateUrl: 'views/newProduct.html',
controller: 'NewProductController'
});
});
app.controller('HomeController', function() {
});
app.controller('NewProduitController', function() {
});
home.html:
<div>
<h1>home</h1>
</div>
Set default URL state.
var app=angular.module("MyApp",['ui.router']);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider.state('home',{
url:'/home',
templateUrl: 'views/home.html',
controller: 'HomeController'
});
$stateProvider.state('chercher',{
url:'/chercher',
templateUrl: 'views/chercher.html',
controller: 'MyController'
});
$stateProvider.state('newProduct',{
url:'/newProduct',
templateUrl: 'views/newProduct.html',
controller: 'NewProductController'
});
// add this code
$urlRouterProvider.otherwise('/home');
});
app.controller('HomeController', function() {
});
app.controller('NewProduitController', function() {
});
open this link in browser http://localhost:8080/
i solved the problem.
I used ui-sref instead of writing directly in the URL browser.
<button ui-sref="home" >Home</button>
I'm creating a web portfolio and the main page has a menu. When the user clicks 'video' I want the site to go to mywebsite.com/video and go to video.html. I'm using AngularJS and I can't figure out what I'm doing wrong.
index.html
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body ng-app="myApp">
<nav class="topnav" id="myTopnav">
Portfolio
Upcoming Events
CV
Video Reel
</nav>
<div class="ng-view"></div>
</body>
main.js
var app = angular.module('myApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when(
'/', {
redirectTo: '/home'
})
.when('/portfolio', {
templateUrl: 'templates/portfolio.html'
})
.when('/events', {
templateUrl: 'templates/events.html'
})
.when('/cv', {
templateUrl: 'templates/cv.html'
})
.when('/video', {
templateUrl: 'templates/video.html'
})
.otherwise({ redirectTo: '/' });
});
can you try to add $locationProvider service into config and change href attributes
//html
<body ng-app="myApp">
<nav class="topnav" id="myTopnav">
Portfolio
Upcoming Events
CV
Video Reel
</nav>
<div class="ng-view"></div>
</body>
//js
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when(
'/', {
redirectTo: '/'
})
.when('/portfolio', {
templateUrl: 'templates/portfolio.html'
})
.when('/events', {
templateUrl: 'templates/events.html'
})
.when('/cv', {
templateUrl: 'templates/cv.html'
})
.when('/video', {
templateUrl: 'templates/video.html'
})
// removed other routes ... *snip
.otherwise({
redirectTo: '/'
}
);
// enable html5Mode for pushstate ('#'-less URLs)
//$locationProvider.html5Mode(true);
//$locationProvider.hashPrefix('!');
}]);
It should be,
Portfolio
Upcoming Events
CV
Video Reel
DEMO
I think you should inject $locationProvider because you are using it but I do not see the injection.
I am playing with angularjs, and I cannot find the reason why ng-view does not work. What am I doing wrong?
var app = angular.module('Demo', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('#/about', {
templateUrl: 'about.html',
controller: 'homeController'
});
$routeProvider.when('#/contacts', {
template: 'contacts.html',
controller: 'contactsController'
});
});
app.controller('homeController', function ($scope) {
alert('homeController');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src=""//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js""></script>
<body ng-app>
<div class="menu">
<ul>
<li>About</li>
<li>Contacts</li>
</ul>
</div>
<div class="MainContent">
<div ng-view></div>
</div>
<template id="about.html">
about
</template>
<template id="contacts.html">
contacts
</template>
</body>
There were a few issues here:
Your script source for angular-route was incorrect in the HTML portion.
Your $routeProvider.when lines do not need '#', so I removed them.
One of your templates used templateUrl, which was not correct. It should only be template: as you are not calling a URL.
Here is a working plunker:
https://plnkr.co/edit/GSoJ4sAxM8joH6zmrxjf?p=preview
var app = angular.module('demo', ['ngRoute'])
// URLs should not have # in them
.config(function ($routeProvider) {
$routeProvider.when('/about', {
template: 'about.html',
controller: 'homeController'
});
$routeProvider.when('/contacts', {
template: 'contacts.html',
controller: 'contactsController'
});
});
app.controller('homeController', function ($scope) {
alert('homeController');
});
app.controller('contactsController', function ($scope) {
alert('contactsController');
});
I am not able routing to other page what the problem I dont know please solve my problem.
I am using Eclipse Java EE IDE for Web Developers.
Version: Mars.1 Release (4.5.1)
Build id: 20150924-1200
// also include ngRoute for all our routing needs
var myApp = angular.module('myApp', ['ngRoute']);
// configure our routes
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('#/', {
templateUrl: 'home.html',
controller: 'mainController'
})
// route for the about page
.when('#/about', {
templateUrl: 'about.html',
controller: 'aboutController'
})
// route for the contact page
.when('#/contact', {
templateUrl: 'contact.html',
controller: 'contactController'
});
});
// create the controller and inject Angular's $scope
myApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.username = 'ranjeet';
$scope.password = 'singh';
$scope.message = 'Everyone come and see how good I look!';
});
myApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
myApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>home
</li>
<li> About
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
</header>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
file structure of my project :
[1
Your url values in $routeProvider.when() should not include # which will be set internally if applicable (as by default html5mode is disabled by angular router, so angular does use hash location strategy).
Try changing:
$routeProvider
// route for the home page
.when('#/', {
templateUrl: 'home.html',
controller: 'mainController'
})
To
$routeProvider
// route for the home page
.when('/', { //do remove # from all registered routes
// ^^ no "#"
templateUrl: 'home.html',
controller: 'mainController'
})
I try to learn AngularJS. At the moment I focus on ui-Routing.
My Code is very simple, but it doenst work and I don't know why.
Description of my problem:
http://de.tinypic.com?ref=kd22ow.jpg
The browser shows:
"Hello World ui-Routing!" (h1 in index.html)
If I try to enter index.html/home.
It says: Error File not found!
Here is my Code:
index.html
<html>
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="Test" ng-controller="MainCtrl">
<h1>Hello World ui-Routing!</h1>
<div ui-view>
</div>
</body>
</html>
app.js:
angular.module('Test', ['ui-router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterprovider)
{
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
.state('test', {
url: '/test',
templateUrl: '/test.html',
controller: 'TestCtrl'
});
$urlRouterProvider.otherwise('home');
}])
.controller('MainCtrl', ['$scope',
function($scope){
$scope.test = "Hello Jan!";
});
.controller('TestCtrl', ['$scope',
function($scope){
$scope.test = "Hello Redirect!";
});
test.html:
<h2>Hello Test! </h2>
home.html:
<h2>Hello Home! </h2>
Where is my problem?
Looking forward to your answers,
Jan
You need to include the ui-router script in your html page too it is a third party and not included in angular.