I have a basic single page application in Angular Js. I have applied routing and set 'Html5Mode' to true.
My URL's have been cleaned up, but they now result in a 404 when trying to access the URL.
Now this is a front end web application so I do not have any config on IIS I can set up rewrite rules with.
Can anyone point me in the right direction to set up the URL's to prevent 404 error.
Below is my routing:
(function () {
"use strict";
angular.
module("app", [
"ngRoute",
"app.home",
"app.products",
"app.contact"
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/",
{
controller: "HomeController",
templateUrl: "app/components/home/home.html"
})
.when("/products",
{
controller: "ProductsController",
templateUrl: "app/components/products/products.html"
})
.when("/contact",
{
controller: "ContactController",
templateUrl: "app/components/contact/contact.html"
})
.otherwise("",
{
controller: "HomeController",
templateUrl: "app/components/home/home.html"
});
$locationProvider.html5Mode(true);
});
})();
Index.html:
<!DOCTYPE html>
<html ng-app="app" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Newtown Gates & Welding</title>
<link href="assets/css/site.css" rel="stylesheet" />
<link href="app/components/home/home.css" rel="stylesheet" />
<link href="app/components/contact/css.css" rel="stylesheet" />
<link href="app/components/products/products.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<script src="assets/libs/angularjs/1.6.1/angular.js"></script>
<script src="assets/libs/angularjs/1.6.1/angular-route.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/products/productsController.js"></script>
<script src="app/components/contact/contactController.js"></script>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<base href="/"/> <!--Required when using location provider-->
<div>
Navbar here
<li>
home
contact
products
</li>
</div>
<div class="container-fluid">
<div class="row" style="border: 1px solid black;">
HELLO
</div>
<div ng-view></div>
</div>
</body>
</html>
Please add <base href="/" /> to your <head>
Please look here:
link
EDIT
you need to set the current folder in my case is
Related
I am learning Angularjs and Setting my routing for pages. Right now when whatever Url I try the .otherwise statement is executed. here is my app.js
var myNinjaApp = angular.module('myNinjaApp', ['ngRoute']);
myNinjaApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when ('/home',{
templateUrl: 'views/home.html'
})
.when ('/directory', {
templateUrl: 'views/directory.html',
controller : 'NinjaController'
})
.otherwise({
redirectTo: '/directory'
});
}]);
And the following is my index.html
<html lang="en" ng-app="myNinjaApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular.route.min.js"></script>
<script src="app/app.js"></script>
</head>
<body >
<header ng-include = "'header.html'"></header>
<div ng-view></div>
</body>
</html>
I am using vscode live server to run this simple app. Also, I have the the controller in my app.js but I haven't pasted the code over here for simplicity.
try this <base href="/"> in you're header tag, and add $locationProvider.html5Mode(true); before $routeProvider
I'm trying to create a login/signup site in order to learn how to separate controllers and partial views, but I'm not sure why my 'LoginController' isn't being injected. Feel free to provide any other feedback.
app.js
angular.module('Registration', ['ngRoute'])
.config(['$routeProvider', ($routeProvider) => {
$routeProvider
.when('/login', {
templateUrl: 'app/login/login.html',
controller: 'LoginController'
})
.otherwise({ redirectTo: '/login' });
}]);
LoginController.js
angular.module('Registration')
.controller('LoginController', ['$scope', ($scope) => {
$scope.message = 'Does this work?';
}]);
login.html
<div class="col-md-offset-3 col-md-6">
{{ message }}
</div>
index.html
<!doctype html>
<html ng-app="Registration">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sup?</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div ng-view></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="assets/js/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/login/LoginController.js"></script>
</body>
</html>
server.js
var express = require('express');
var app = express();
app.use(express.static('./public'));
app.listen(3000, () => {
console.log('Listening on port 3000.');
});
Directory Structure
Turns out you can't use an arrow function in the controller! Totally didn't mean to answer my own question.
Found the answer here: https://github.com/angular/angular.js/issues/14814
Just try to reach to your login route like http://localhost:8080/#/login
Am trying to use material-design-lite with ui-router, but my templates are never rendered into the view
<html lang="en" ng-app="admin">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="fragment" content="!">
<base href="/">
<title ng-bind="state.data.title"></title>
<link rel="stylesheet" type="text/css" href="libs/material-design-lite/material.min.css">
<link rel="stylesheet" type="text/css" href="src/css/app.css">
</head>
<body>
<div class="app-layout mdl-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<app-header></app-header>
<app-sidebar></app-sidebar>
<main class="mdl-layout__content mdl-color--grey-100 page">
<section ui-view></section>
</main>
</div>
<script>
//Global Variables
</script>
<script src="libs/material-design-lite/material.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="src/js/modules/angular-mdl.js"></script>
<script src="src/js/app.js"></script>
<script src="src/js/app.routes.js"></script>
<script src="src/js/controllers/main.js"></script>
<script src="src/js/controllers/dashboard.js"></script>
<!-- Directives -->
<script src="src/js/directives/header.js"></script>
<script src="src/js/directives/sidebar.js"></script>
</body>
</html>
app.routers.js file
//App Routes
angular.module('admin').
config(['$stateProvider', '$urlRouterProvider','$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/dashboard');
$stateProvider.state('app',{
abstract: true,
url: '',
controller: 'MainController'
})
.state('app.dashboard', {
url: '/dashboard',
data: {
'title': "Admin - Dashboard"
},
templateUrl: '/tpls/dashboard.html',
controller: 'DashboardController'
})
}
]);
$rootScope.$on('$stateChangeSuccess', function () {
$timeout(function () {
componentHandler.upgradeAllRegistered();
});
});
I found that ui-router doesn't work well with material design lite in my project, And in the source code of material, I found an Window object componentHandler which has a function upgradeAllRegistered, this function should work. So, I called it after stateChangeSuccess, and it just worked.
Add template: "<ui-view />" to your 'app' state's config object
https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#abstract-states
Remember: Abstract states still need their own <ui-view/> for their children to plug into. So if you are using an abstract state just to prepend a url, set resolves/data, or run an onEnter/Exit function, then you'll additionally need to set template: "<ui-view/>".
I'm using AngularJS 1.4.7 for a web application which works completely fine on the desktop site. However when I load the page on my phone using Chrome the webpage doesn't load any of the routing that should be taken care of by the ngRoute component.
The header.php
<?php ob_start(); ?>
<!DOCTYPE html>
<html lang="en-ca" ng-app="ledgerFeed">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Online Ledger</title>
<script src="/res/jQuery.js"></script>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.css" />
<script src="/bootstrap/js/bootstrap.min.js"></script>
<base href="/ledger/">
<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="fetcher.js"></script>
<script src="accountController.js"></script>
<script src="entryController.js"></script>
</head>
<body>
The app.js
(function() {
var app = angular.module("ledgerFeed", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
// .when("/", {
// templateUrl: "accountlist.php",
// controller: "accountController"
// })
.when("/accounts", {
templateUrl: "accountlist.php",
controller: "accountController"
})
.when("/account/:accountID", {
templateUrl: "entrylist.php",
controller: "entryController"
})
.otherwise({ redirectTo: "/accounts" });
// $locationProvider.html5Mode(true);
});
})();
Does anyone know what I might be doing wrong ?
I have the following scenario:
Mobile application written in Angular.
Login page that has not special layout - simple page.
home page that have a special layout including header and footer.
internal pages that also include header and footer.
So i want to be able to use two layouts 1- blank 2- with header and footer.
on my index.html page i added:
<div ui-view class="app-content"></div>
This is how my state provider looks like:
.state('layout', {
templateUrl: 'partials/mobile/layout.html',
reloadOnSearch: false
})
.state('homepage', {
url: "/",
templateUrl: 'partials/mobile/home.html',
parent: 'layout',
})
.state('internal-page', {
url: "/internal/:id",
templateUrl: 'partials/mobile/internal.html',
parent: 'layout',
controller:'InternalController',
})
.state('login', {
url: "/login",
templateUrl: 'partials/mobile/login.html',
controller: 'MobileLoginController',
})
in layout.html i have used the same ui-view again:
<!-- App Body -->
<div class="app-body" ng-class="{loading: loading}">
<div class="app-content">
<div ui-view></div>
</div>
</div>
The result is duplicate views, i get the same view twice when i'm using layouts.
The question:
Can someone explain what am i doing wrong, and how can i nested the ui-view one inside another without duplicate the page?
My index.html complete page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<base href="" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.css" />
<link rel="stylesheet" href="css/mobile/layout.css"/>
<script src="bower_components/angular1.3/angular.js"></script>
<script src="bower_components/angular1.3/angular-route.js"></script>
<script src="bower_components/angular-touch/angular-touch.min.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.migrate.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-websocket/angular-websocket.js"></script>
<script src="js/common/app.js"></script>
<script src="js/mobile/app.js"></script>
<script src="js/common/services.js"></script>
<script src="js/common/controllers.js"></script>
<script src="js/common/filters.js"></script>
<script src="js/mobile/controllers.js"></script>
<script src="js/mobile/directives.js"></script>
<script src="js/mobile/services.js"></script>
</head>
<body ng-app="myApp" ng-controller="ApplicationController" ng-swipe-right="swipe('right')" ng-swipe-left="swipe('left')">
<div data-ng-show="loading" class="app-content-loading">
<div class="spinner-background">
<div class="loader-image"></div>
</div>
</div>
<div ui-view class="app-content"></div>
<div ui-yield-to="modals"></div>
</body>
</html>
My app.js page:
angular.module('myApp', [
'myApp.common',
'ngRoute',
'ngTouch',
'ui.router',
'ui.bootstrap',
'mobile-angular-ui',
'ngCookies',
'myApp.filters',
'myApp.services',
'myApp.services.mobile',
'myApp.directives',
'myApp.controllers',
'myApp.controllers.mobile',
'mobile-angular-ui.gestures',
'mobile-angular-ui.migrate',
'angular-websocket'
])
I created working plunker - BUT 1 : 1 with your question snippet. Based on that code you've shown, I must say:
All your (shown) code is correct and working. The issue is elsewhere...
It could be some lost ui-view elsewhere
<div class="app-body" ng-class="{loading: loading}">
<div class="app-content">
<div ui-view></div>
</div>
// suspected to me is lost child ... with the ui-view attribute
<div ui-view></div> // doubled target declaration
</div>
Check that your code is working here