I am having issues with angularJs ui-routing in Mvc app. I have seen several questions regarding this issue. This question in particular seems to be addressing my issue. However I am unable to navigate to different routes.
In my Views/Home/Index.cshtml:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<base href="/">
<h1> Index Page</h1>
<a ui-sref="login">login</a>
<ui-view></ui-view>
In my Angular/app.js:
var myApp = angular.module("myApp", ['ui.router']);
myApp.controller("LoginController", LoginController);
myApp.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('login', {
url: '/Login',
templateUrl: '/home/Login',
controller: LoginController,
controllerAs: 'controller'
})
.state('Index', {
url: '/',
templateUrl: '/home/index'
})
// Handle request for non-existent route
//$urlRouterProvider.otherwise('/home');
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
In Login.cshtml:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<p> Login Page</p>
<a ui-sref="Index">Index</a>
Route.config
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}
In my views/shared/_layout.cshtml:
<body ng-app="myApp">
Possibly related question:
how does $locationProvider.html5Mode(true) and $locationProvider.hashPrefix('!').html5Mode(true) fit in the picture ?
You are using href to navigate yourself to the login state, which is wrong. You should use the ui-sref directive instead
<a ui-sref="login">login</a>
You should also use the ui-view directive to show the state your are targeting to.
The official docs contains short, simple tutorials that will help you getting started.
Related
I have problem with state (I don't understand how it works).
Ok my app.js code view this:
....
app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
// $ionicConfigProvider.views.transition('none');
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'tpl/home.html',
controller: 'AppController',
abstract: true
})
.state('app.aquarium', {
url: '/aquarium/index',
views: {
'menuContent': {
templateUrl: 'tpl/aquarium/index.html',
controller: 'AquariumIndexCtrl',
}
}
})
....
$urlRouterProvider.otherwise('/app/aquarium/index');
....
app.controller('AppController', function($scope) {
console.log("App");
});
app.controller('AquariumIndexCtrl', function($scope) {
console.log("Akwaria");
});
....
and in index.html I have href to this states:
<a class="item item-icon-left" href="#/app/aquarium/index">
<i class="icon"><img src="img/aquarium.png" /></i>
Aq
</a>
But All the time I see the file from state "app" (tpl/home.html).
Why my link dont works and Why still load file tpl/home.html when on start app I use "redirect" to
$urlRouterProvider.otherwise('/app/aquarium/index');
? Thanks :)
First of all I suggest you to pass the dependencies as an array of strings when you inyect them. If not, by the time you uglify to production you will have problems with them.
app.config([
$stateProvider,
$urlRouterProvider,
$ionicConfigProvider,
function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
}])
Around the state problem:
The state depends directly to the ui-views you have stablished before, in this case i think you want to set them in your index.
Think about the ui-views as boxes you will fill with html calling them from the states or url depending you structure your app by states or urls.
Using states:
Assuming your index.html, you need to create the ui-views to fill with the html from the states.
<div ui-view="menuContent">
</div>
I don't know if you are declaring the ui-view, i suppose yes.
In the abstract state you should call as well to the ui-view using views and filling it with content that won't needed to be called again later, if not at least declare it empty.
app.config([
$stateProvider,
$urlRouterProvider,
$ionicConfigProvider,
function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
// $ionicConfigProvider.views.transition('none');
$stateProvider
.state('app', {
url: '/app',
views: {
'menuContent': {}
},
abstract: true
})
.state('app.aquarium', {
url: '/aquarium/index',
views: {
'menuContent': {
templateUrl: 'tpl/aquarium/index.html',
controller: 'AquariumIndexCtrl',
}
}
})
....
$urlRouterProvider.otherwise('/app/aquarium/index');
}])
Think about ui-view menuContent as a box that will be filled dinamically depending of the state you call, you can have as many ui-views as you want and load them one by one only if you set them in the views: {} state.
finally you should be using ui-sref instead of href to call the diferent states:
<a class="item item-icon-left" ui-sref="app.aquarium">
<i class="icon"><img src="img/aquarium.png" /></i>
</a>
I have an app.config with UI-Router. It has a login page with it's controller, recoverLogin and I want to put a template with footer, header and more stuff with new states that could be loaded into the template (in an especificplace).
My module is:
var app = angular.module("app", [
"ui.router",
"pascalprecht.translate"
]);
My routes are;
app.config(function($stateProvider, $urlRouterProvider)
{
$stateProvider
.state("login", {
url: "/login",
templateUrl: "views/accessControl/login.html",
controller: "loginCtrl"
});
$stateProvider
.state("recoverLogin", {
url: "/recoverLogin",
templateUrl: "views/accessControl/recoverLogin.html",
controller: "recoverLoginCtrl"
});
$stateProvider
.state("template", {
url: "/template",
templateUrl: "views/templates/template.html",
controller: "templateCtrl"
})
.state("template.dashboard", {
url: "/dashboard",
templateUrl: "views/dashboard/dashboard.html",
controller: "dashboardCtrl"
})
$urlRouterProvider.otherwise("login");
})
I have in my index <ui-view></ui-view> for the place of the loadings and another <ui-view></ui-view> in template.html int he place where I want to load more stuff like dashboard.html, but this doesn't works. it loads dashboard.html without the template created in template.html. I have founded lot of documentation that doesn´t works for me. Any Idea?
Here there are a plunker example of the idea: https://plnkr.co/edit/ZsGZjDKOBTIXFpPtXasN?p=preview
There is updated plunker and working plunker.
The template of the mainTemplate state is now lookin like this:
place for main:
<div ui-view="main"></div>
place for other:
<div ui-view="other"></div>
so it has two (could be more) places for more stuff. And this is the state redefined:
.state("mainTemplate.dashboard", {
name: "main",
url: "/dashboard",
views: {
'main' : {
templateUrl: "dashboard.html",
controller: "dashboardCtrl"
},
'other' : {
template: "<h2>other view</h2>",
}
}
});
What we can see is views : {} object being used to defined multiple content for more targets. Read about that more details here:
Angular UI Router - Nested States with multiple layouts
Nested states or views for layout with leftbar in ui-router?
play or observe the changes here
I have a nested ui-route in my application. The index page (root page), works, but not the nested pages.
Here is my app.js
var app = angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('index',
{
url: '/index',
templateUrl: 'index.html'
})
.state("index.salesorder",
{
url: '/salesorder',
views: {
'mainlayout': {
templateUrl: 'partials/salesorder.html'
}
}
});
});
In my index.html, I have the div with ui-view attribute
<div ui-view="mainlayout"> </div>
I have also added the necessary scripts for angular, and ui-route. I do not get any errors in the console. But the salesorder does not show. I get to see the index though.
Your second state index.salesorder is a child state of index. Do you have the ui-view nested correctly? It looks like you might need 3 levels of ui-views.
try this:
var app = angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state("salesorder",
{
url: '/salesorder',
views: {
'mainlayout': {
templateUrl: 'partials/salesorder.html'
}
}
});
});
main.html:
<div ui-view></div>
salesorder.html:
<div ui-view="mainlayout"></div>
I'm new to angularjs and i'm making a website using ASP.NET MVC and AngularJs.I used angularjs ui router for route from one page to another.
With ui-sref tag every thing is ok but when user refreshes the browser page or enter url it fails to match to a state.
The question is how to set states and what actions needed in my controllers.
here are my codes.if any other code is required tell me.
my controller
public ActionResult Index()
{
return View();
}
public ActionResult NewsListPage()
{
return Redirect("#NewsListPage");
}
public ActionResult NewsDetailPage(int? newsId)
{
return Redirect("#NewsDetailPage");
}
my main angular file including module creation and config
var app = angular.module('abtinApp', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('A',
{
url: '/News/NewsListPage',
templateUrl: '/Angular/NewsListPage'
})
.state('B',
{
url: '/News/NewsDetailPage/:newsId',
templateUrl: '/Angular/NewsDetailPage'
})
.state('C',
{
url: '^/News/NewsDetailPage/:newsId',
templateUrl: '/Angular/NewsDetailPage'
});
$urlRouterProvider.otherwise('/News/NewsListPage');
$locationProvider.html5Mode({ enabled: true, requireBase: false });
}
]);
my index.cshtml
...
<div ng-app="abtinApp">
<a ui-sref=".A">Main</a>
<a ui-sref=".B">Detail</a>
<div ui-view></div>
</div>
...
angular controller
public ActionResult NewsDetailPage()
{
return View();
}
public ActionResult NewsListPage()
{
return View();
}
and NewsDetailPage.cshtml
<div ng-controller="NewsDetailController">
<h3>Details</h3>
<h3>{{newsId}}</h3>
</div>
and NewsListPage.cshtml
<h3>News</h3>
<div ng-controller="NewsController">
<div ng-repeat="newsItem in newsToShow">
<h3>
<a ui-sref="B({newsId: '{{newsItem.Id}}'})"> {{newsItem.Title}}</a>
</h3>
<p>
{{newsItem.NewsSummary}}
</p>
</div>
</div>
there is nothing especial in my angular controllers.
thank you.
After searching a lot and wasting some time,i found out by removing
$locationProvider.html5Mode({ enabled: true, requireBase: false });
every thing is fine but the new problem will be the ugly urls that is not important to me.
still any other answer will be appreciated.
EDIT : Here is a plunker
I'm a bit disappointed about the issue I have with ui-router as it is a very basic use.
I have an "empty" html index file that welcomes ui-views. I created 2 main templates : application.html and public.html . Basically they have 2 different headers/footers.
index.html
<div ui-view="">
<!-- encapsulate app/public -->
<a ui-sref="app">app</a>
</div>
app-routes.js
var myApp = angular.module('taApp', ['ui.router','ui.bootstrap','ui.sortable', 'ngResource']);
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /auth
$urlRouterProvider.when("", "/auth");
$urlRouterProvider.when("/", "/auth");
$urlRouterProvider.otherwise("/auth");
$stateProvider
.state('public', {
url:'',
abstract: true,
templateUrl: 'public.html',
/*views: {
'topbar': { template: 'public.topbar' },
'login': { template: 'public.login' }
}*/
})
.state('auth', {
url: '/auth',
templateUrl: '/partials/login/loginCard.html'
})
/*** LOGGED STATES ***/
//login
.state('app', {
templateUrl: 'application.html',
controller: 'authCtrl',
url: '/app'
})
});
Notice: the ui-sref state doesn't work too as it should load 'app' state.
Also I tried to force ui-view="app" or "public" without any success
I use angular-ui-router package on gulp.
There is something I missed and can't figure out.
Based on the updated question, related to this plunker, I updated that and make it working.
Fistly, angular must be loaded first
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
we need this
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="script.js"></script>
And also, because our application "taApp" is defined:
var myApp = angular.module('taApp',
[
'ui.router' //,'ui.bootstrap','ui.sortable', 'ngResource'
]);
we have add that into index.html
<!DOCTYPE html>
<html ng-app="taApp">
And as we can see, because we are not having references to other module (inside of index.thml) I had to comment them out
'ui.router' //,'ui.bootstrap','ui.sortable', 'ngResource'
But once their code will be added to the page... it will work with them. So, this example is no working here
There is a working plunker
I guess that the public state, marked as abstract should be parent of all states. So we need to adjust state def like this:
$stateProvider
.state('public', {
url: '',
abstract: true,
templateUrl: 'public.html',
/*views: {
'topbar': { template: 'public.topbar' },
'login': { template: 'public.login' }
}*/
})
.state('auth', {
parent: 'public',
url: '/auth',
templateUrl: 'partials/login/loginCard.html'
})
/*** LOGGED STATES ***/
//login
.state('app', {
parent: 'public',
templateUrl: 'application.html',
controller: 'authCtrl',
url: '/app'
})
Any child state is inserting its view into parent - by default. So we must be sure, that the parent template public.html contains
<div ui-view=""></div>
There are other ways, but this is the most simple scenario