router working within my Angular JS app. My code is:
Script:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
HTML:
<div ui-view></div>
app.js:
var myApp = angular.module('myApp', ['ui-router','mainControl','ui.bootstrap', 'ngSanitize']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/splash');
//
// Now set up the states
$stateProvider
.state('splash', {
url: '/splash',
templateUrl: 'partials/splash2.html',
controller: 'MainControl'
})
.state('advice', {
url: '/advice',
templateUrl: 'partials/advice.html',
controller: 'MainControl'
})
.state('main', {
url: '/main',
templateUrl: 'partials/main.html',
controller: 'MainControl'
})
});
I was has successfully integrated ngRoute into my project, but for some reason the routing was not working in Safari and IE, So this is why I am now trying to integrate the UI-router into my project so that I can successfully get the routing working within my Application.
Any help would be appreciated.
You are having typo, module name should be ui.router instead of ui-router while creating myApp module for your app.
Besides ui.router, you should add the js file for ngSanitize (<script src="angular-sanitize.js">)
Related
I have a simple AngularJS application with no code related to nodeJS in it. I'm facing problem in removing # from url. I've used ui-routes for routing.
'use strict';
var app = angular.module('myapp', ['ui-router']).
config(['$stateProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider.
state('home', {
url: '/',
templateUrl: 'views/index.html'
})
.state('where-am-i', {
url: '/where-am-i',
templateUrl: 'views/where_am_i.html',
controller: 'mainCtrl'
})
.state('audience', {
url: '/audience',
templateUrl: 'views/audience.html',
controller: 'mainCtrl'
});
}]);
Also added base tag to the head section of my index.html.
<base href='/' />
Also tried require no base but still not able to get it working.
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Adding base tag shows 404 for all the assets I've included in index.html file.
Need a quick and simple solution for this.
Thank you in advance!
add a line after $locationProvider.html5Mode(true); as below:
$locationProvider.hashPrefix('');
hope it works.
I tried to migrate my Angular app from using ngRoute to uiRoute. Everything works fine except the controllers. They simple don't load like they did with ngRoute and I don't get why. As I see it from uiRoute it should work like with ngRoute but it doesn't. There is no exception thrown. I also don't find any example for a similar configuration like mine although it's very simple. I home somebody can tell me where my controller is hiding.
http://plnkr.co/edit/VGyi3AxgslgpvwBCTkXI?p=preview
So as for ngRoute the controller should be accessible through 'homepage' but it looks like it's just empty :(
;(function(angular) {
'use strict';
angular
.module('MainRouter', ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('home', {
url: '',
views: {
"mainView": {
templateUrl: 'home.html'
}
},
controller: 'HomepageCtrl',
controllerAs: 'homepage'
});
}]);
})(angular);
When you use views option inside the state definition, then ui-router engine doesn't look for templateUrl & controller defined in state level, basically you need to provide controller & templateUrl value from the namedView definition only. In your case you should add controller in mainView definition object.
Code
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('home', {
url: '',
views: {
"mainView": {
templateUrl: 'home.html',
controller: 'HomepageCtrl',
controllerAs: 'homepage'
}
},
});
}]);
Demo Plunkr
I'm working on an plugin-based MVC application and I want to use angularjs as route provider. (I'm newbie in angular.) I have specified the necessary information in my app.js and it's working properly for those views, which are in the same project (i.e. /home):
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'Home/Index',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'Plugin.App/Home/About',
controller: 'aboutController'
})
.otherwise({
redirectTo: 'Home/SomeLocation'
});
});
app.controller('mainController', mainController);
app.controller('aboutController', aboutController);
But, when I tried to locate any partial view from my plugin, I got 404. Do you have any suggestion to solve this situation?
Thanks for any help in advance!
Craig85
I am trying to start a project with express and angularjs. I was following this guide.
On first go i.e running localhost:3000, I am loading my index.jade file inside views directory successfully.
index.jade
extends layout
block content
div
ng-view
include footerjs
footerjs.jade
script(src="/javascripts/angular.min.js")
script(src="/javascripts/angular-route.js")
script(src="/javascripts/angular-resource.js")
script(src="/javascripts/app.js")
script(src="/javascripts/task.js")
views directory has a folder called partials. inside this folder I have added two templates. "task.jade" and "landing.jade".
my app.js
var mainApp = angular.module('mainApp', ['ngRoute', 'taskApp', "ngResource", 'ui.router' ]);
mainApp.config(['$routeProvider', '$locationProvider',function(routeProvider, locationProvider) {
locationProvider.html5Mode(true);
routeProvider
.when('/', {
templateUrl: 'partials/landing',
controller: 'taskController'
}).
when('/task', {
templateUrl: 'partials/task',
controller: 'taskController'
}).
otherwise({redirectTo: '/'});
}]);
and I have made an express route as:
router.get('/partials/:urlName', function(req, res) {
res.render('partials/'+req.params.urlName);
});
I am not able to route any partials. I am stuck at my layout at initial and an error 404 on trying to route /task. any help would be greatly appreciated.
You should include the file extension in templateUrl:
routeProvider
.when('/', {
templateUrl: 'partials/landing.jade',
controller: 'taskController'
}).
when('/task', {
templateUrl: 'partials/task.jade',
controller: 'taskController'
}).
otherwise({redirectTo: '/'});
I'm struggling a bit with having submodules in an Angular 1.3.9 app. I've got a (non-working, sorry) preview at http://plnkr.co/edit/XBfTPAGRRe0CWJgjGJzc?p=preview and I think it's freaking out, in part, because I'm using Restangular.
I have the following:
angular
.module('estimate', ['ui.router', 'restangular', 'estimate.project'])
;
angular
.module('estimate.project', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider'
, function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('project', {
url: "/project/{id:int}",
abstract: true,
templateUrl: '/app/templates/project.html',
controller: "ProjectController as project",
resolve: { // stuff }
})
.state('project.overview', {
url: "",
templateUrl: "/app/templates/overview.html"
})
// ...
;
}])
.controller('ProjectController', ['$scope', 'ProjectService', 'myProject'
, function($scope, ProjectService, myProject) {
console.log('i made it!');
}]);
And in my template, which is served from the estimate module, I have:
<li><a ui-sref="project.overview({ id: 1 })">One</a></li>
The URL resolves correctly on the page, but clicking on it does nothing. It doesn't even throw any console errors - it just sits there. My gut tells me it has to do with how I'm referring to the controllers and/or the routes, and if they need to be prefixed or modified to work with a submodule. Any ideas on how to get it to load properly?
If this post is too scatterbrained, let me know and I'll try to clean it up.
I updated your plunker here and would say, that the most important change is - referencing sub-module in the main module:
Instead of this:
angular
.module('estimate', ['ui.router', 'restangular'])
...
angular
.module('estimate.project', ['ui.router'])
...
We have to use this, i.e. reference sub module in a parent module
angular
.module('estimate', ['ui.router', 'restangular', 'estimate.project'])
...
angular
.module('estimate.project', ['ui.router'])
...
With some few other small adjustments, that should be the way. Check it working here