y try to create a simple web with angular
Project asp.net mvc 5
i have this js
var app = angular.module("app", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/AngularJS/Templates/inicio.html',
controller: 'bienvenidoController'
});
$locationProvider.html5Mode(true);
});
and this:
app.controller("bienvenidoController", function ($scope) {
});
view:
Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
</head>
<body ng-app="app">
#RenderBody()
<!--Librerias Angular-->
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<!---Librerias App-->
<script src="~/AngularJS/RegistrationModule.js"></script>
<script src="~/AngularJS/bienvenidoController.js"></script>
</body>
</html>
index:
<div ng-view>
</div>
and:
<h1>Hola Mundo!</h1>
error:
Error: [$location:nobase]
error see in firebug mozilla
As stated on the AngularJs documentation
If you configure $location to use html5Mode (history.pushState), you need to specify the base URL for the application with a tag or configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode()
https://docs.angularjs.org/error/$location/nobase
You are missing the <base href="/"> in your document or you can disable the check by setting
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Just add <base href="/"> in the <head> section of HTML document and that's it.
<head>
<base href="/">
...
</head>
https://docs.angularjs.org/error/$location/nobase
Related
I am new to AnguarJS and to be honest a bit confused right now.
I just started getting into routing and create this very small app just for testing, but it's not working.
Let me share the entire app, which is... just 2 files:
1/ app.js
angular
.module('app', ['ui.router'])
app.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('firstMessage', {
url: 'first',
template: `<h1>First message</h1>`
});
}]);
2/ index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ui routing testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
</head>
<body>
<h1>Hello World</h1>
First Message
<div ui-view></div>
</body>
</html>
That's it! But when I run the app with npx http-server -o the templatedoesn't show when I click and land on the #/first url.
Does anyone have an idea where the problem comes from?
I think you are missing a / in your url property
angular
.module('app', ['ui.router'])
app.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('firstMessage', {
url: '/first', // HERE
template: `<h1>First message</h1>`
});
}]);
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 have an angular application where i have a app.run.js and app.controllers.js
Previously i was using one main.js , app was working fine but now when
i have separated the controllers and run.js
i am getting no module available error.
Error: $injector:modulerr
Module Error
What am i doing wrong here ?
Please see the fiddle for the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Starfleet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="http://webstandards.delhivery.com/favicon.ico">
<link rel="stylesheet" href="https://webstandards.delhivery.com/2.1.0/libs/ws/delhivery.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body ng-app="starfleet-app" ng-controller="pageController as vm">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://webstandards.delhivery.com/2.1.0/libs/ws/delhivery.js"></script>
<script src="scripts/app.run.js"></script>
<script src="scripts/controllers/app.page.controller.js"></script>
</body>
</html>
This is my app.run.js
angular.module('starfleetApp',['dlv-ng','ngRoute']);
angular.module('starfleetApp').config(function($routeProvider) {
debugger;
$routeProvider
.when('/', {
templateUrl: './../partials/tracking.html'
})
.when('/create', {
templateUrl: './../partials/createOrder.html'
})
.when('/singleUpload', {
templateUrl: './../partials/singleUpload.html'
})
.otherwise({
redirectTo: '/'
});
});
This is my app.page.controller.js
angular.module("starfleetApp").controller('pageController', function($scope, $uibModal, $log, $document, $rootScope) {
});
<!-- begin snippet: js hide: false console: true babel: false -->
Have you tried to change your angular.module("starfleetApp") to angular.module("starfleet-app")?
according to your html and JS, you are using wrong module name. this might fix your error.
EDIT
working code
http://jsbin.com/komodukipe/edit?html,output
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
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/>".