AngularJS (routing) cannot find .html templates in Maven SpringBoot project in Eclipse - javascript

I'm learning AngularJS with Spring Boot. I have created a SpringBoot project and imported it into Eclipse and without writing any Java code I'm trying to make AngularJS front end template work with routing. I have necessary angular scripts included in the project and I'm doing everything as in tutorials on w3schools and on spring website. The same code works fine if I create a very simple app using just html and js not using any IDE, but it fails in Eclipse.
The project directory in Eclipse:
-src/main/java
|-com.package
|---Application.java
|---ViewController.java
-src/main/resources
|---static
|-----app
|------app.module.js
|-----angular-route.min.js
|-----angular.min.js
|-----angular.min.js.map
|-----style.css
|---templates
|-----first.html
|-----index.html
|-----main.html
|-----second.html
Navigation in index.html:
<body ng-app="app">
<header class="header">
<a ng-href="#/!">Main</a>
<a ng-href="#!first">First</a>
</header>
<div>
<ng-view></ng-view>
</div>
</body>
app.module.js
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: 'main.html'
})
.when("/first", {
templateUrl: "first.html"
})
.when('/second', {
templateUrl: 'second.html'
})
.otherwise({redirectTo: '/'});
});
As in case of the first route within app.config , it will work fine in each case if I use template instead of templateUrl.
In case of each of the .html templates they contain some dummy code for example:
<p>first</p>
When I check in dev-tools, in the Network tab I can see 404 as a response for a request for a template. In the Console I can see the error message as follows.
Error: "[$templateRequest:tpload] http://errors.angularjs.org/1.7.8/$templateRequest/tpload?p0=%2Fsrc%2Fmain%2Fresources%2Ftemplates%2Ffirst.html&p1=404&p2="
From AngularJS website I learned it means there's something wrong with the path. I tried to modify the path as in "/first.html", "./first.html", "/templates/first.html" but the result was the same.
I do not understand what the issue is. Any help will be appreciated.
EDIT: I thought it might be useful to add the code for ViewController.java:
#Controller
public class ViewController {
#RequestMapping("/")
public String index() {
return "index";
}
}
Thanks for any suggestions.

Everything worked fine - I mean the navigation - as soon as I moved all html files into src/main/resource/static folder within the project in Eclipse.
So the project structure should be like this:
-src/main/java
|-com.package
|--Application.java
|--ViewController.java
-src/main/resources
|-static
|--app
|----app.module.js
|--angular-route.min.js
|--angular.min.js
|--angular.min.js.map
|--first.html
|--index.html
|--main.html
|--second.html
|--style.css
|-templates

Related

How to select a DIV and specify a controller for it in AngularJS

In my AngularJs Project I have a DIV tag which contains the main navigation bar in my project.
This navigation bar has it's own specific controller which called "topNavController".
I've recently modified my app in order to load everything -somehow- lazily using RequireJs .
The problem is this controller is not dependant on any view/route and has to be loaded directly after my App.js loads .
I'm bootstrapping my app from my RequireJs main file using :
angular.bootstrap(document, ['myApp']);
If I do like :
<div ng-controller="topNavController">...</div>
I get an error which says :
Argument 'topNavController' is not a function, got undefined
which I think it's because myApp is not bootstrapped at the moment Angular tries to bind this controller to my DIV.
I appreciate any suggestions, workarounds or solutions for this.
Thanks in advance.
You miss ng-app to launch the angular bootstrap method.
<div ng-app="myApp">
<div ng-controller="topNavController"></div>
</div>
You should use directive for this behavior
I've fixed it by removing
ng-controller='topNavController'
and making a directive for it, I put all the code from topNavController to topNavDirective and used directive's controller instead.
Thanks to "iScor" hint in the answer above !
here is how the last version of my main RequireJs file looks like :
require(
[
'app',
'routeResolver',
'services/authService',
],
function () {
require(["directives/topNavDirective"]);
angular.bootstrap(document, ['myApp']);
});

Phalcon and Angular JS routing - use Angular templates and Phalcon controllers

I am using Phalcon with Angular JS and have the problem, that Phalcon is catching all my Angular routes. The target is that the route /dashboard is called first which loads the Angular, jQuery, etc. If the user clicks on the link /people only the ng-view should change and the Angular template should be loaded.
Volt template:
<div ng-app="sampleApp">
// Loads menu with two links to /dashboard and /people
<?php $this->partial("partials/navigation") ?>
<?php echo $this->flashSession->output(); ?>
<div ng-view ng-controller="DashboardController">
{{ content() }}
</div>
</div>
My target is that when the user clicks a link only the ng-view is changed with the routes defined in Angular:
$routeProvider
.when('/dashboard', {
templateUrl: '/partials/dashboard.html',
controller: 'DashboardController'
}).when('/people', {
templateUrl: '/partials/people.html',
controller: 'PeopleController'
});
Instead of that the Phalcon routing tries to load the "PeopleController" with the method "indexAction".
I have tried to disable the Phalcon routing and only load the dashboard route (where the Angular library is loaded):
$di->set('router', function () {
$router = new \Phalcon\Mvc\Router(false);
$router->add("/dashboard", array(
'controller' => 'dashboard',
'action' => 'index'
));
return $router;
});
How can I load some pages/routes with Phalcon like the /dashboard and some pages/routes to change the ng-view in Angular?
Best regards,
Patrick
Edit: It works fine with the normal Angular, but with activated HTML mode it makes problems
Constructing your router passing false as parameter would be enough to not add the default routes. Only the ones you explicitly add will be matched.
However your problems are more likely coming from your client-side router. Please read carefully about the $location service to understand how make angular be able to tell if the current route should be retrieved from your server or not.
I would like to improve this answer if you provide more details about your angular router setup.

