It does not work with the specified templateUrl: test.html but works if you specify the template: 'Hello '
WORK
app.config(function($routeProvider){
$routeProvider
.when('/test', {
template: '<h1>home</h1>',
controller: 'ctrl'
})
// .otherwise({
// redirectTo: '/home',
// controller: 'ProductCtrl'
// });
});
DO NOT WORK
app.config(function($routeProvider){
$routeProvider
.when('/test', {
templateUrl: 'test.html',
controller: 'ctrl'
})
// .otherwise({
// redirectTo: '/home',
// controller: 'ProductCtrl'
// });
});
and I have a sign ! in the path to the file that is #!/test
LINK
<a style="color:white;" href="#!/test">Go</a>
I'm using nw.js
You could try to put a path to your template url
.when('/test', {
templateUrl: './test.html',
controller: 'ctrl'
})
Related
I have web application where I need to load a template with different parameters like.
.when('/form/:ProjectID/:FormID', {
templateUrl: 'partials/Form.ashx?fid=' + FormID,
controller: 'FormController'
})
I am not able to get the above code working. Can someone tell me how I can fix this issue? I am new to AngularJS and not an expert.
This is the full code.
var app = angular.module('MyApp', ['ui.grid', 'ngSanitize', 'angularTrix', 'ui.codemirror', 'ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'partials/Home.ashx',
controller: 'HomeController'
})
.when('/project/:ProjectID', {
templateUrl: 'partials/Projects.ashx',
controller: 'ProjectController'
})
.when('/form/:ProjectID/:FormID', {
templateUrl: 'partials/Form.ashx?fid=1',
controller: 'FormController'
})
.otherwise({ redirectTo: '/home' });
});
We can use $stateParams and templateProvider to load dynamic templateurl
.state('general', {
url: '/{type}',
//templateUrl: 'pages/home.html',
templateProvider: ['$stateParams', '$templateRequest',
function($stateParams, $templateRequest)
{
var tplName = "pages/" + $stateParams.type + ".html";
return $templateRequest(tplName);
}
],
// general controller instead of home
//controller: 'homeController',
controller: 'generalController',
controllerAs: 'ctrl'
I'm trying to use clean url routing for my web app but everything I try doesnt work. Here is my app.js. Im not to sure how the location provider should be added in to the app.js but everything I try produces a 404. Please could someone point me in the right direction?
.config(function($stateProvider, $urlRouterProvider) {
//Enable cross domain calls
$stateProvider
.state('main', {
url: '/',
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'vm'
})
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'vm'
})
.state('blog', {
url: '/blog',
templateUrl: 'views/blog.html',
controller: 'BlogCtrl',
controllerAs: 'vm'
})
.state('corparate', {
url: '/corparate',
templateUrl: 'views/corparate.html',
controller: 'CorparateCtrl',
controllerAs: 'vm'
})
.state('contact', {
url: '/contact',
templateUrl: 'views/contact.html',
controller: 'ContactCtrl',
controllerAs: 'vm'
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'RegisterationCtrl',
controllerAs: 'vm'
})
.state('register', {
url: '/register',
templateUrl: 'views/register.html',
controller: 'RegisterationCtrl',
controllerAs: 'vm'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'views/dashboard.html',
controller: 'DashboardCtrl',
controllerAs: 'vm'
})
.state('useredit', {
url: '/settings',
templateUrl: 'views/useredit.html',
controller: 'UserEditCtrl',
controllerAs: 'vm'
})
.state('friendlist', {
url: '/search',
templateUrl: 'views/friendlist.html',
controller: 'FriendListCtrl',
controllerAs: 'vm'
})
.state('friendprofile', {
url: '/profile/:userName',
templateUrl: 'views/friendprofile.html',
controller: 'FriendProfileCtrl',
controllerAs: 'vm'
})
.state('resetPassword', {
url: '/resetPassword',
templateUrl: 'views/resetPassword.html',
controller: 'ResetPasswordCtrl',
controllerAs: 'vm'
});
$urlRouterProvider.otherwise(function ($injector, $location) {
var $state = $injector.get("$state");
$state.go("main");
});
})
.run(function ($rootScope, $state, ParseApi) {
$rootScope.$on('$stateChangeStart', function (event, next) {
if (!ParseApi.isAuthenticated()) {
if (next.name !== 'register' && next.name !== 'login' && next.name !== 'resetPassword' && next.name !== 'friendlist' && next.name !== 'friendprofile') {
event.preventDefault();
$state.go('login');
}
}
});
})
})();
I have create a new project, but got a problem which I am not able to fix.
Here's my example:
angular.module('MosysTimes', ['ngRoute']).config($routeProvider, RouteConfiguration);
function RouteConfiguration ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'start.html',
controller: 'WelcomeController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/'
});
}
It always says:
$routeProvider is undefined....
Any help will be appreciated ?
You should change your code to this.
angular.module('MosysTimes', ['ngRoute']).config(['$routeProvider',function($routeProvider)
{
$routeProvider
.when('/', {
templateUrl: 'start.html',
controller: 'WelcomeController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/'
});
}]);
Did you add ngroute script to you index html?
for example:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
and try to use following syntax
angular.module("MosysTimes",['ngRoute']).config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'start.html',
controller: 'WelcomeController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/'
});
});
angular.module('yourModule').config(['$routeProvider', function($routeProvider){
$routeProvider
.when() .....
}]);
You should declare $routeProvider into function. After that you can use this $routeProvider to access the loading template on your main page.
thanx to you all, after trying your hints I got it working and a bit of more understanding angular.. thx...
Is it possible to have a route param in the base url with ngRoute?
<base href="/some/resource/path/:myParameter/" />
together with:
angular.module('myApp', ['ngRoute'])
.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider
.when('/first', {
templateUrl: 'template.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'template.html',
controller: 'mainController'
})
.when('/third', {
templateUrl: 'template.html',
controller: 'someController'
})
.when('/forth', {
templateUrl: 'template.html',
controller: 'someController'
})
.otherwise({
redirectTo: '/first'
});
$locationProvider.html5Mode(true);
}]);
to get routes of:
/some/resource/path/:myParameter/first
/some/resource/path/:myParameter/second
/some/resource/path/:myParameter/third
/some/resource/path/:myParameter/forth
I'm trying to replace AngularJS Route with UI Router since that seems to be what everyone uses. I'm just getting started and am wondering how to replace the following code with $stateProvider:
$routeProvider
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
controller: 'DashboardCtrl'
})
.otherwise({
redirectTo: '/login'
});
Replace when with state:
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
More details here: https://github.com/angular-ui/ui-router