I've got a very simple web application using Meteor and Angular. I'm trying to use iron router for server api routes and angular ui router for client side. I've set up my code to allow iron-router to place the ui-view into all routes and then have angular ui-router take over from there.
The problem is a race condition. No matter what I do, where I place my source files, iron-router will ALWAYS execute it's block after ui-router. I've followed many answers from SO about this but for some reason my implementation isn't working. Below is the code for my app.
Routes file:
Router.route('/(.*)', function(){
console.log('iron router');
this.render('app');
});
angular.module('my_app').config(
function($urlRouterProvider, $stateProvider, $locationProvider){
console.log('ui router');
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: '/',
templateUrl: 'client/views/home.ng.html',
controller: 'HomeCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'client/views/test.ng.html',
controller: 'TestCtrl'
})
;
$urlRouterProvider.otherwise('/');
});
The meteor template:
<template name="app">
<div ui-view></div>
</template>
The console.log output is always:
ui router
iron router
What am I missing?!?!?!????
Related
I am using AngularJS ui-Router and node js.Response is coming as JSON. Normally, the page was rendered properly. If I refresh the same page manually, it displays JSON Data instead of HTML.
Kindly, help me to fix this issue.
angular.module('app.routes',[])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider){
$locationProvider
.html5Mode({
enabled:true,
requireBase:false
})
.hashPrefix('');
}])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider.state('/', {
templateUrl: '/views/login.html'
})
.state('admin', {
url: '/admin',
templateUrl: 'views/index.html',
controller: 'AdmCtrl',
})
.state('admin1', {
templateUrl: 'views/index1.html',
controller: 'AdmCtrl1',
})
You have turned on html5Mode routing.
This is a declaration that your internal angular route URLs are the same as your server's URLs.
In practise, it looks like you have actually configured the server to send the data as JSON instead.
You need to change your server side code to serve up HTML documents for those URLs instead of JSON.
Alternatively, turn off html5Mode and go back to hashbangs.
Here's the scenario:
I have a main AngularJS app that uses ui-router for routing, like any other app. I also have a smaller AngularJS module that functions as its own app, not requiring that it be a submodule of my larger app.
I would like for the smaller app to handle its own routing and templating, too. Goal here being, the mini app can be loaded by another AngularJS app, or loaded on its own, and have all its routing and templates set up already.
Main App:
angular
.module('mainApp')
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('mainAppParent', {
url: '/',
templateUrl: 'main.html',
controller: 'mainCtrl',
controllerAs: 'vm'
})
.state('mainAppParent.miniJournalApp', {
url: '/journal'
});
}]);
Mini App:
angular
.module('miniJournalApp')
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('mainJournalState', {
url: '/',
templateUrl: 'mainJournalView.html',
controller: 'JournalCtrl',
controllerAs: 'vm'
})
.state('newEntry', {
url: '/new'
});
}]);
I'm planning on having all the components of the mini app being an AngularJS .component(), so I'm wondering if the correct way to do this is to just let the parent app handle routing, and let the mini app handle the templates when I define each component/directive. Then, when I want to load the mini app on its own, I would just write a wrapper AngularJS module with new routing.
As we can see that in angular ui router we are using $stateProvider so basically we are using a provider.
In an angular app the provider is loaded once and then angular puts the instance in cache so next time when the provider is injected somewhere then same instance is used.
As same instance of $stateProvider is used across angular app so it is perfectly fine to define separate states for submodules.
And this is a good practice for code maintenance.
I have used it in many projects
I'm using the following state configuration:
app.config(["$stateProvider", "$urlRouterProvider", "$locationProvider",
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", {
url: "/home",
views: {
'': {
templateUrl: "Scripts/app/common/views/home.html",
controller: 'homeController'
}
},
data: {}
})
...
$locationProvider.html5Mode(true);
}
]);
And some server WebAPI help pages are not working because the following PATHs are used:
/Help/Api
/Help/Api/POST-api-Get-Users
/Help/ResourceModel?modelName=User
etc.
Currently help pages are not working, and I don't want to add to angular the following states:
- url: "/Help"
- url: "/Help/Api"
etc.
Is there a way to simple ignore all angular states started with "/Help*"? I want to have client angular pages and the same time server pages too. And I don't want to have two different master pages (one with angular, and another without).
We have an AngularJS SPA, and we have been using Adal.js for authentication. Till now we were handling the routes using $routeProvider (ngRoute module), but due to some recent requirement, we need to move away from the route provider method and adopt $stateProvider (in ui-router). However out authentication mechanism needs to remain similar. Can adal.js work with $stateProvider in the similar fashion as it works with $routeProvider?
We are using requiredADLogin paramter in the routes to specify which routes need Azure AD Authentication. The code looks like below:
app.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalProvider) {
$routeProvider
.when('/', {
controller: 'homeCtrl',
templateUrl: '/Templates/home.html',
requireADLogin: true
})
.otherwise({
//template: "Invalid"
redirectTo: '/'
});
On changing to $stateProvider will a code like below be valid:
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("dashboard", { url: "/dashboard", templateUrl: "Templates/dashboard.html" })
.state("health", {
parent: "dashboard",
url: "/agent_tier1",
templateUrl: "Templates/health.html",
requireADLogin: true
})
});
Or if we can put the requireADLogin property in the parent state.
adal.js will work with ui-router, requireADLogin should be at every state you want to protect not just in the parent state.
If you are using the component router, ADAL will not work:
https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/283
Warning to anyone who is trying to upgrade a low level pre angular 2.0 app to typescript, ADAL will be a challenge.
Im trying to make an app to learn to work with AngularJS and rails. Only when I try to rout with angular I get this printed in te console "WARNING: Tried to load angular more than once" in an infinite loop.
If followed this tutorial until the problem occurred from there I've searched a lot here on Stackoverflow, but could not find a solution to my problem.
app.js
var app = angular.module('Deadlines', ['ngRoute', 'templates'], function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
}).otherwise( { redirectTo: '/'} );
$locationProvider.html5Mode(true);
});
Warning shows that you have added more than one angular js library. Better to remove any one angular library.
I have solved my issue through using AngularUI Router for angular. I found out that this problem was not occurring when I was trying to recreate the issue with just HTML and Angular. So it has something to do with the combination of rails and Angular. I can't explain why AngularUI Router is the solution for my problem cause I'm still a noob, but it works and I can continue learning to build apps.
app.js
angular.module('Deadlines', ['ui.router', 'templates'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'HomeCtrl',
})
$urlRouterProvider.otherwise('/');
}])
.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Here is my current app.js for people facing the same problems