I am a beginner on Ionic/Angularjs.
Developing a side menu app on windows 10.
I populated a page from a select statement on SQLite.
And i'm to edit individual item by navigating to an edit page using state params but not responding. Many thanks for your kind assistance:
<a href="#/edit/{{task.id}}" class="item" ng-repeat="task in Ourdata">
<h2>{{task.id}}</h2>
<p>{{task.name}}</p>
</a>
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('list',{
url: '/list',
templateUrl: 'templates/list.html'
})
.state('edit',{
url: '/edit:taskId',
templateUrl: 'templates/edit.html'
});
$urlRouterProvider.otherwise('/list');
})
You should insert the slash / before the :
I edited and add a controller to it:
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('list',{
url: '/list',
templateUrl: 'templates/list.html'
})
.state('edit',{
url: '/edit/:taskId',
templateUrl: 'templates/edit.html',
controller: 'MyCtrl'
});
$urlRouterProvider.otherwise('/list');
})
In your controller:
.controller('MyCtrl', function($stateParams){
var taskId = $stateParams.taskId;
});
Related
App.js
var myApp=angular.module('sampleApp', ['ui.router','MainCtrl', 'NerdCtrl',
'NerdService', 'GeekCtrl', 'GeekService','ngMaterial']);
myApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html'
})
.state('nerd', {
url: '/nerd',
templateUrl: 'views/nerd.html',
//controller: NerdController
})
.state('geek', {
url: '/geek',
templateUrl: 'views/geek.html'
});
$urlRouterProvider.otherwise('/login');
});
I started with an AngularJs boilerplate and tried to use UI Router with it and, I've been stuck on this for a while. When I comment out the line of code shown above, it works fine and no errors come up. However when I add the controller, I get this module error in the console with "ReferenceError: NerdController is not defined" . I've defined the controller and added the controller dependency and I'm not sure what I need to do. It seems like a simple error that I'm overseeing. Thanks for the help!
Here is the controller file:
angular.module('NerdCtrl', []).controller('NerdController', function($scope)
{
$scope.tagline = 'Nothing beats a pocket protector!';
});
Could it be something wrong with my directory structure?
Change to : controller: "NerdController"
var myApp=angular.module('sampleApp', ['ui.router','MainCtrl', 'NerdCtrl',
'NerdService', 'GeekCtrl', 'GeekService','ngMaterial']);
myApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html'
})
.state('nerd', {
url: '/nerd',
templateUrl: 'views/nerd.html',
controller: "NerdController"
})
.state('geek', {
url: '/geek',
templateUrl: 'views/geek.html'
});
$urlRouterProvider.otherwise('/login');
});
What am I missing? Why would the Home template NOT load via .otherwise('/')? If I link to href="/#/" or ui-sref="home" everything works fine. However the Home template does NOT load if I try $urlRouterProvider.otherwise is working. The console does not show any errors.
Another interesting point is the URL is never modified when the first page loads. My other apps usually redirect from http://www.domain.com to http://www.domain.com/#/. This app is not showing the updated URL.
I have tried this in multiple browsers. No extensions or plugins are active.
Here are my routes:
(function () {
'use strict';
angular
.module('myapp')
.config(configRoutes);
configRoutes.$inject = ['$stateProvider', '$urlRouterProvider'];
function configRoutes ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/partials/home.html'
})
.state('login', {
url: '/login',
templateUrl: 'app/partials/login.html',
})
.state('signup', {
url: '/signup',
templateUrl: 'app/partials/signup.html',
})
.state('logout', {
url: '/logout',
template: null,
controller: 'LogoutCtrl'
})
.state('profile', {
url: '/profile',
templateUrl: 'app/partials/profile.html',
});
}
})();
I have the following code for states:
.config(function ($stateProvider, $urlRouterProvider, CONSTANTS) {
$urlRouterProvider.otherwise('/cyo');
$stateProvider.state('pri', {
url: '/pri',
controller: 'priController',
templateUrl: CONSTANTS.PRI_TEMPLATES.PRI_TEMPLATE_URL,
redirectTo: 'pri.size'
}).state('rec', {
url: '/rec',
controller: 'recController',
controllerAs: 'recCtrl',
templateUrl: CONSTANTS.REC_TEMPLATES.REC_TEMPLATE_URL
})
});
The URL is being generated is http://adc.com/REC/1440/#
1440 being a ID that changes depending upon a prod Cat. the template is not loaded with this url. but as soon I add '/rec/' after the current url the template is loaded - http://adc.com/REC/1440/#/rec/ the page loads correctly
I am not able to understand how to get this fixed.
Ayush
You should define the state paramaters when you define the state.
Try this:
.state('rec', {
url: '/rec/:id',
params: {id: 'defaultValue'}, // optional
controller: 'recController',
controllerAs: 'recCtrl',
templateUrl: CONSTANTS.REC_TEMPLATES.REC_TEMPLATE_URL
})
And the html code:
<a ui-sref='rec({id: 123})'>Go to rec</a>
I have the following code for my router:
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('main', {
url: '/',
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
})
.state('signup', {
url: '/signup',
templateUrl: 'templates/signup.html',
controller: 'SignupCtrl'
})
.state('userEdit', {
url: '/user/edit',
templateUrl: 'templates/user/edit.html',
controller: 'UserEditCtrl'
})
.state('workouts', {
url: '/workouts',
templateUrl: 'templates/workouts/index.html',
controller: 'WorkoutsCtrl'
})
.state('workouts.show', {
url: '/:id',
templateUrl: 'show.html',
controller: 'WorkoutCtrl',
onEnter: function() {
console.log('this is stupid');
}
})
$urlRouterProvider.otherwise('/');
}])
My issue is with the workouts.show state. I have this link:
<div class="" ng-repeat="workout in workouts track by workout._id">
<hr>
<a ui-sref="workouts.show({id: workout._id})">{{ workout.shortURI }}</a>
<p>{{ workout.description }}</p>
<ul class="exercise-list">
<li ng-repeat="exercise in workout.exercises">{{ exercise }}</li>
</ul>
<hr>
</div>
When I click on the link with ui-sref"workouts.show({id: workout._id})" the url changes to the proper format, and adds the id dynamically, but the view does not load. It just stays on the same page.
I have seen several other questions that are similar, but none of the accepted solutions have worked for me, and I have spent too long on this now.
Thanks in advance for any help!
I had similar issue.
You must have a ui-view in your "workouts" state, so that your "workouts.show" will render as a child.
Hope this helps.
Trying to link to a child URL using Angular UI-Router (very new to this)
I have:-
app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise("/products")
$stateProvider
.state('products', {
url: "/products",
templateUrl: "products.html",
})
.state('products.edit', {
url: "/:id",
templateUrl: "products.edit.html",
controller: function ($scope, $stateParams) {
$scope.id = $stateParams.id;
console.log($stateParams.id)
}
})
.state('customers', {
url: "/customers",
templateUrl: "customers.html",
});
//$locationProvider.html5Mode(true);
});
I can navigate to products and customers, but not the products.edit state.
Here is a PLUNKER
Because products.edit is the child state of products, the view of the former is to be embedded into the view of the latter. So in products.html, you need to include a <ui-view> where ui-router will place the child view. Like this:
<div>
<h4>Products Page</h4>
<ui-view></ui-view>
</div>
See this updated plunker.