I picked up a project that used Handlebars and Mustache in its views.
I want to transform and re-use most of it to AngularJS. However I'm having a problem with a simple thing: With Mustache if, for example, I have an index.html file like this:
<div class = "blah">
{{>sidebar}}
</div>
Having a sidebar.html with the elements I want to appear. It's basically using the same partial sidebar in all the other views aswell. However, I don't know what I can use as an alternative to this.
Any suggestions using AngularJS or generic HTML are very much appreciated.
Thank you.
Take a look at creating your own Angular Directive, name it something like 'sidebar', which you can then call in your html ex.
<div class = "blah">
<sidebar></sidebar>
</div>
Edit: I made a quick JSFiddle to show you the basic principle, you can use the link I provided for more intricate details. (ex. instead of defining the template in a string, you can use the templateURL property and provide an html file as a template.
I would also recommend you passing in the state of the sidebar you want to render, rather than it sharing your parent controller state, but that is just a personal preference ( makes it easier to re-use ).
Related
I'm using Vue.js to build ui for my html5 game. I have a case where I want to define ui-containers which essentially just group other ui-components and position them to somewhere on screen. So I could have something like this going on:
<ui-container>
<ui-component1></ui-component1>
<ui-component2></ui-component2>
<ui-component3></ui-component3>
</ui-container>
Where I need to add and remove those components dynamically based on data-model which represents the content of the container. The problem is that I'd like to keep ui-container generic, so that I can append any Vue-component to it without having information in template about which components there might be.
I googled and found this example which concerns injecting components dynamically: http://forum.vuejs.org/topic/349/injecting-components-to-the-dom
While the data-driven version in example was easy to make and understand, it uses v-for for tag and therefore requires one to know before hand the type of child-component.
So question is, how I can generalize that example to work with any component dynamically? Should my data-model have the type of component or tag name of it and then interpolate it in v-for? Or is there existing mechanism for this kind of requirement?
You can use special is attribute to dynamically set the type of a component. Here are the docs. The code will look somewhat like:
<div id="app">
<div v-for="component in components" :is="component.type" :value="component.value"></div>
</div>
Working fiddle to play with: Dynamic Vue.js components
I have a web application thats written mostly in Jquery, that is essentially a dashboard that a user can add any number of custom widgets to. I have the users currently added widgets, so when its loaded up I masically append each widget to the DOM. I want to work on converting this to an Angular application however im stumbling on one major issue.
1)I can recreate each widget as a directive, that will work nicely. However what I'm struggling with is how to add each widget that a user has setup on load. My first attempt at solving this was to create a generic widget directive, and doing an ng-repeat, and dynamically assigning the widget its controller/templateUrl.
In theory this seems great however I ran into some issues with not being able to dynamically pass the controller name via attribute. if I hard coded a string value it would work, but wouldnt a data-bound attribute in the ng-repeat. Example below does not work.
<quidget ng-dynamic-controller="quidget.QuidgetName" ng-repeat="quidget in tab.quidgets track by $index"></quidget>
if instead of quidget.QuidgetName I passed in the actual name of the controller, it would work...like so
<quidget ng-dynamic-controller="quidget1Controller" ng-repeat="quidget in tab.quidgets track by $index"></quidget>
Does anyone have any insight on how I can go about accomplishing this?
Instead of passing the controller name dynamically to the directive you can define the name of the controller in the template of that widget (this is assuming that every widget has a different template). For example you just pass the widget name to the controller:
<quidget ng-repeat="quidget in quidgets" name="quidget.name">
Next, in your quidget directive's template you conditionally load the template based on the name of the widget, some thing like this:
<div ng-switch on="name">
<div ng-switch-when="widget1" >
<ng-include src="'widget1.html'"></ng-include>
</div>
<div ng-switch-when="widget2" >
<ng-include src="'widget2.html'"></ng-include>
</div>
</div>
and inside each widget's template you define the Controller name like this:
<p ng-controller="widget1Ctrl">This is widget1.</p>
Here is a working plunker that illustrates the whole idea: http://plnkr.co/edit/dBqHRqChy17U8pFI9PXH
I know it's kind of a messy solution and I am pretty sure this can be accomplished in a much simpler manner.
Our SPA has 2 distinctive top level views. To compare it is like windows file explorer showing tree view on one side and content details on other side. For these top level views, we are considering to have 2 partial views. Other alternative is to pack these views as directives. Our initial thoughts are going toward partial views, because these are quite larger blocks of functionalties and each view can have multiple controllers. Any experience/thoughts on similar lines would help us decide. Just a note we communicate between these views using eventing mechanism.
We do not intend to reuses these views. Specifically, are there any issues going partial views? Like performance, maintainability, etc.
I'm not sure I'm understanding the problem here, so sorry if I say something wrong (also sorry for my english).
What you need are 2 views; if 'inside' those views you use a directive or not, it's another thing.
The only thing I'm pretty sure is that those 2 views need to have they're own scope.
To me it seems a lot like a 'navigation menu' vs. 'view' kind of problem (only that the navigation part is gonna be some sort of tree-view), so the solution should be similar:
the 'normal' ngView (your 'details' side);
a div with it's own controller (and it's own scope).
Something like:
<nav ng-controller="treeViewController()">
<!-- here we use a directive, for example -->
<tree-view ng-model="tree"></tree-view>
</nav>
<div ng-view></div>
Then the best way to make them communicate is probably a custom service.
In case I misunderstood your problem, sorry in advance.
I am using a master page having navigation and ng-view on it, partial pages loading successfully under ng-view and with navigation of master page , but I require to load some isolated page like login.html page but not under ng-view and without master page content during route.
I am new on angular and not sure how to do this, login page loaded every time under ng-view.
Please suggest me any way to do this.
Thanks in advanced.
ng-include is your friend. see doc
here is simple way, but you should go to doc and see that there are extra options as to what can be done onload and if you want to autoscroll or do some kind of animation.
<div ng-include="'somefile.html'">
</div>
The one extra note is that ng-include is given an expression so if you have a static reference you need the extra quotes.
One of the great things about Angular is it is very flexible. Ultimately it will depend on your app and how you work. I'm not exactly certain what you are trying to accomplish but, it sounds like a job for the ngInclude directive as Dan mentioned.
You mention a login.html that excludes navigational and other main page content. Using a modal may be a viable alternative interface decision.
If you have everything built and you only want to hide part of the DOM and be done with it then, nghide or ngShow may be the quickest solution.
If there is a lot of stuff on your index.html you may want to separate those things into partials other than the ones connected directly to your routes, and use ng-include="'path/to/partial.html'" to include them. (The "''" are intentional as it likes a string.) Read the docs and experiment with the plunkr. You can do a lot of cool things with ngInclude, especially if you pay attention to its context.
If you combine the ngInclude directive with ng-switch-when, you could put together something like:
<div ng-switch="routeAction">
<div ng-switch-when="extpage" ng-include="'extraneous.content.html'"></div>
<div ng-switch-when="login" ng-include="'login.partial.html'"></div>
<div ng-switch-default ng-include="'default.tpl.html'"></div>
</div>
Where routeAction is tied to your controler which, is tied to your $route or $location.. depending on how you have things set up.
I'm new to AngularJS, and - since it is quite complex and the approach is new for me, I'm a bit confused.
I'm from "classic" background (server-side template languages [like Yii, django, Smarty] + some jQuery to make things a bit dynamic).
Let's say I have a menu bar (Bootstrap NavBar, or anything else) - an element which lives outside of the main page content, like this:
<body>
<div id="menubar">
... <!-- menu content -->
</div>
<div class="container">
<div ng-view></div>
</div>
</body>
Now I'd like to make the menu a bit dynamic, i.e add or remove some menu items inside of the controller.
Using the server side frameworks & their templating systems, for example Yii - I'd simply have a BaseController class with $menuItems variable, and render it each time in the menuBar, while all the controllers would inherit from BaseController so they could modify items.
Also, I need a function which handles the searchForm located inside menu bar. Where should it live?
What is Angular way for something like this? So far I've been thinking of creating custom service or extending $rootScope.
UPDATE: I would encourage you to take a look at John Papa's ng-demoes and style-guide as say second step in adopting angular.js.
Check out examples angular.js team posted recently, to show full application.
github.com/IgorMinar/foodme
github.com/GoogleChrome/wReader-app
github.com/CaryLandholt/AngularFun
Pay attention to the following features angular gives you
ngView, ngInclude directives
templateUrl property of directive
'=', '&','#' scope bindings in directives
I belive it is going be a good approach to have combination of a service and a directive for rendering menu the way you described it.