So I'm working on a website that currently populates the page with cards in a Grid format [3x3]. I've been asked to provide the option to change the view to a list. So now I have two view files, list-view.html & grid-view.html.
The website is using Angular routing to load pages and I'm having a hard time configuring the paths to the correct view files.
Below are snippets/screenshots of the code I'm working with:
<div align="center">
<button class="btnView"><i class="fa fa-bars"></i> List</a></button>
<button class="btnView"><i class="fa fa-th-large"></i> Grid</button>
</div>
This code above creates the buttons in "index.html"
var app = angular.module('leavesNext', ['ui.router', 'ui.bootstrap', 'ui.tab.scroll','ngSanitize','ngCookies','720kb.socialshare'])
app.config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/?tag',
templateUrl: 'views/card-view.html',
controller: 'homeController'
})
.state('search', {
url: '/?search',
templateUrl: 'views/card-view.html',
controller: 'homeController'
})
This snippet about is that "script.js" that loads the home page. Any ideas on how I can go about loading the respective files when the button is clicked?
From the Docs:
Activating a state
There are three main ways to activate a state:
Call $state.go(). High-level convenience method. Learn More
Click a link containing the ui-sref directive. Learn More
Navigate to the url associated with the state. Learn More
For more information, see UI-Router Wiki - Activating a State
Related
I am new to AngularJS, and I am a little confused of how I can use angularjs ui-router in the following scenario:
It consists of two sections. The first section is the Homepage with its login and sign up views, and the second section is the Dashboard (after a successful login).
When I logged in success need to navigate from login form to "Home page".
When I tapped a registration button I need to navigate to "Registration page" from login page
Similarly I also need a "forgot password" screen
My current router is below. How can I do this functionality? (Please help with some HTML code and related controllers)
app.js:
'use strict';
//Define Routing for app
angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'RegisterController'
})
.when('/forgotPassword', {
templateUrl: 'forgotpassword.html',
controller: 'forgotController'
})
.when('/home', {
templateUrl: 'views/dashBoard.html',
controller: 'dashBordController'
})
.otherwise({
redirectTo: '/login'
});
}]);
});
Firstly, nobody will design a website with your requirements / functionalities for you. stackoverflow is for specific problems, your questions is too broad, more about it - How to Ask. But to help you with a conversion from ngRoute to ui.router I can describe what the syntax should look like so you can adopt it for your website.
Converting to ui.router
Your config doesn't change that much. you need to replace .when with .state, use the right providers, and have the right syntax. Here is an example with just few states:
app.config(config);
/* your preferred way of injecting */
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider) {
$stateProvider.
state("HomepageState", {
url: "/home",
templateUrl: 'views/dashBoard.html',
controller: 'dashBordController'
}).
state("RegisterState", {
url: "/register",
templateUrl: 'register.html',
controller: 'RegisterController'
})
/*
more can be added here...
*/
$urlRouterProvider.otherwise('/login');
}
Navigation
You should be using states for navigation at all times. So replace href="url" with ui-sref="state". Here are some examples of anchor links:
<a ui-sref="HomepageState">Home page</a>
<a ui-sref="RegisterState">Register</a>
Don't forget to replace your ng-view with ui-view. (For older browser support it's better to have <div ui-view></div> instead of <ui-view></ui-view>)
Redirection
After filling in a login form, the user will press something like:
<button ng-click="login()">Sign in</button>
which will call a function login() that will validate / verify if the user can be logged in. (You can also have <form ng-submit="login()"> with <button type="submit">...) Then, if everything is fine and the user got his session / cookie, you can have a redirection to another page with:
$state.go("HomepageState");
(Don't forget to inject $state into your controller)
Advanced navigations
In the future if you have user profiles that are listed by their index. Your routing can be improved with $stateParams. Their job is to check any additional parameters in the URL. For example: a URL: /profile/721 can have a state with url:"/profile/:id". Then you can extract that id with $stateParams.id and use it in your controllers. And your redirection would look like:
$state.go("ProfileState", { "id": 721});
I am preparing a mobile page for a web site. When guest open a link, php will redirect him/her to mobile page with same url if him/her device is mobile.
There are some problem. The urls like these sitename.com/product-name-334 and sitename.com/category_name_c. They detect the page thanks of _c and product ids. But I dont know how can I provide it by angular?
I want to listen your suggests.
You should try ui-Router's $stateProvider.
StateProvider API Reference
First, you need to reference ui-Router in your index file.
Then, you can assign a state to a hyperlink by using data-ui-sref attribute.
<li>
<a data-ui-sref="product">
</a>
</li>
</ul>`
Then you need to assign a url, a template and a controller to the state.
angular.module('sspRouting', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('product',
{
url: "/productDetail/{productId}",
templateUrl: 'app/view/productTemplate.html',
controller: 'productController'
})
)}]);
Then inside the controller you can use $routeParams to get the id from the url and then build your html using the data of that specific product.
.controller('productController', function($scope, $http, $routeParams, productService) {
var productId = $routeParams.productId;
// your code here.
//example $scope.productDetail = productService.getProductDetail(productId);
});
In my app I have this server-generated link:
http://localhost:3000/people#/users
When I click on it I get redirected to the following HTML page with Angular UI-Router script:
<a ui-sref="users">Users</a>
<a ui-sref="invitations">Invitations</a>
<div ui-view></div>
The problem is - users state does not get triggered automatically on page load. I need to manually click on it and only then the corresponding UI-Router state gets triggered.
Here's my config file:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('users', {
url: "/users",
templateUrl: "assets/partials/users.html"
})
})
There is a working plunker
$urlRouterProvider.otherwise('/users');
// States
$stateProvider
.state('users', {
url: "/users",
templateUrl: "assets/partials/users.html"
});
The $urlRouterProvider.otherwise('/users'); will redirect to defined page when none is provided
This links in index.html will work as well
href
<a href="#/users">
ui-sref
<a ui-sref="users">
Check it here
If that should be more dynamic, please check the:
Angular - Dynamically Choose Starting State
In case, that our issue is that application is working with this init page:
http://domain/app/
but not without the trailing slash
http://domain/app
We have to do some redirection on a server. (Redirection is needed to make all the relative path properly working) there are some how to with asp.net mvc
Browser address will not be displayed correctly in ui-route
Developing a POC for an application.
Technologies being used : ASP.Net MVC4 and AngularJs.
Initialy while getting started i was using ngRoute and $routeProvider. The links used to redirect to the server to the required controller action and pages used to load in the div marked with ng-view directive. But my requirement was to laod multiple and nested views. So, had to switch to $stateProvider which supports such requirements.
Now i am facing the issue of the links not getting redirected. The "Project" link redirects but the "Opportunity" does not. My requirement is to load a view inside the first div and then one more view into AddOpportunityContainer
Following below is the code which i had written. Can anyone help me what wrong i have been doing. Had already spent quite an amount of tme on it.
Referred Libraries:
angular.js and angular-ui-router.js
The Code:
var GuidanceApp = angular.module('GuidanceApp', ['ui.router']);
var configFunction = function ($stateProvider, $httpProvider, $locationProvider) {
$stateProvider
.state('Projects', {
url: '/Projects',
templateUrl: 'Projects/Index'
})
.state('Opportunity', {
url: '/Opportunity',
templateUrl: '/Opportunity/Index',
views:{
"AddOportunityContainer": {
templateUrl: '/Opportunity/Create'
}
}
});
}
configFunction.$inject = ['$stateProvider', '$httpProvider', '$locationProvider'];
GuidanceApp.config(configFunction);
Following is the HTML of home page. And as you can see, the last div is marked with ui-view now instead of ng-view as in case of ngRoute and $routeProvider
<div>
<ul>
<li>Projects</li>
<li>Opportunity</li>
<li>Adjustments</li>
<li>Summary</li>
</ul>
</div>
<div ui-view></div>
Different partial view to be loaded on click of Opportunity link.
<h2>Opportunity-Index</h2>
<div ui-view="AddOportunityContainer"></div>
Your link for anchor element should be corrected as below without leading '/':
<li>Projects</li>
When making an ionic app what is the best method of creating different pages of information?
Right now I have separate html documents for each page and a button pointing to each html document; however, I feel like angular/ionic provides a better way of doing so that I missed. For example, the app I am making has a main page with buttons for 5 places. Each button loads a completely new html document with info about the place labeled on the button.
If it is too much to explain, a link answering what I am asking is fine
Thanks
What you want are angular templates. You can write a template once, and then pass in information from the controller to take the place of the angular bindings. You have one master template, that changes the angular bindings depending on which information you pass it in the controller.
For example, you could have your application load in partial templates for each location, and display them all on your main page without having to hit a new html document. Check out the example in the Angular Tutorial.
And the Live Demo
You can do it by uiROUTER, For example: angular.module('ionicApp', ['ionic']) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('menu', { abstract: 'true', templateUrl: 'templates/menu.html', controller: 'MenuCtrl' }) / ... / .state('menu.work', { url: '/work', views: { menuContent: { templateUrl: 'templates/work.html', controller: 'WorkCtrl' } } }); $urlRouterProvider.otherwise('/work'); });