I'm working on a website that allows you to search for different products, for example laptops. This is my index div:
<div class="content" id="main">
<div id="search-wrap">
<div id="logo"><h1>seach</h1></div>
<form id="search">
<input type="text" placeholder="Search " autofocus ng-model="query"/>
</form>
<div style="border: solid 1px blue" ng-show="query">
<ul ng-repeat="x in [] | range:10">
{{ query }}
</ul>
</div>
</div>
I have not yet implemented angular js on this but I'm thinking about how to do it. I'm not sure how to approach this, since its a complex site. Once a user searches for something, they will get results from a product. Will i have to create a different ng-view?
I'm just going by something i read online:
A page gets one ng-view. Assuming you have a single page application, this means you get one view. Use it wisely. Give some thought to what should be in the view. Is this your main content window or is this more of a navigation? Is the actual content (HTML) of this section highly dynamic? These are important decisions to make early in the development of your application if you have more than one distinct content area on your page.
Sorry if my question doesn't make sense, just not sure what to ask. Any tips will help.
thanks
You better try using ng-view and you would get more idea how it works.
There can be one ng-view in a page and it is tightly integrated with the url. When you change urls in browser, effective you are loading a different view into the ng-view area. These are configured using the $routeProvider.
ng-view is like the central content theme\area. Other views including sub-views for the main view and left nav, top nav footer is loaded using ng-include directive which has capability to compile and load any html chunk from server or locally.
For complex routing needs please have a look at ui-router which supports nested views.
For complex view you can try something like this
$stateProvider
.state('login', {
url: '/login',
controller: 'LoginController',
templateUrl: 'login.tpl.html',
access: 0
})
.state('multiple view', {
url: '/main',
access: 1,
views: {
'#': {
templateUrl: 'view1.tpl.html',
controller: 'view1Controller'
},
'page#dashboard': {
templateUrl: 'page.tpl.html',
controller: 'pageController'
}
}
})
More Info
Related
I have an app that is currently using the angular ui-router module dependency. The only aspect of the ui-router that I'm currently employing is the ability to apply/modify $stateParams to $scope and vice versa so the URL can change the way data is displayed in the controller to a user on arrival (i.e. url?param=something will filter the data by something).
I have the following in my app.config to set the state:
$stateProvider
.state('root', {
url: '/?param',
templateUrl: 'template.html',
controller: 'listController',
params: {
param: {
value: 'something',
squash: true
}
}
});
On my homepage, template.html successfully loads when the app is instantiated as such:
<div ng-app="myApp">
<div ui-view>
</div>
</div>
However, I have reached a roadblock and realize that calling the template from within templateUrl isn't going to work, as this app is being built inside another framework and therefore needs to be called from within the homepage itself to access its full capabilities.
Being a noob at AngualrJS, I was wondering if anyone can tell me what the best way is to accomplish this while still keeping the logic of $stateParams and other ui-router capabilities intact for the future.
For instance, could I just remove the templateUrl parameter from my state and call the controller directly inside the ui-view like this:
<div ng-app="myApp">
<div ui-view>
<div ng-controller="listController">
do something
</div>
</div>
</div>
I also looked into changing the entire logic from using ui-router to simply using the $location service but I'm wondering if there is a way to accomplish this without needing to over-do everything.
I am trying to load different form based on user interaction in single page application. ng-view was helpful until i had to load/hide forms in different divs of same page.
div#1: it will have catalog names populated from ng-repeat.
div#2: should populate forms ( order / schedule / list ) based on button click from top nav.
div#3: should only populate sub catalog list when user selects catalog in div#1.
index.html
<div class="left_column">
<ul>
<li ng-repeat="catalog in catalogs">{{ catalog }}</li>
</ul>
</div>
<div class="top_row">
<ng-view></ng-view>
</div>
<div class="bottom_row">
<ng-view></ng-view>
</div>
app.js
myApp.config(function($routeProvider){
$routeProvider
.when('/orderForm', {
templateUrl: '/orderForm.html',
controller: 'orderFormController'
})
.when('/scheduleForm', {
templateUrl: '/views/html/parameterForm.html',
controller: 'parameterFormController'
})
.when('/subCataloglist', {
templateUrl: '/subCataloglist.html',
controller: 'subController'
})
});
How can i load different forms at a time in single page ? is there any better example for multi view logic ?
I think that this attempt isn't correct.
I have seen only one ng-view, which could change class attached according to view url.
But here i propose much simpler architecture.
Use one view. On this view do ng-repeat in div1 as it was.
in div2 do a ng-if statement and connect it with clicking on buttons.
div three simillar - you can use ng-show or ng-if. ng-if doesn't render in dom, ng-show renders but hide.
<div class="top_row">
<form id="form1" ng-if="selval=1">
</form>
<form id="form2" ng-if="selval=2">
</form>
</div>
menu:
<ul>
<li>order</li>
<li>schedule</li>
controller attached to current html view:
$scope.sel = function(n){
$scope.selval = n;
}
As two-way binding is implemented in angular, it will work automatically.
<html>
<head>
[...]
</head>
<body>
<div ui-view="body">
<header></header>
<div ui-view="main">
Something you see while angular/templates load.
</div>
<footer></footer>
</div>
</body>
</html>
stuff.js
var app = angular.module("app", ['ui.router']);
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('home', {
url: '/',
views: {
"main": {
controller: 'HomeController',
templateUrl: 'home.tpl.html'
}
}
});
$stateProvider.state('signin', {
url: '/signin',
views: {
"body": {
controller: 'SigninController',
templateUrl: 'signin.tpl.html'
}
}
});
}]);
I disabled javascript while making the state transition and this is what I see in the browsers inspector...
<html>
[...]
<body>
<div ui-view="body">
<header>[...]</header>
<div ui-view="main">[... home.tpl.html ...]</div>
</div>
<div ui-view="body">
[... signup.tpl.html ...]
</div>
</body>
</html>
I was shocked to see that ui-router actually duplicates the ui-view and creates one view before removing the old view.
Obviously this causes the problem that a combination of BOTH views are showing for at least two seconds while navigating from signin to home. This behavior is the same on all tested browsers. Is there a way to tell/force/trick ui-router into completely removing the template of one view before loading another view?
this is similar to: Preventing duplicate ui-view in AngularJS and the answer may apply to my situation as well.
EDIT
the first div had class="ng-enter ng-enter-active" and the next one had class="ng-leave ng-leave-active" answer follows from that.
I have noticed this as well. This answer: Angularjs - ng-cloak/ng-show elements blink states that ng-cloak is the ticket, but I haven't been able to get it to work in this scenario.
I'm not sure how you are moving between your routes, but you could set a property on the model used by the first view to true and use ng-show on the entire view with that variable. Then when you're ready to move to the second view, set that variable to false. I'm trying to resolve this myself and will report back if I find a more elegant solution.
Final Edit: working plunker with the transcluded directive.
Edit: I made a first plunker with the solution given in the first answer. It works, but it's not the desired behaviour, because the template contains all the partial.
I made a second plunker with what I hope to achieve (but it doesn't work, obviously). I think it's mostly because the template is not the parent of the partial, but it is contained in it, so ui-router doesn't understand very well what I want.
Any help with this would be greatly appreciated!
We are building a website with Angular Material and ui-router, and all our content page share the same "container", because we always want the same responsive behaviour.
The code of this generic container would be something like:
<div class="layout-content">
<div layout="column" layout-align="center">
<div layout="row" layout-align="center center">
<section class="layout-fixed-width md-whiteframe-z1" flex-sm="100" flex-gt-sm="90">
{{content placed here}}
</section>
</div>
</div>
</div>
The header can differ in all pages, so the structure we have would basically be:
The question is, how can this be achieved in ui-router? We have done some nested views, but I don't see how to do a generic template so the code could be something like:
<form>
<md-toolbar/>
<div ui-view="generic-template">
<div ui-view="my-content"></div>
</div>
</form>
Ideally we would want to define only one time the generic-template view, and use it in all our modules.
In the nested states and nested views documentation I see mostly nested state stuff, but what we want is really only a plain html template, so maybe we are over-complicating this, and an easier way is possible (I'm quite sure it's the case). I've also checked this issue, where one of the answers say that ui-router should be the solution, but not much more.
Maybe we should do a directive instead?
It can be achieved combining named views and abstract states.
The 'key' here is to define an abstract state with a view for the layout (or generic template, if we follow the nomenclature of your original post).
Abstract state:
.state('master', {
abstract: true,
views: {
generic_template: {
templateUrl: 'genericTemplate.html'
}
}
})
Then, you have to set this abstract state as parent to the child views. So, the child view will inherit the generic template view. Example:
.state('one', {
url: '/one',
templateUrl: 'one.html',
parent: 'master'
})
In your index.html, you have to use a named view for the generic template, and inside it, another unnamed view. Something like this:
<body>
<div ui-view="generic_template">
<div ui-view></div>
</div>
</body>
Here is a plunker with a complete working example.
Hope it helps.
Maybe we should do a directive instead?
A directive with a transcluded ui-view certainly seems to give you what you're looking for. This saves you from cluttering up your routing logic with something that has nothing to do with routing.
genericTemplate.html:
<div>
<p>Generic content</p>
<ng-transclude></ng-transclude>
</div>
Somewhere in your js:
angular.module('formApp')
.directive('genericTemplate', function () {
return {
replace: true,
transclude: true,
templateUrl: 'genericTemplate.html'
};
});
In your html:
<body ng-app='formApp'>
<div generic-template>
<div ui-view></div>
</div>
</body>
Edit: working plunker
I'm trying to figure out reasonable approaches in AngularJS for creating a function that is composed of multiple steps (i.e., a wizard) but is linked to one page/URL. The data from one step would have to send data to (or share data with) the next step.
The main points are:
the url should remain the same (i.e., http://mydomain/myapp/nameupdater) for all of the steps and,
the data can be sent amongst steps (i.e., I have to give the data found from step 1 to populate the data in step 2).
For example, suppose that I have a function that does a bulk update of names:
In step 1 the function makes you search for a name.
In step 2 the function presents a list of names that were found from step 1 and allows the user to edit them.
I started an approach where each step had its own view and controller. And, the angular-ui-router maintained the states of the function. But, I have no idea how I would share the data between the steps.
Does anyone know of a good approach to establishing multi-step/wizard forms in angularjs?
My Plunker code is here of my very weak attempt at this.
I think the best way of doing this would be to use ng-switch, just one controller, one route, no reload, using variables shared in all steps, like this:
<div ng-controller="stepCtrl">
<div ng-switch="step">
<div ng-switch-when="1">
<!-- here you can include your step 1 template,
or simply just hardcode it here: -->
<div ng-include src="'.../step1.html'">
<button ng-click="setStep(1)"></button>
</div>
<div ng-switch-when="2">
<div ng-include src="'.../step2.html'">
<button ng-click="setStep(2)"></button>
</div>
<div ng-switch-when="3">
<div ng-include src="'.../step3.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
</div>
yourApp.controller('stepCtrl',function($scope){
$scope.step = 1;
$scope.setStep = function(step){
$scope.step = step;
}
});
This way you can also manipulate the URL to add a step at the end of your current location.
UPDATE :
Actually this answer is for long time ago , this days I personally prefer to use ui-router which is a great module which you can inject to your AngularJs application and make it even more cool with nested views .
Speaking of nested views , bellow is my new approach for a multystep form with some animation :
First :
Using $stateProvider declare any steps you want in separate views :
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('wizard', {// this will be the wrapper for our wizard
url: '/wizard',
templateUrl: 'wizard.html',
controller: 'wizardController'
})
.state('wizard.stepOne', {// this will be the wrapper for our wizard
url: '/stepOne',
templateUrl: 'stepOne.html',
controller: 'wizardController'
})
.state('wizard.stepTwo', {// this will be the wrapper for our wizard
url: '/stepTwo',
templateUrl: 'stepTwo.html',
controller: 'wizardController'
})
Then later in our "wizard.html" we can have something like this :
<div id="container">
<div>
<h2>Our multistep form wizard</h2>
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".stepOne"><span>1</span> Step One</a>
<a ui-sref-active="active" ui-sref=".stepTwo"><span>2</span> Step Two </a>
</div>
</div>
<!-- Here we specify our view that is a container for our subviews(steps) , which in our case can be a form !-->
<form id="signup-form" ng-submit="submit()">
<!-- nested state views will be inserted here -->
<div ui-view></div>
</form>
</div>
And obviously for our steps , we must have seperated html files.
This way , we still have one controller , url will be updated , and we can also add angular animation .