When I am using $routeProvider with MVC.Net its not working.
I am using Write up Backend example for MVC.Net.
Following is the route I am using
config(function($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'home/listitem' }).
when('/home', { controller: ListCtrl, templateUrl: 'home/listitem' }).
when('/edit/:projectId', { controller: EditCtrl, templateUrl: '/home/detail' }).
when('/new', { controller: CreateCtrl, templateUrl: '/home/detail' }).
otherwise({redirectTo:'/'});
});
but unfortunately it is not calling listitem or details.
This works fine. Setup your RouteConfig.cs as follows:
// Will handle partial page view requests
routes.MapRoute(
name: "Partials",
url: "partials/{controller}",
defaults: new { controller="Home", action = "Index" }
);
// Will handle all other requests by sending it to the main controller
routes.MapRoute(
name: "Application",
url: "{*url}",
defaults: new { controller = "Main", action = "Index" }
);
Then your angular config for routing like this:
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/partials/home',
controller: 'HomeController'
})
.when('/home', {
templateUrl: '/partials/home',
controller: 'HomeController'
})
.when('/gallery', {
templateUrl: '/partials/gallery',
controller: 'GalleryController'
});
.when('/services', {
templateUrl: '/Services',
controller: 'ServicesController'
});
// NOTE: This part is very important
$locationProvider.html5Mode(true);
}
]);
And your MVC controllers:
public class MainController : Controller
{
public ActionResult Index()
{
return View();
}
}
public class HomeController : Controller
{
public ActionResult Index()
{
return PartialView("_Home");
}
}
public class GalleryController : Controller
{
public ActionResult Index()
{
return PartialView("_Gallery");
}
}
Put your partial views in the shared folder.
Now, behind the scenes you can do everything like you normally would with an MVC controller and view, including razor and all that.
I have also this problem before I try this solution in config file.
config file
myapp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
// Specify the three simple routes ('/', '/About', and '/Contact')
$routeProvider.when('/', {
templateUrl: '/Home/Home',
controller: 'homeCtrl',
});
$routeProvider.when('/Login', {
templateUrl: '/account/Index',
controller: 'loginCtrl',
});
$routeProvider.when('/About', {
templateUrl: '/Home/About',
controller: 'aboutCtrl',
});
$routeProvider.when('/Contact', {
templateUrl: '/Home/Contact',
controller: 'contactCtrl'
});
$routeProvider.when('/First', {
templateUrl: '/account/First',
controller: 'firstCtrl'
});
$routeProvider.when('/Fullpage', {
templateUrl: '/Home/Fullpage',
controller: 'fullpageCtrl'
});
$routeProvider.otherwise({
redirectTo: '/'
});
// Specify HTML5 mode (using the History APIs) or HashBang syntax.
//$locationProvider.html5Mode({ enabled: true, requireBase: false });
$locationProvider.html5Mode(false);}]);
index.cshtml file
<a class="brand" href="#/">Simple Routing</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
<li>first</li>
<li>fullpage</li>
</ul>
</div><!--/.nav-collapse -->
As #jpmorin suggested, unless for some reason you need to dynamically generate views in a way that AngularJS can't do, the MVC views are superfluous. You just need static files to serve, and some data-binding for them. Look at BreezeJS as a solution to that.
If this doesn't satisfy you, you would need to present your MVC code for a better answer. I personally suggest the former solution.
Related
I am setting up my angular routes in the app.js as so:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/characters', {
templateUrl: 'views/characters.html',
controller: 'AboutCtrl',
controllerAs: 'characters'
})
.when('/framedata', {
templateUrl: 'views/framedata.html',
controller: 'FrameDataCtrl',
controllerAs: 'frame'
})
.otherwise({
redirectTo: '/'
});
});
These URLs do work because when I type in localhost:9000/framedata or /characters it displays the view I expect. When I used the navigation bar that defines the links as expected there is a '#%2F' that is added like so: http://localhost:9000/#!/#%2Fcharacters
<ul class="nav navbar-nav">
<li class="active">tekkenMitzu?</li>
<li><a ng-href="#/characters">Characters</a></li>
<li><a ng-href="#/framedata">Frame Data</a></li>
</ul>
I hope this gives sufficient information, please let me know if I should give you some more information, if it is necessary I can upload this to a domain so you can see the 'live' version.
Try this below code
.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/characters', {
templateUrl: 'views/characters.html',
controller: 'AboutCtrl',
controllerAs: 'characters'
})
.when('/framedata', {
templateUrl: 'views/framedata.html',
controller: 'FrameDataCtrl',
controllerAs: 'frame'
})
.otherwise({
redirectTo: '/'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);// it will remove the #
});
And your URL having some white space if you remove the space then the %2F will clear
More details, please checkout it
AngularJS converting my ng-href url "slash" into "%2f"
Project works fine locally.
However after deploying it to an AWS Ubuntu instance, the routing does not seem to be working.
The home page of, www.lewisengelart.com/#/ loads with a bang as, www.lewisengelart.com/#!/
and if you try a link, the browser attempts to load
www.lewisengelart.com/#!/#%2Fabout rather than
www.lewisengelart.com/#/about.
Once again, this project works fine locally, I cannot figure out what is tripping it up on the ubuntu instance.
Has anyone encountered this problem before?
Here is app.js, the route config
var app = angular.module("App", ['ngRoute', 'ngAnimate']);
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
$httpProvider.interceptors.push(
function($q, $location) {
return {
'responseError':function(rejection){
if (rejection.status == 401){
$location.url('/letmein');
}
return $q.reject(rejection);
}
};
});
$routeProvider
.when('/',{
templateUrl: 'partials/dashboard.html'
})
.when('/text',{
templateUrl: 'partials/text.html',
controller: 'textCtrl'
})
.when('/magnet',{
templateUrl: 'partials/magnet.html',
// controller: 'magnetCtrl'
})
.when('/gauge',{
templateUrl: 'partials/gauge.html',
// controller: 'gaugeCtrl'
})
.when('/animation',{
templateUrl: 'partials/animation.html',
controller: 'animationCtrl as ACtrl'
})
.when('/about',{
templateUrl: 'partials/about.html',
})
.when('/contact',{
templateUrl: 'partials/Contact.html',
})
.when('/letmein',{
templateUrl: 'partials/loginReg.html',
controller: 'adminCtrl'
})
.when('/add',{
templateUrl: 'partials/add.html',
controller: 'workCtrl'
})
.otherwise({
redirectTo: '/'
});
}])
And the home page partial with links
<div class="indexHeader col-md-3">
<h1>Lewis Engel</h1>
<div class="worksBox">
<a ng-href="/#/about"><span class="colorFive">About</span></a>
<span class="colorSix">Contact</span>
<span class="colorOne">Emergent Possibilities</span>
<span class="colorTwo">Emergence over Time</span>
<span class="colorThree">Magnetic Attractions</span>
<span class="colorFour">Meaningless Measures</span>
</div>
Per angular documentation.
docs.angularjs.org/guide/migration#commit-aa077e8.
Have to add
$locationProvider
and
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
to override a new protocol in the updated version of Angular.
So I'm trying to use angular routing in my application. The problem is that the route "/" does not get initialized automatically. So I first go to "/" and the main content of the page is empty (the template is not loaded at all), I click the link to /settings and settings are loaded, then I click a link to "/" and this time the template is initialized correctly. So how do I make the thing initialized at the beginning?
Here's my routing configuration:
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/profile', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/settings', {
templateUrl: '/settings.html',
controller: 'SettingsController'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
I tried calling $location.url("/profile") from a controller and it did help, but the url has to be changed and I would rather keep the "/"
use otherwise({ redirectTo: "/" })
Update : here how it should be
$routeProvider
.when('/', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/profile', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/settings', {
templateUrl: '/settings.html',
controller: 'SettingsController'
}).otherwise({ redirectTo: '/' });
My setup
app/learning/learning.js
angular.module('meanApp')
.config(function($stateProvider) {
$stateProvider
.state('learning',{
templateUrl: 'app/learning/learning.html',
url: '/learning',
controller: 'LearnCtrl',
views: {
'list': {
templateUrl: 'app/learning/learning.list.html',
controller: function($scope){ }
},
'magic': {
templateUrl: 'app/learning/learning.magic.html',
controller: function($scope){ }
}
}
});
});
app/learning/learning.html
<h1>Learning</h1>
<div ui-view="list"></div>
<div ui-view="magic"></div>
app/learning/learning.list.html
<p>A list</p>
app/learning/learning.magic.html
<h2>Magic</h2>
when I navigate to /learning I get a blank page, I'm not sure what I'm doing wrong so any help would be greatly appreciated.
You shouldn't load the base template inside state when there are nested ui-view,
Define the base template inside views.
Route Code
angular.module('meanApp')
.config(function($stateProvider) {
$stateProvider
.state('learning',{
url: '/learning',
views: {
'': {
templateUrl: 'app/learning/learning.html',
controller: 'LearnCtrl'
},
'list#learning': { //you missed state name here
templateUrl: 'app/learning/learning.list.html',
controller: function($scope){ }
},
'magic#learning': { //you missed state name here
templateUrl: 'app/learning/learning.magic.html',
controller: function($scope){ }
}
}
});
});
This could Help you, Thanks.
The problem was that I was trying to load the base template inside state and I missed out the state name as Pankaj said, so the solution is...
angular.module('meanApp')
.config(function($stateProvider) {
$stateProvider
.state('learning',{
url: '/learning',
views: {
'': {
templateUrl: 'app/learning/learning.html',
controller: 'LearnCtrl'
},
'list#learning': { //you missed state name here
templateUrl: 'app/learning/learning.list.html',
controller: function($scope){ }
},
'magic#learning': { //you missed state name here
templateUrl: 'app/learning/learning.magic.html',
controller: function($scope){ }
}
}
});
});
This is my app.js code (main js)
var currentUserId;
window.myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile',
'myApp.Registermdl',
'ngProgress', 'myApp.login', 'ngCookies', 'myApp.CreateUsermdl', 'myApp.viewMap', 'myApp.createMap', 'ui.bootstrap',
'myApp.logout', 'myApp.viewCollege']);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/login', { templateUrl: 'app/Login/login.html', controller: 'LoginCtrl' });
$routeProvider.when('/home', { templateUrl: 'app/Home/home.htm', controller: 'HomeCtrl' });
$routeProvider.when('/createuser', { templateUrl: 'app/CreateUser/createUser.html', controller: 'CreateUserCtrl' });
$routeProvider.when('/signup', { templateUrl: 'app/Register/register.html', controller: 'RegisterCtrl' });
$routeProvider.when('/logout', { templateUrl: 'app/Login/login.html', controller: 'LogoutCtrl' });
$routeProvider.when('/view-map', { templateUrl: 'app/ViewMap/viewmap.html', controller: 'ViewMapCtrl' });
$routeProvider.when('/create-map', { templateUrl: 'app/CreateMapAddress/create-mapaddress.html', controller: 'CreateMapAddressCtrl' });
$routeProvider.when('/view-college', { templateUrl: 'app/ViewColleges/viewcolleges.html', controller: 'ViewCollegeCtrl' });
$routeProvider.otherwise({ redirectTo: '/login' });
}]).directive("collegeAppMain", function ($location) {
return {
restrict: "A",
link: function (scope) {
scope.getClass = function (path) {
if ($location.path() == path) {
return "active"
} else {
return ""
}
}
}
};
});
This is my directive code
directive("collegeAppMain", function ($location) {
return {
restrict: "A",
link: function (scope) {
scope.getClass = function (path) {
if ($location.path() == path) {
return "active"
} else {
return ""
}
}
}
};
});
I have called this collegeAppMain directive in my index page
<body>
<nav class="navbar navbar-default nav-custom" **collegeAppMain** role="navigation"></nav>
.
.
.
.
.</body>
It is not working. But if i change the directive name collegeAppMain to "dfhsfksksdf"
then it's working. I want to work with this collegeAppMain name
I am confused with this. Please tell me it why? How can i solve this problem?
Why its working if i gave the directive name is 'dfhsfksksdf' and why it's not working if i gave the directive name is 'collegeAppMain '?
when naming a directive using camelCase, the directive should be called from HTML like this: camel-case.
in your case, html should look like this:
<nav college-app-main class="navbar navbar-default nav-custom" role="navigation"></nav>
take a look at this answer.
for farther information about directives you can look at this tutorial.
another thing to consider is re-formatiing the code.
$routeprovider uses 'method chaining', so you can write your code like this:
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'app/Login/login.html',
controller: 'LoginCtrl' })
.when('/home', {
templateUrl: 'app/Home/home.htm',
controller: 'HomeCtrl' })
.otherwise({
templateUrl: 'some.html',
controller: 'Home2Ctrl'
})
});
it's alot easier on the eyes.
take a look at this short video tutorial by EggHead