I am trying to create a simple App using ui-router. When I load a page the first time or reload the current page, everything is fine. However when I click on a different page, the entire app reloads in my ui-view and I get a warning in the log: "WARNING: Tried to load angular more than once.". I am using Express, Jade and Angular.
I have the following structure:
public
app
frontPage
frontPage.jade
institution
institution.jade
app.js
index.jade
server
server.js
server.js:
app.use(express.static(path.join(__dirname, '/public')));
app.get('/*', function (req, res) {
res.sendfile('./public/app/index.html');
});
app.js:
$locationProvider.html5Mode(true);
$stateProvider
.state('frontPage', {
url: '/app/frontPage/',
templateUrl: 'frontPage.html'})
.state('institution', {
url: '/app/institution/',
templateUrl: 'institution.html',
controller: 'institutionCtrl'
});
});
index.jade
#page-wrapper
.row
.col-lg-12
<ui-view></ui-view>
frontPage.jade
block content
h1 Page
p Welcome
The above structure worked with ng-route, so I am quite lost why it keeps reloading the entire page when I switched to ui-router.
I had created a loop with the templates. When I changed them to this, it worked:
$locationProvider.html5Mode(true);
$stateProvider.state('frontPage', {
url: '/',
templateUrl: 'app/frontPage/frontPage.html'
})
.state('institution', {
url: '/institution',
templateUrl: 'app/institution/institution.html',
controller: 'institutionCtrl'
});
I had this problem for about an hour. For me, the issue was that I had set the html5mode requireBase option to false.
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
To fix this, I changed html5mode to this:
$locationProvider.html5Mode(true);
Then set a base in my HTML, like this:
<base href="/"></base>
Related
I have
<base href="/!#/">
at the top of my index.html file. When I go to URL http://localhost:5000/ everything works fine, it instantly add #!/ so the URL is http://localhost:5000/#!/ and page display as expected.
At the server side I have following code which should allow me to use my files
app.use(express.static(path.join(__dirname, 'public')));
Structure of my files is something like:
bookApp(folder)
server.js
public(folder)
index.html
app.js(ngRoute)
views(folder)
css(folder)
controllers(folder)
and my AngularJS routing is:
(function () {
'use strict';
angular
.module('app', [
'ngRoute'
])
.config(config);
function config ($routeProvider) {
$routeProvider
.when('/', {
controller: 'PostsCtrl',
templateUrl: 'views/posts.html'
})
.when('/register', {
controller: 'registerCtrl',
templateUrl: 'views/register.html'
})
.when('/login', {
controller: 'loginCtrl',
templateUrl: 'views/login.html'
})
.otherwise('/');
}
})();
The very first page (views/posts.html) load as expected but when I click
<li>Sign in</li>
the URL is http://localhost:5000/login not as like I thought http://localhost:5000/!#/login.
and it display:
Cannot GET /login
when I manually change URL to http://localhost:5000/#!/login it works fine.
How to fix this behavior?
The only solution I see is to get rid of <base> tag and in every link manually in href directive add !# before slash.
It looks like you are forgetting the ng-view directive: <div ng-view></div> which is the container for the content that is provided by your routing. Place this above your script if you have everything contained in one file.
You can also try:
<ng-view></ng-view>
<div class="ng-view"></div>
Is there any particular reason you are still using Angular 1? I know this isn't technically answering your question, but I would highly recommend that you start using the latest Angular. You can still keep legacy code but it will make a lot of what you are doing a lot cleaner and clear.
I try to create an app with Laravel 5.3 and AngularJS. I want to use the routes and templates from Angular instead of Laravel.
Here is the web.php file from Laravel:
Route::get('/', function () {
return view('index');
});
And here is a part of the ui-router in AngularJS:
routeConfig.$inject = ['$stateProvider'];
function routeConfig ($stateProvider) {
// Routes
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/views/home.html'
})
.state('register', {
url: '/register?oauth_token&oauth_verifier',
templateUrl: 'app/views/register.html',
controller: 'RegisterController',
controllerAs: 'registerCtrl'
})
};
I have also enabled the html5mode and the base url on head. The problem now:
When I am at home and click the link to go on register page, it works. But If I try to load directly the register page, it loads it through laravel routes and since I haven't mentioned anything about it there, I have a NotFoundHttpException.
That's because when you refresh all routes are handled by laravel first.
I had the same problem and there are 2 approaches:
either put the angular app on a different domain ... but you will run
into CORS issues
or tell laravel to route any route to angular app, and that's easier
Route::any('{path?}', function()
{
return view("index");
})->where("path", ".+");
I trying to make an application that contains multiple views as template. The templates are under the js/app/pages/ folder. And I have 2 templates to show and route. My routing section is:
var app = angular.module("myApp", ['ngRoute', 'ngMaterial']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/Page', {
templateUrl: 'js/app/pages/Page.html',
controller: 'pageController',
reloadOnSearch: false
})
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false
})
.when('/Admin', {
templateUrl: 'js/app/pages/Admin.html',
controller: 'adminController',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/Page'
});
$locationProvider.html5Mode(true);
});
And my html file contains
<div id="menu"></div>
<div ng-view></div>
Menu div contains menu elements that route me between the pages. For example, when I run this site on browser, URL will be localhost/Page, and when I click the settings button URL change with localhost/Settings. But when I press the F5 button in my keyboard. Page gives me error The resource cannot be found..
I search on the internet "how to refresh routing page in angularjs" and find some solutions but I couldn't make them work for me. I tried $route.reload() and $routeUpdate() method but that does not work for me. Maybe I'm wrong in something.
If you are using Apache server this should work run this in terminal
sudo a2enmod rewrite && sudo service apache2 restart
works for me
Solved! I couldn't manage refresh with ngRoute. Then i convert it into ui-router. I declare the states by urls. And the refresh is working. Thanks for comments and answers. Maybe this will help someone.
Actually when you are pressing F5 from keyboard, it is hitting to your server for that page, not angular because you don't have any # sign between your URL. For angular, URL should be like as - localhost/#/Page
Use html5mode
A great article about it here
to init its very simple
.config(function($routeProvider, $locationProvider) {
// other routes here
$locationProvider.html5Mode(true);
});
When you "reload a page", you whole app will reinit again. That means if you are not on the main page, and the sub route you are at missing some data, you will likely get an error.
You should look into resolve attribute for routes, so for example,
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false,
resolve: {
resourceone: function(){return whatsneeedtoberesolvehere;}
}
})
that way no matter where your app is reloaded, it will have the necessary data to boot the page
Just keep the # in URL, you don't have to put extra effort to manage reloads etc. you can think a "#" in URL represent a specific state in single page application.
Otherwise it can be managed by module rewriting, that map the url with hashed version URL internally for AngularJs app.
I am getting two flow in my two diff codes.
I am developing an ionicframework based app using its default (angular based ui-router) routing.
Now when i coded for the ionic this way.
*.config(["$stateProvider","$urlRouterProvider",function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider
.otherwise('oops');
$stateProvider
.state('dashboard',{
url:"/dashboard",
abstract: true,
templateUrl:'templates/dashboard.html',
controller:"myCtrl"
})
.state('courses',{
url:'/courses',
templateUrl:'templates/courses.html',
controller:'myCtrl'
})
.state('transactions',{
url:'/transactions',
templateUrl:'templates/transactions.html'
})
.state('oops',{
url:'/oops',
templateUrl:'templates/oops.html',
controller:'myCtrl'
})
}])*
view :
<ion-nav-view></ion-nav-view>
i found all my templates are getting loaded at once (on browser console testing) when i call my base route (also for any route,whichever i called for the first load of app).
where as when i use the ui-router for the nonionic app like :
myApp.config(function($stateProvider,$urlRouterProvider){
/*throw the rest url to home page*/
$urlRouterProvider.otherwise("/single");
$stateProvider
.state("single",{
url:"/single",
templateUrl:"templates/single.html"
})
.state("portfolio",{
url:'/portfolio',
templateUrl:'templates/portfolio.html',
controller:"myCtrl"
})
.state("nested",{
url:"/nested",
templateUrl:"templates/nested.html"
}
)
.state("nested.viwe1",{
url:"/view1",
templateUrl:"templates/nested.view1.html"
})
.state("nested.viwe2",{
url:"/view2",
templateUrl:"templates/nested.view2.html"
})
});
view:
<div ui-view class="my-element"></div>
only the demanded templates (configured with the route),is getting loaded.
So is the Ionic loads all template initially or else i am flowing wrong with the code.
Return the templateUrl by a function. Like this,
templateUrl: function() {return 'templates/courses.html';}
https://github.com/driftyco/ionic/issues/3819
http://ionicframework.com/docs/platform-customization/dynamic-templates.html
I've some problem with my angular app, running on virtual host.
I'm use wamp with vhost settings: DocumentRoot "c:/sites/test.dev/www".
Have problem with ROUTES. I want, that my app page open like this:
http://test.dev/1 , where 1 = user_id.
This is my app.js:
$routeProvider
.when('/:id', {
templateUrl: 'views/user.html',
controller: 'UserController',
});
$locationProvider.html5Mode(true);
When i disable $locationProvider, all works fine, but hashtag "#" always appended to url, like http://test.dev/#/1 . Can anyone have some idea?
App folder /www/ with structure:
/controller/
/services/
/directives/
/views/
---/js/
---/css/
---user.html
app.js
index.html
Please try to use the following code:
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
It will work for you.