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>
Related
I am very new in angular JS and ng-view is not working.
Below is code of AngularFormsApp.js
var angularFormsApp = angular.module('angularFormsApp', ["ngRoute"]);
angularFormsApp.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "app/Home.html",
controller: "HomeController"
})
.when("/newEOIForm", {
templateUrl: "app/EOIForm/eoifTemplate.html",
controller: "eoifController"
})
.otherwise({
redirectTo: "/Home"
});
});
angularFormsApp.controller("HomeController",
function ($scope, $location) {
$scope.addNewEOI = function () {
$location.path('/newEOIForm');
};
});
Below is html code.
<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app/AngularFormsApp.js"></script>
<script src="app/EOIForm/eoifController.js"></script>
<script src="app/EOIForm/eoifDirective.js"></script>
<script src="app/EOIForm/eoifService.js"></script>
</head>
<body ng-controller="eoifController" class="container">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="nav">
Home
About
Detail
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
</body>
</html>
Below is my root structure.
Why ng-view is not working, also I am not able to debug the code.
Be careful with that $routeProvider.otherwise({redirectTo: '/Home'}).
It should be:
$routeProvider.otherwise({redirectTo: '/home'})
Please, link the href in your index.html like this:
Home
About
Detail
And in your config:
angularFormsApp.config(function ($routeProvider) {
$locationProvider.hashPrefix('');
// Rest of the code
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 just trying to get a partial page to load.
HTML:
<!DOCTYPE html>
<html ng-pp='app' lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Friends</title>
<script src='angular/angular.js'></script>
<script src='angular-route/angular-route.js'></script>
<script src='app.js'></script>
</head>
<body>
<p>
<a href='#!/list'>All Your Frinds</a> | <a href='#!/new'>Add a Friend</a>
</p>
<div ng-view=''>
</div>
</body>
</html>
Routing:
var app = angular.module('app', ['ngRoute']).config(function ($routeProvider)
{
$routeProvider
.when('/list',
{
templateUrl: 'partials/list.html'
})
.when('/new',
{
templateUrl: 'partials/create.html'
})
.when('/show/:id',
{
templateUrl: 'partials/show.html'
})
.when('/edit/:id',
{
templateUrl: 'partials/edit.html'
})
.otherwise(
{
redirectTo: '/'
})
});
Although, I have a controller, there is nothing in it. I just want to be all to see the a partial page is loading and it is not. I need the ng-controller directive in my partial page for it to load?
It doesn't do anything in this example
Most likely your nodejs is serving your static angularjs content from a folder, if you are using expressjs it will be because of
app.use(express.static('public'))
However, the angularjs router is handling your partials
Make sure you set
$locationProvider.html5Mode(false);
It can also help by looking into the developer console to see what url your router is pointing too.
Also
is fine by itself without the ""
I tried your code after removing exclamation mark from href and it's working as expected. Also add base href in HTML. Try below code
<!DOCTYPE html>
<html ng-pp='app' lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="/"></base>
<meta charset="utf-8" />
<title>Friends</title>
<script src='angular/angular.js'></script>
<script src='angular-route/angular-route.js'></script>
<script src='app.js'></script>
</head>
<body>
<p>
<a href='#/list'>All Your Frinds</a> | <a href='#/new'>Add a Friend</a>
</p>
<div ng-view=''>
</div>
</body>
</html>
JS
var app = angular.module('app', ['ngRoute']).config(function ($routeProvider,$locationProvider)
{
$locationProvider.html5Mode(false);
$routeProvider
.when('/list',
{
templateUrl: 'partials/list.html'
})
.when('/new',
{
templateUrl: 'partials/create.html'
})
.when('/show/:id',
{
templateUrl: 'partials/show.html'
})
.when('/edit/:id',
{
templateUrl: 'partials/edit.html'
})
.otherwise(
{
redirectTo: '/'
})
});
The directive was misspelled... Should be:
ng-app
I'm trying to create the following simple navigation:
html:
<html ng-app="myapp">
<body>
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
<div ng-view></div>
<script src="myscript.js"></script>
</body>
</html>
js:
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when("/pages/sub1", {
templateUrl : "templates/sub1.html",
controller : "sub1Controller"
}).when("/pages/sub2", {
templateUrl : "templates/sub2.html",
controller : "sub2Controller"
}).otherwise({
templateUrl : "templates/error.html"
});
$locationProvider.html5Mode(true);
});
Result: the URL path is changed to localhost/pages/sub1 when clicking on a link, as expected. But the ng-view is not updated and remains blank! Why?
I think you have to add # before the url in href field of anchor tag.
Replace your code with this :
<li>sub1</li>
<li>sub2</li>
Refer this jsFiddle
I have made 2 adjustments:
1. Added / to link:
<li>sub1</li>
2. Added requireBase: false to config:
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
I have also putted templates inside HTML just to make it work inside snippet. Full examplae:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Routing</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.js"></script>
</head>
<body ng-app="myapp">
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
<div ng-view></div>
<script>
var app = angular.module('myapp', ['ngRoute']);
angular.module('myapp').controller('sub1Controller', function () {
});
angular.module('myapp').controller('sub2Controller', function () {
});
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when("/pages/sub1", {
templateUrl: "/templates/sub1.html",
controller: "sub1Controller"
}).when("/pages/sub2", {
templateUrl: "/templates/sub2.html",
controller: "sub2Controller"
}).otherwise({
templateUrl: "/templates/error.html"
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
</script>
<script type="text/ng-template" id="/templates/sub1.html">
First View
</script>
<script type="text/ng-template" id="/templates/sub2.html">
Second View
</script>
<script type="text/ng-template" id="/templates/error.html">
404
</script>
</body>
</html>
So, today I added angular-ui-router to my webapp. However, it's showing some really weird behaviour. It used to display the current page in the ui-view. So a page in a page.
Now, it's working correct, but it doesn't show subpages and I can't seem to figure out why.
Main page
<!doctype html>
<html lang="en" ng-app="ExampleApp">
<head>
<meta charset="UTF-8">
<title>Example App</title>
</head>
<body>
<div>
<div ui-view></div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- Main app file -->
<script src="/js/main.js"></script>
</body>
</html>
main.js
var ExampleApp = angular.module('ExampleApp', ['ui.router']);
ExampleApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise("/home");
//
// Now set up the states
$stateProvider
.state('home', {
url: "/home",
templateUrl: "views/home.html",
controller: "MainController"
})
.state('settings', {
url: "/settings",
templateUrl: "views/settings.html",
controller: "SettingsController"
})
.state('settings.account', {
url: "/account",
templateUrl: "views/settings.account.html",
controller: "AccountSettingsController"
});
});
ExampleApp.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Try this
url:"settings/account",