Ok, I'm using ASP.NET MVC5 + AngularJS 1.3.8 here.
Index.vbhtml:
<div ng-controller="MainController">
<tabset justified="true">
<tab ng-repeat="t in tabs" heading="{{t.heading}}" select="go(t.route)" active="t.active"></tab>
</tabset>
</div>
<div ui-view="main"></div>
Tabs are working fine.
App.js:
App.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
//$locationProvider.html5Mode(true); // HTML5 Mode to remove hashbang, want to revist this later as it requires IIS rewrite rules
$urlRouterProvider.otherwise("/");
$stateProvider
// Main Page
.state('main', {
abstract: true,
url: '/',
views: {
'main': {
templateUrl: '/',
controller: 'MainController'
}
}
})
// Home page
.state('home', {
url: '/home',
views: {
'main': {
templateUrl: '/Home/Index',
controller: 'HomeController'
}
}
})
// Requests Page
.state('requests', {
url: '/requests',
views: {
'main': {
templateUrl: '/Request/Index',
controller: 'RequestController'
}
}
})
// Leave Requests page
.state('requests.leave', {
url: '/leave',
views: {
'main': {
templateUrl: '/Request/Leave',
controller: 'LeaveController'
}
}
})
App.controller('RequestController', function ($scope, $state) {
$scope.loadComp = function () {
$state.go('requests.comp');
};
$scope.loadOvertime = function () {
$state.go('requests.overtime');
};
$scope.loadLeave = function () {
$state.go('requests.leave');
};
});
Ok, so what I'm trying to accomplish is that on my Requests tab, I have three buttons, and when I click on one of those buttons, replace the parent view "main" with the appropriate state.
I see the URL change on the button click, but nothing renders.
I am getting my partial views back from the server via AJAX with no issues, except for these button clicks :(
I'd love to know what I'm doing wrong :) Thanks!
FWIW: Angular UI-Router: child using parent's view I've been trying to rework this with no luck...
What I would do is trying to point to the real templates in templateUrl like so: templateUrl: '/Request/Index.html'
Related
I'm getting a WARNING: Tried to load angular more than once. when trying to use nested views on a Ruby on Rails and Angular app. I'm using ui-router and angular-rails-templates.
Angular config and controllers:
var app = angular.module('app', ['ui.router', 'templates']);
app.factory('categories', ['$http', function($http) {
var o = {
categories: []
};
o.get = function (id) {
return $http.get('/categories/' + id + '.json').then(function (res) {
return res.data;
});
};
return o;
}]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/_home.html',
controller: 'MainCtrl',
});
$stateProvider
.state('home.categories', {
url: '/categories/:categoryId',
templateUrl: 'categories/_categories.html',
controller: 'CategoriesCtrl',
resolve: {
category: ['$stateParams', 'categories', function($stateParams, categories) {
return categories.get($stateParams.categoryId);
}]
}
});
$urlRouterProvider.otherwise('/home');
}]);
app.controller('MainCtrl', function ($state) {
$state.transitionTo('home.categories');
});
app.controller('CategoriesCtrl', [
'$scope',
'categories',
'category',
function($scope, categories, category) {
$scope.posts = category.posts;
}
]);
And the templates:
_home.html (*edited: deleted body and ng-app from this template, following #apneadiving advice, and used the right path, as pointed by #Pankaj Now, views are rendered properly, but the 'loading more than once' persists)
Category One
Category Two
<ui-view></ui-view>
_categories.html
<ul ng-repeat="post in posts">
<li>{{post.title}}</li>
</ul>
app/views/layouts/application.html.erb
<!--<rails head>-->
<body ng-app="app">
<ui-view></ui-view>
</body>
What is happening is that the state 'home' appears and when I click on the links, the URL changes but nothing else happens. And I get the message that Angular is being loaded more than once.
EDITED: Got it working. It was a <%= yield %> conflict in another part of the app that should have nothing to do with the Angular part.
As you are defined the child states, you need to change your URL's to /home as they are child of home state, the URL gets inherited from parent state.
Category One
Category Two
You shouldnt boot your app in a template like you do.
Add the ng-app to your html's body and remove it from the template (actually your template shouldnt bear the body either)
I used Angular.js routing mechanism where I want to set my home route as default, so that when I open application will use that default routing.
Example When I open application as follows url is www.abc.com
Code :
var portalModule = angular.module("portalModule", ['ngRoute']).config(function ($routeProvider, $locationProvider) {
//Path - it should be same as href link
$routeProvider.when('/Home', { templateUrl: '/PortalTemplate/Home.html', controller: 'homeController' });
//List routing
$routeProvider.when('/ProductList', { templateUrl: '/PortalTemplate/ProductList.html', controller: 'productController' });
$routeProvider.when('/ShopList', { templateUrl: '/PortalTemplate/ShopList.html', controller: 'shopController' });
$routeProvider.when('/ServiceList', { templateUrl: '/PortalTemplate/ServiceList.html', controller: 'serviceController' });
//Detail Routing
$routeProvider.when('/ProductDetail', { templateUrl: '/PortalTemplate/ProductDetail.html', controller: 'productDetailController' });
$routeProvider.when('/ShopDetail', { templateUrl: '/PortalTemplate/ShopDetail.html', controller: 'shopDetailController' });
$routeProvider.when('/ServiceDetail', { templateUrl: '/PortalTemplate/ServiceDetail.html', controller: 'serviceDetailController' });
$locationProvider.html5Mode(true);
});
So I want /Home route will open as whenever I open my application as www.abc.com/Home by default.
You can use .otherwise(params); which will catch anything else that doesn't match. See roteProvider docs here.
$routeProvider.when(...)
$routeProvider.when(...)
.otherwise({ redirectTo: '/Home' });
I made this small API on rails with a single resource called Items, that works fine while I use it on the browser (a.k.a http://localhost:9000/api/items/1.js - Configured port 9000 with Grunt proxy), but when I try to get that data from Angular I get nothing.
//app.js
.config(function ($routeProvider) {
$routeProvider
.when('/items', {
templateUrl: 'views/items.html',
controller: 'ItemsCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.factory('Item', ['$resource', function($resource) {
return $resource('http://localhost:9000/api/items/:id.json', null, {
'update': { method:'PUT' }
});
}]);
//items.js
angular.module('balenciagaApp')
.controller('ItemsCtrl', ['$scope', 'Item', function ($scope, Item) {
$scope.items = Item.query();
}]);
//items.html
<ul ng-repeat="item in items">
<li>{{item.name}}</li>
</ul>
I'm using angularsj routing inside my asp.net mvc application.
Here's my configs for $routeProvider :
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/Organization/Employee/:id', {
controller: 'UserCtrl',
templateUrl: '/Areas/Organization/App/user/partial/info.html'
})
.when('/Organization/Employee/:id/edit', {
controller: 'EditCtrl',
templateUrl: '/Areas/Organization/App/user/partial/edit.html'
})
.otherwise({
redirectTo: '/'
})
;
}])
As you can see there only two routes I want to be handled by angularjs.
How I can make use asp.net for handling routing for the otherwise case?
.otherwise({
controller: function ($location, $window) {
$window.location.href = $location.path();
return false;
},
template: ""
});
That did the trick. But blink with an empty ng-view first. Maybe someone know's how to get rid of that blink?
I start of by calling a method in my MVC-app that returns a list of objects in
$scope.centrals:
var result = $http.get("/Home/GetCentraler");
result.success(function (data) {
$scope.centraler = data;
});
In my main-view I display the items like this:
<tr ng-repeat="product in centraler | orderBy:'name' | filter:search" >
<td class="tdCenter"><img ng-src="{{product.img}}" alt="{{product.name}}" /></td>
<td>
<b>{{product.namn}}</b><br />
{{product.description}}
</td>
</tr>
As you may see, when I click the product.name, I would like to display that item in a specific view.
I must be missing something, I guess I should make a new method in MVC that picks out the object containing the clicked Id. But how can I the pass this object into:
<a href="#/products/{{product.id}}"
My Routing is set up like this:
var storeApp = angular.module('MyAPp', ['ngRoute']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/store', {
templateUrl: '/Angular/partials/store.htm',
controller: storeController
}).
when('/products/:Id', {
templateUrl: '/Angular/partials/product.htm',
controller: storeController
}).
otherwise({
redirectTo: '/store'
});
}]);
EDIT1:
When I click the productname-link now, it goes to the correct view but nothing is brought to it.
EDIT2:
function storeController($scope, $routeParams, $http) {
var result = $http.get("/Home/GetCentraler");
result.success(function(data) {
$scope.centraler = data;
function activate() {
$scope.search = $routeParams;
if ($routeParams.Id) {
angular.forEach($scope.centraler, function(item) {
if (item.id == $routeParams.Id) {
$scope.item = item;
}
})
}
};
});
}
Please see that demo should helps you a bit http://plnkr.co/edit/XyWvKQLuQsegoyG19sg5?p=preview
I can't see definition for storeController in your code and should pass controller name as a string inside route configuration.
Other thing you should have rather different controller for product view and store view
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/store', {
templateUrl: '/Angular/partials/store.htm',
controller: 'storeController'
}).
when('/products/:Id', {
templateUrl: '/Angular/partials/product.htm',
controller: 'storeController'
}).
otherwise({
redirectTo: '/store'
});
}
])