I'm new to Angular and I'm kind of learning js as I go, but I'm trying to run Angular on the front end with Spring Boot. By default Spring renders my index.html page normally, but I'm getting a 404 not found error when I try to go to the /login page. I've tried just about every url combination I can think of for the template url, but no luck. Because I'm new at Angular, I cannot determine if this is a Spring config issue or something simpler.
Angular controller app.js:
var wishingWell = angular.module('wishingWell', [ 'ngRoute' ]);
wishingWell.config(function($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl : 'static/home.html',
controller : 'home'
}).when('/login', {
templateUrl : 'static/login.html',
controller : 'navigation'
}).otherwise('/');
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
});
wishingWell.controller('home', function($scope, $http) {
$http.get('/resource/').success(function(data) {
$scope.greeting = data;
})
});
wishingWell.controller('navigation', function() {});
index.html:
<!doctype html>
<html ng-app="wishingWell">
<head>
<meta charset="UTF-8"/>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="/css/normalize.css"/>
<link rel="stylesheet" href="/css/main.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="/javascript/Angular/app.js"></script>
<title>Wishing Well</title>
</head>
<body ng-controller="home">
<nav class="nav">
<ul class="navback">
<li>
<a class="active" href="/">The Well</a>
</li>
<li>
<a href="/profile" >Profile</a>
</li>
<li>
Sign Up
</li>
<li>
Log In
</li>
<li>
Sign Out
</li>
</ul>
</nav>
<div ng-view></div>
</body>
</html>
folder structure:
Any ideas?
It has nothing to do with Spring as clicking on login link is getting rendered on client side and not on server side (not an ajax call or page submit).
I can see few issues here:
-> In index.html link for angular-route is incorrect
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
it should be
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
you forgot https:
-> You need to use #/login in anchor tag, else your page will be redirected to .login that doesn't exists
Log In
->index.html and login.html are in same directory, so in app.js template url should be login.html and not static/login.html
You can see it working here
https://plnkr.co/edit/YpAm5FVG2ME7s3EeAigY?p=preview
Note: I have moved index.html outside static folder to make it work with plunker and updated app.js path in index.html accordingly.
If it still doesnt work, press f12 (if using chrome) an post console output.
The root cause (#coder response found the surface level errors) of why these pages wouldn't load was that Spring security was blocking the file paths. I added the templates into the ant matchers and it works. This documentation is where I found this; something easily skipped over when going through it: https://spring.io/guides/tutorials/spring-security-and-angular-js/
#Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/index.html", "/sign-up.html","/login.html", "/").permitAll()
.anyRequest().authenticated()
.and()
.csrf().disable();
}
Related
I was trying to merge AngularJS and VueJS projects together since we need to have a requirement of calling the flow designed in VueJS from inside an AngularJS app. For merging AngularJS and VueJS projects together, I included the dependencies in package.json file of Angular and Vue together and few other files too.
Now since both Vue and Angular have an index.html file created in the project root directory, I made the Angular one as my index.html file and renamed VueJS index file as index23.html. Then from the link from where I need to call VueJS flow, I provided the path in the router of AngularJS config file as shown:
'use strict';
app.config(function ($routeProvider) {
$routeProvider
.when("/errorinput", {
templateUrl: "src/index23.html"
});
});
app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
// Implement me!
}]);
But on doing so, my VueJS page doesn't comes up but rather it comes up in background I think as current page gets surrounded with a white background on clicking that link. I am really not sure if I need to code something inside the app.controller method of above file since this is a Vue component which I am talking about.
Is there any way we can make this work? Please let me know if I need to provide additional details. Contents of index.html file from where this call is made are below:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SEW Drive Status| </title>
<!-- Bootstrap -->
<link href="node_modules/gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="node_modules/gentelella/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="node_modules/gentelella/build/css/custom.min.css" rel="stylesheet">
<!-- Angular JS Material -->
<link href="node_modules/angular-material/angular-material.min.css" rel="stylesheet">
<!-- Angular JS Material -->
<!--link href="public/material.css" rel="stylesheet"-->
</head>
<script src="node_modules/angular/angular.min.js" ></script>
<script src="node_modules/angular-route/angular-route.min.js" ></script>
<script src="node_modules/angular-aria/angular-aria.min.js"></script>
<script src="node_modules/angular-material/angular-material.min.js"></script>
<script src="app/app.js" ></script>
<!-- custom control script section -->
<script src="app/components/assetlist.js" ></script>
<script src="app/components/errorinput.js" ></script>
<script src="bundle.js"></script>
<li><a><i class="fa fa-edit"></i>Administration<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><i class="fa fa-database"></i>Manage Error Descriptions</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
This is the Angular page and link(Manage Error Descriptions) from where I need to call VueJS app:
White background issue:
errorinput.js file after adding the code:
'use strict';
app.config(function ($routeProvider) {
$routeProvider
.when("/errorinput", {
templateUrl: "views/errorinput.html"
});
});
app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
// Implement me!
<template>
<div class="container">
<div>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
<script>
export default{
}
</script>
}]);
Vue and Angular can co-exist on a page just fine.
Because you're using Angular to render Vue's HTML, you'll need to make sure your Vue initialization fires after the new HTML is rendered. You could accomplish this a couple of ways:
Paste your Vue script where it says // Implement me in your code above
Use a hook in your Angular router to load your Vue-specific .js file after the route has loaded
First option is probably more performant, while second option probably keeps your dev setup cleaner.
I'm trying to use the ngRoute in my angularJS page, but I'm not able to load my content within ng-view.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="CSS/index.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/app/index.js"></script>
</head>
<body ng-app="app">
<header>
<a ng-href="#/add-new">Add new</a>
</header>
<div ng-view></div>
<footer>
#Copyright 2017
</footer>
</body>
</html>
index.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/add-new', {
template: 'Some content'
})
}]);
Not sure what I'm missing here.
If I add otherwise condition on $routeProvider, it gets loaded. Please let me know what am I missing here so that the content within my $routeProvider.when gets loaded in my ng-view on markup. Thanks
Also not getting any console errors.
try this
JS:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "index.htm"
})
.when("/add-new", {
templateUrl : "add.htm"
})
});
HTML:
Red
Add this below line in your HTML page
<base href="/">
and change ng-href to href
EDIT :
$location in HTML5 mode requires a <base> tag to be present!
If you using ng-href, the you should pass $scope object
You don't have entry point for the app, so if you load your app and you are not going to specific url you will not see any results.
You can add otherwise({redirectTo:'/add-new'}) or go to #/add-new to see your page
Why can't my Angular directive be fetched even if I provided the correct url - getting a $compile error and XMLHttpRequest cannot load error?
I started with an angular app and I can't include a directive as I keep getting 2 different errors.
XMLHttpRequest cannot load / Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
I have researched a bit and there were suggestions to set up a server t avoid that which I don't understand. Why can't I just build the app only using angular/html without a backend if I don't really need it. What could cause that error?
Error: $compile:upload
That apparently happens when the URL of the template is spelled incorrectly- however, I provide the entire path from the root ( templateUrl:
'js/navbar/navbar.html') or is that wrong?
Thank you.
project1/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
<link rel="stylesheet" type="text/css" href="public/css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js"></script>
<script src="js/app.js"></script>
<script src="js/navbar/navbar.js"></script>
</head>
<body ng-app="myApp">
<header></header>
<navbar></navbar>
<ui-view></ui-view>
</body>
</html>
project1/js/app.js
'use strict';
var app=angular.module('myApp', ['ui.router', 'ui.materialize']);
project1/js/navbar/navbar.js
'use strict';
app.directive('navbar', function () {
return {
restrict: 'E',
templateUrl: 'js/navbar/navbar.html'
}
});
project1/js/navbar/navbar.html
<div class="navbar navbar-static-top navbar-inverse">
<div class="container">
<ul class="nav navbar-nav">
<li>
Hello
</li>
</ul>
</div>
</div>
Always use server to run your angular app or you might get cross origin error. The server will helps you to resove your file paths.Then edit your directive to be
'use strict';
app.directive('navbar', function () {
return {
restrict: 'E',
templateUrl: 'navbar.html'
}
});
I did a little plunker so we are sure your code is free of error.
I am not sure about using the absolute path but if you are going to use it then you have to type something like: "C:projects/project1/js/navbar/navbar.js"
you could use http-server it's easy to install and use.
I hope that answer your question
I am trying to build an app with RatchetJS (the mobile framework, not the websocket server, ie. goratchet.com !!) and AngularJS (v1.5.8). My question relates to project organization, routing and page loading.
What should handle routing if i want ratchet transitions to play nicely with angular js routing and controllers ? Here is what i have so far.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="Application">
<head>
<meta charset="utf-8">
<title>MyApplication</title>
<base href="/">
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the compiled Ratchet CSS -->
<link href="css/ratchet.css" rel="stylesheet">
<!-- <link href="css/ratchet-theme-ios.css" rel="stylesheet"> -->
<!-- <link href="css/ratchet-theme-android.css" rel="stylesheet"> -->
<!-- Include the compiled Ratchet JS -->
<script src="js/ratchet.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<div class="view" ng-view></div>
</body>
</html>
The angular JS app file.
'use strict';
(function() {
var Application = angular.module('Application', ['ngRoute']);
Application.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'DefaultController',
templateUrl: 'pages/home.html',
})
.when('/pages/chat.html', {
controller: 'ChatController',
templateUrl: '/pages/chat.html',
})
.otherwise({ redirectUrl: '/' })
;
$locationProvider.html5Mode(true);
}]);
Application.controller('DefaultController', ['$scope', '$route', function($scope, $route) {
$scope.title = "Grettings";
}]);
Application.controller('ChatController', ['$scope', function($scope) {
$scope.title = "Chat view";
}]);
})();
There are also two files in /pages/... folder (home.html and chat.html). The home.html contains a link looking like:
<a data-ignore="push" href="/pages/chat.html">Go to chat</a>
If i use data-ignore="push" the page gets loaded, but by angular (so no ratchet transitions. Without it, of course, the page gets loaded by Ratchet but AngularJS does not catch the route and the controller is never called...
Providing i want to use ratchet for transitions. How should i handle my architecture / routing ?
Ratchet is not meant for transitions or what you are refering to.
It is meant as a WebSocket for PHP the problem that you are having is clientside pageloading, so try adding more information about your angular install.
I wrote a angular site, and in it I use rerouting to get a partial view into the main index. My site works fine when it's on my local PC.
The main view, Index.html, has a ng-view div, which should display The partial view in Chapter.html when the site first loads. The code for this is in myScript, app.Config.
I uploaded the site to Somee hosting server, and the Chapter.html view is not shown inside index.html.
I researched a bit and it seems that servers shouldn't have problems with angularjs. Besides, it doesn't seem to be a problem with all of angular, because my banner directive works.
I'm using my own copies of angular script, but I don't think that's the issue.
This is the basics of my code:
Index.html:
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/MyStyle.css" rel="stylesheet" />
<script src="../Scripts/bootstrap.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="../modules/myModule.js"></script>
<script src="../Controllers/myController.js"></script>
<script src="../Scripts/MyScript.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" class="container-fluid">
<banner></banner>
<div id="chapter" class="ng-view">
</div>
</body>
</html>
Chapter.html:
<div>
<img src="../Images/Chapter1.1.jpg" />
</div>
myScript.js:
app.directive("banner", function () {
return {
template: "<h1>My Title</h1>"
};
});
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Chapter.html"
});
});