I have a website where users can reserve tickets for trains and buses. For each type of transport I use separate subdomain, also I use it for FAQ, Login page etc:
website.com
bus.website.com
train.website.com
login.website.com
faq.website.com
I don't want to put angularjs build to each of subfolder. Instead of this I would like to have each subdomin "virtually" and have only one main folder in /var/www directory
My website has simple structure:
<body>
<div class="header">...</div>
<div ng-view></div>
<div class="footer">...</div>
</body>
I want each subdomain has own controller and html template. I understand that it can't be achieved by $routeProvider.
So my question: can I have main controller which decides what current subdomain is through $location, and after this instantiate both specific controller (e.g. BusController) and template (e.g. BusTemplate.html) ?
Or I am sure there is better way to leverage angularjs for subdomains.
Related
I have an application that is not a single-page application and different pages are rendered after being sent to the client from an API. After I navigate to a page, say example.html, with this method, is it possible to use a <div ng-view> in example.html and route between different views within example.html with $routeprovider. Or does the Angular routing have to happen within index.html?
How would I do so? What would the directory structure need to be?
Thanks!
Im building an app with AngularJs and ui-router. It's an admin panel with this structure:
Not authenticated
Authenticated
Admin panel
Client panel
For each of the authenticated states, the app needs to load different content and give access to different information, for example:
Admin: Can see a list with all clients, products, etc...
Client: Can see only his products, tickets, etc...
When the user log in I check if he's admin or client and then, with a lazyload, I load only the modules he needs. For example, client doesn't need the module to show the list of all clients.
This is the structure I have so far:
-index.html -> view:main
--login.html
--error.html
-app.html -> view:app
--restricted.html
--notFound.html
-app_adm -> view:app-adm -> lazyload admModule.js
--home_adm.html
--listClient.html
--listProducts.html
--listFinancial.html
etc...html
-app_cli -> view:app-cli -> lazyload cliModule.js
--home_cli.html
--userData.html
--products.html
--tickets.html
etc...html
index.html
<div ui-view="main"></div>
app.html
<nav>
[..content here..]
</nav>
<div ui-view="app"></div>
<footer>
[..content here..]
</footer>
app_adm.html
<div ui-view="app-adm"></div>
app_cli.html
<div ui-view="app-cli"></div>
It feels like using those 2 extra app (adm and cli) are not quite right, but until now it's the only I found to load the files only where I need.
Is there a better way to improve this structure?
Note: I tried to set the state app-adm and app-cli to be a state without templateUrl and use the same view as the state app but it didn't worked.
I have the same application structure and what I did is just bundled absolutely all templates in a bundle with e.g. gulp. Then I dynamically check if the url accessed by user is allowed (I have a notion of applet, e.g. apllet "client", "server"). This is stored in the local storage and user can access bad url's anyway by e.g. typing them in the browser. If it's not allowed, then there is a "forbidden" page or redirect to logon depending on your needs.
Of course most important part from the security point of view is that all the corresponding API calls are protected, so you can never trust on UI for security.
If you don't want to load all templates, then you can dynamically determine the bundle that you need, e.g. "client" bundle or "admin" bundle and load it.
I'm working on some web app in AngularJS. But could i create a website first with some information about the app? And inside the same domain using a login that will send the users to the angular app?
So the app should only be loaded when the user wants to log in or register. Otherwise the static website should be visible.
Is there any documentation on this topic.?
Or do i need to create something like info.mydomain.com
Additional information
On the index page i do this like any regular Angularjs app
<body ng-app="app">
<div ui-view=""></div>
Load all scripts
Where should i load all the script files if i don't use the index as the start of my web app?
I am doing a project that uses AngularJS. I have created partial pages where each page has its own, different controller.
Site Structure
/ProjectRoot
/css
/js
angular.js
jquery.js
/partials
login.html
page1.html
index.html
index.html
<!DOCTYPE html>
<html ng-app="demoapp" >
<head>
scripts
</head>
<body ng-controller="maincontroller">
<ng-view></ng-view>
</body>
</html>
login.html
<div class="main-page" ng-controller="logincontroller">
--code---
</div>
So the full login page is rendered as:
<!DOCTYPE html>
<html ng-app="demoapp" >
<head>
scripts
</head>
<body ng-controller="maincontroller">
<div class="main-page" ng-controller="logincontroller">
--code---
</div>
</body>
</html>
I need to share data between the controllers. I tried using $scope.$parent.variablename but when I refresh page1.html it contains a blank value.
My questions are:
How do I create global variables which I can use throughout the project, that is with all partial pages and their controllers (perhaps $rootScope)?
Is the use of a cache is better option or not? (security concern)
To share state between controllers you should use an Angular service. Services are easy to define and use (see example below) and since they are singletons they are a great place to store shared state information. No need for caches or anything complex.
But then you also said:
I tried using $scope.$parent.variablename but when I refresh
page1.html it contains a blank value.
Refreshing an Angular app is always going to be a problem.
This is because your typical Angular app is a Single Page Application (SPA). Your state information persists only as long as the lifetime of the app, which for an SPA is the lifetime of the page. Thus, if you refresh the page then you restart the application and all your state information is lost.
To solve this problem you can use sessionStorage. This technology is well supported across browsers and allows you to persist your state data between page refreshes. This is especially important in Angular apps because they should always gracefully support the user refreshing the page (which includes clicking on the back and forward buttons).
You can combine all this into a simple service that persists its data into sessionStorage. This gives you state data that is shared between controllers and persisted between page refreshes.
Here is an example (in coffeescript) that stores a state datum called userToken:
Service
angular
.module 'app'
.service 'storageService', StorageService
class StorageService
setStorage:(key, value)->
json = if value is undefined then null else JSON.stringify value
sessionStorage.setItem key, json
getStorage:(key)->
JSON.parse sessionStorage.getItem key
userToken:(value=null)->
if value is null
#getStorage 'userToken'
else
#setStorage 'userToken', value
You can add as many data values to this service as you like, you can even store complex objects
Once you have defined a service you can use Angular's dependency injection to easily get hold of the service instance. Here are a couple of example controllers that show the storageService being injected and used:
Controller
angular
.module 'app'
.controller 'logincontroller', ($scope, storageService)->
$scope.setUserToken = (token)-> storageService.userToken(token)
.controller 'maincontroller', ($scope, storageService)->
$scope.userToken = storageService.userToken()
I am currently having one
<div ng-view></div>
inside my AngularJS application index.html, where I load different templates based on different routes and I was wondering if it is possible to have something like components/ mutltiple views or whatever in index.html so that I can load more than one templates in the same page. For example (Login, newsletter...etc). Thanks
I already know that you can only have one ng-view so I am looking for alternative solutions