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

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})
;
})

Related

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

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

Include view + controller + style

I need to create a base view, and include "modules" in it.
What I call module is : a View (HTML page), a Controller (Javascript) and a Style (CSS).
At the moment, I need to includes all my javascripts at the end of the index.html and my css at the beggining... BUT, sometimes I won't load ALL my modules.
So if in my page, I need to display module 1 / 2 / 3, I only want to include their views / controllers / styles, and not Module 4's.
I tried with ngView and ngInclude, but I always get an error when I put the related javascript.
Here is an example of what I would like :
<div ng-include="'modules/module1.html'"></div>
The result would be ===>
<link href="modules/module1.css" />
<div ng-controller="module1Controller as module1Ctrl">
<h3 class="test">Module 1</h3>
<p>It is a test !</p>
</div>
<script src="modules/module1.js"></script>
I hope it makes sense...
Your directive -
app.directive('module1', function () {
var controller = ['$scope', function ($scope) {
//CONTROLLER FUNCTIONS HERE
}];
return {
restrict: 'E',
scope: {
data: '=data'
},
controller: controller,
templateUrl: 'module1.html'
};
});
module1.html:
<h3 class="test">Module 1</h3>
<p>It is a test !</p>
Then on your view
<module1 data="THIS COULD BE AN OBJECT" />
In regards to your css you should really be using something like LESS or SASS, creating separate files, then building one big global CSS file using some sort of task runner like Grunt, Gulp.
All your CSS pertaining to module1 can just start with module1
Example:
module1 h1{font-size:24px;}
module1 div.body{width:100px;}
Here is a link to the plunk... https://plnkr.co/edit/epD6ckxaXxbGHssGaJhu?p=preview

ui-router 0.2.10 returns Error 404 for nested views

I am kinda at an impasse right now. I did the thinkster.io tutorial about the MEAN Stack and they use angular ui-router in order to handle states and routes.
They make use of inline templates which are really handy in a small application. However I desire to use partial templates outside of the main index.ejs (I am using Express view engine with .ejs). My problem is that the $stateProvider does not seem to be able to find my home.ejs file in order to inject it in the <ui-view/> of index.ejs. I have been poking around GitHub and StackOverflow since yesterday but did not find a solution that would work for me.
Here is the organization of my files so far, most of the folders being generated thanks to the Express generator (only the relevant ones are included):
--public
----javascript
------angularApp.js (contains factories, controllers and configuration)
--routes
----index.js (uses the express router)
--views
----home.ejs
----index.ejs
----posts.ejs
--app.js (initialization file)
In app.js the view engine is defined as follow:
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
Thus the path towards the view folder should be properly defined (and with the help of some console.log() it seems it is. Here is the code part in angularApp.js:
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('home');
$stateProvider
.state('home', {
url: '/home',
// template: '<h1>This Is A State</h1>' ,
templateUrl: '/home',
controller: 'MainCtrl',
resolve: {
postPromise: ['posts', function(posts) {
return posts.getAll();
}]
}
});
}]);
Concerning the templateUrl I tried different versions depending on what I found (/home.ejs, home.ejs, /views/home.ejs, /views/home, ../../views/home.ejs, ../../views/home, etc...) but none seemed to solve my problem. I might be completely missing something obvious but I cannot point it out.
This is my index.ejsfile (minus the html and head tags as well as the script ones):
<body ng-app="appName">
<nav class="navbar navbar-default pull-right" ng-controller="NavCtrl">
<ul class="nav navbar-nav">
<!-- Navbar definition -->
</ul>
</nav>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="page-header">
<h1 class="md-display-3"> AppTitle </h1>
</div>
<ui-view>Hm. There should be something here.</ui-view>
</div>
</div>
</body>
Needless to say, the Hm. There should be something here. is properly displayed!
I read a few post about partial templates requiring some kind of index.home format and the ex-inline templates would become parent.child.html or something like that but I haven't tried it yet because I would like to not change the name of my files (although it is probably better with a bigger application) yet.
Thanks in advance, and don't hesitate to point me towards a post I might have missed.

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 -->

How structure my angularjs app

I don't know how to "include" partials on templates. For example, I've an template "index". When the user navigate to "/" I like re render some divs on "index" from partials (login box and some others text div), when de user navigate to "/newAccount" I like re render same divs on "index" but with others partials.
The question is, it's the correcly way to use of AngularJS? Similar to the includes on Facelets?
Thanks! ;)
Here a pseudo code of my idea:
Template:
<html>
<body>....{include:mainBox}....{include:foot}...</body>
</html>
Partials for /newAccount:
{define mainBox}
<div>New user</div>
<div>Username:<input/></div>
{define foot}
<div>...</div>
Update:
Some like this is wrong?
function IndexCtrl($scope) {
$scope.mainPage = 'partials/index/loginbox.html',
$scope.footPage = 'partials/index/footer.html',
}
After in the template I put:
<div ng-include="mainPage"></div>
...
<div ng-include="footPage"></div>
And the route:
when('/', {
templateUrl: 'partials/index/layout.html',
controller: IndexCtrl
})
Use ng-include for this. Maybe what you want is ng-view + $routeProvider

Categories