How to organize the commonly used view (HTML) files in AngularJS?

I am creating a large scale application using AngularJS which is a Single Page App. I kept all the script files under the folder Scripts like below.
Scripts
Sample
SampleModel.js
SampleService.js
SampleController.js
Sample1
Sample1Model.js
Sample1Service.js
Sample1Controller.js
and my view files as below
Views
Sample
sample.html
sampleheader.html
samplefooter.html
Sample1
sample1.html
sampleheader.html
samplefooter.html
I have same content for header and footer in both the Sample and Sample1 folder. I want to make it as common for all the screens which I am going to create.
Please advise the best way, to organize the commonly used HTML files?
I would suggest a structure like this:
Views
Samples
sample.html
sample1.html
Common
sampleheader.html
samplefooter.html
And build up your main view like this:
<div ng-view>
<!-- your app routing routes to sample.html, sample1.html, ... -->
</div>
Content of a "sample.html":
<div ng-include="'Views/Samples/Common/sampleheader.html'"></div>
<!-- your special sample code here -->
<div ng-include="'Views/Samples/Common/samplefooter.html'"></div>
The routing would look like this:
angular.module('myApp', ['ngRoute']).config(function($routeProvider){
$routeProvider
.when('/sample',
{templateUrl: 'Views/Sample/sample.html', controller: SampleController})
.when('/sample1',
{templateUrl: 'Views/Sample/sample1.html', controller: SampleController})
;
})

Index page separate from rest of AngularJS app?

I'm working on two projects right now using AngularJS, and I'm running into the same problem with both of them.
The problem is that I have an index page that looks completely different from any of the inner pages, which means that my ng-view has to consist of the entire page. This makes it so that any time a route changes, the whole page has to reload instead of just the main content area. This causes things like the header or sidebar to flash briefly.
The only good approach I can think of to make my index page separate from my app is to literally have a separate, static index.html and then all my angularJS pages inside a separate folder so that I can use a more focused ng-view.
Is this the only/best approach there is? Has anyone achieved this, or have any ideas on how to? thanks.
A way to solve this problem would be using UI-Router.
For example:
You could have an app.html which is a page that holds all of your application views. In it add a:
<body>
<div ui-view></div>
</body>
and styles/scripts required by the entire application.
All of your views will go there including the index.html view.
Assuming that the pages except the index have some sort of header/body/footer layout in which the body changes according to the actual page you can use a configuration as follows:
var app = angular.module('app', [])
.config(['$stateProvider', function ($stateProvider)
{
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'index.html',
controller: 'IndexController'
})
.state('root', {
templateUrl: 'root.html',
controller: 'RootController'
})
.state('root.somePage', {
url: '/some-page',
templateUrl: 'some-page.html',
controller: 'SomePageController'
})
.state('root.anotherPage', {
url: '/another-page',
templateUrl: 'another-page.html',
controller: 'AnotherPageController'
});
}
The root.html will be like a masterpage in ASP.NET Webforms so it would be in the form:
<!-- header markup here -->
<div ui-view></div>
<!-- footer markup here -->

AngularJS routing configuration

I am new to angularjs, was just trying to build a CRUD app with it.
My code is like this http://jsfiddle.net/fpnna/1/
And I am using apache as webserver, when turing on the
$locationProvider.html5mode(true);
then getting
uncaught TypeError: Object #<Ic> has no method 'html5mode' from testApp
When I am clicking to "Add new" the path changing to "/new" but getting error
404 The requested URL /new was not found on this server.
Any idea where I am doing wrong.
I went through the official manual, couldn't figure it out.
Thanks in advance.
You have a couple issues, first in jsfiddle you don't need the body tags plus you have multiple body tags. Also your fiddle has two ng-apps, the routes are defined incorrectly (should be /new for instance), invalid ng-view closing tag, there should only be one. You should include the javascript with No wrap in head and lastly it is html5Mode with a capital M on the mode and none of your partials exist at their urls nor are they defined as local scripts.
I would suggest you use plunkr as it allows you to add other local files, ie your partials which don't exist in the fiddle.
I've cleaned up all of the issues on this plunkr: http://plnkr.co/edit/A23Fxn9Ji02TGZ0jouZR?p=preview
angular.module('testApp', []).
config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true); // case is important
$routeProvider.
when("/", {
templateUrl: "list.html"
}).
when("/new", { // make sure and use absolute link to route
templateUrl: "edit.html"
})
})
function testCtrl($scope) {
$scope.persons = [{
name: "X"
}, {
name: "Y"
}, {
name: "Z"
}]
}
and the html:
<body ng-controller="testCtrl" >
<div class="main-nav"> Add Me
</div>INDEX
<div >
<div ng-view>
</div>
</div>
</body>
Please review the documentation and tutorials to learn the basics on setting up a project. http://docs.angularjs.org/guide/bootstrap

Categories