I'm working with an app on Angular 1 and Ui-router, and I am trying to make so that data in urls will be preserved between states. I have read about the queryParamsHandling:'preserve' feature on Angular 2.0. However I am currently stuck with Angular 1 and I need to resolve how to keep the url data the same between states.
One option I was considering was to preserve the url:params data between states was with the ui-sref, however so far unsuccessful.
Does anyone have good tips how to resolve this?
Thanks
Router File --> route.js:
angular
.module('moduleName')
.config(['$stateProvider', stateProvider])
function stateProvider($stateProvider) {
$stateProvider
.state('lessonDetails', {
url: '/:lessonId/details',
views: {
'content': {
templateUrl: 'lesson/lesson-details.html',
controller: 'lessonController'
}
}
});
}
HTML file --> lesson-details.html:
<a ui-sref="lessonDetails({'lessonId': 123})">Go to details</a>
Controller -- > lesson-details.js
angular
.module('moduleName')
.controller('lessonController', ['$scope', '$stateParams', lessonController]);
function lessonController($scope, $stateParams){
//use lessonId passed as params using $stateParams
console.log($stateParams.lessonId)
}
Related
I am interested in using a Angular Material based contact form on a Shopify hosted page. Because the rest of the site is not built with Angular Material (yet), I would like to implement this contact form in a modular fashion, and have it isolated within its own div. The problem I've run into is that the stylesheet (currently linked in the head) for Angular Material is affecting page elements outside of the desired area of influence. Is it possible to isolate Angular Material content away from the rest of the page? How might one go about it?
You can create separate Angular module for you required template file and Inject angular material there. Link angular-material CSS in that template file only. This way It won't affect other pages.
The only way i think you can do this is by using an iframe because the css will always combine, and will follow the rule of cascade so the one that is below will override the others.
You can use angular-ui-router states with seperate angular modules. So you can inject angular-material one of the state of your routes then use it.
module.exports =
angular.module('parentModule', [
'angularMoment',
require("./childFolder"),
])
.config(function ($stateProvider) {
$stateProvider
.state('parent', {
url:"parent/",
views:{
'': {
templateUrl: 'main/layout.html',
controller: 'MainController'
}
}
})
.controller('MainController', require('./mainController'));
module.exports =
angular.module('childModule', [
'ngMateiral', 'ngMessages'
])
.config(function ($stateProvider) {
$stateProvider
.state('parent.child', {
url: "parent/:id",
views: {
'': {
templateUrl: 'main/layout.html',
controller: 'MainController'
},
'content#main': {
templateUrl: 'main/child/layout.html'
controller: 'ChildController'
}
}
});
})
.controller('ChildController', require('./childController'));
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);
});
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>
I have a SPA that will display data from an API in two separate parts of the page. One section displays products and prices. This information will remain on the page. The other section is a basic CRUD view. It allows the user to create new selections, read their selections, edit their selections, and remove their selections. I'm trying to determine the best way to display these two views. The CRUD section uses ng-view. Should the price/product section use a directive, a separate controller, or should I break up the page into two modules?
I'm new to Angular, and want to make sure that I do things right to avoid unforeseen issues down the road.
HTML:
<div ng-view="">
<!--user selections go here -->
</div>
<!--Product/Price info will go here. Unsure whether to insert ng-app="new module", ng-controller="new controller", or a directive with its own element-->
Javascript for user selections view:
myApp.config(function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'views/list.html',
controller: 'ProjectListCtrl as projectList'
})
.when('/edit/:projectId', {
templateUrl: 'views/detail.html',
controller: 'EditProjectCtrl as editProject'
})
.when('/new', {
templateUrl: 'views/detail.html',
controller: 'NewProjectCtrl as editProject'
})
.otherwise({
redirectTo: '/'
});
});
Factory for CRUD / user form section:
myApp.factory('Projects', function($firebase, fbURL) {
return $firebase(new Firebase(fbURL+'/projects')).$asArray();
});
Factory for product list/price section:
myApp.factory('Products', function($firebase, fbURL) {
return $firebase(new Firebase(fbURL + '/products')).$asArray();
});
The native Angular router is limited when creating complex and nested UIs, but AngularUI Router is a great alternative and very widely used. If you want to include multiple views in your interface then this is the way to go. It's not much more complicated than the native router but the wins are huge.
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
Here's a Plunker to demo your particular case: http://plnkr.co/edit/xZD47L?p=preview
With ui-router you can name views
<div ui-view="viewName"></div>
and include templates and controllers in the corresponding ui-router configuration
myApp.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home',{
url: "/",
// list your views
views: {
"viewName": {
templateUrl: "viewName.html" ,
controller: "viewNameCtrl"
}
}
})
});
Checkout this Wiki for Multiple Named Views.
I hope this helps.
I have an MVC 5 app with areas and I am trying to use the ui-router for AngularJs within one of my areas but I noticed that the templateUrl is wrong. It is trying to use a relative path but since I am using MVC routes and an Area the path to the template is incorrect.
The url to my area controller action is localhost:3789/Admin/UserManager .
The actual path is /Areas/Admin/Scripts/app/usermanager/partials/userlist.html .
angular.module("bsAdmin.userManager", ["ngResource", "ui.router", "ui.bootstrap", "bsPromiseTracker", "bsBusy", "angular-growl", "ngAnimate"])
.config(function ($stateProvider, $urlRouterProvider) {
// default state
$urlRouterProvider.otherwise("/userlist");
$stateProvider
.state('userlist', {
url: "/userlist",
templateUrl: "partials/userlist.html"
});
});
Angular ui-router tries to load the partial template using localhost:3789/Admin/partials/userlist.html
What are some techniques I can use so that the script will use the correct url to load the partial?
If your Angular javascript is in your .cshtml file, you can use the ASP.NET MVC URL helper to build the URL.
$stateProvider
.state('userlist', {
url: "/userlist",
templateUrl: "#Url.Content("~partials/userlist.html")"
});
});