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.
Related
I have a div tag and I want to append the angular material form fields inside that div. The problem is it's not rendering that tags. Can we do this using any method?
enter image description here
The angular way is has an array of object, e,g.
data=[{placeholder:"Enter Name",label:"Name"},
{placeholder:"Enter surname",label:"Surname"}]
and make some like
<mat-card *ngFor="let item of data">
<div class="row">
{{item.label}}<input mat-input [placeholder]="item.placeholder">
</div>
</mat-card>
When you are using angular, never manipulate the DOM manually (via native DOM APIs or jQuery).
When you are using a component or a directive in an angular template (ie. the html of your component), that is not real html, that is transformed to javascript. So when the application is running, where you wrote <mat-car> in you template and you also see <mat-card> in the DOM, that was actually put there by the code generated by angular, but a lot other things also happened (ie. the mat-card component was initialised).
When you just put the components selector manually into the DOM, nothing will happen, because the component is not initialised. To make it work, you have to use the material components from another components' template. Further reading: https://angular.io/guide/architecture-components
Suggestion: don't even import jQuery into the project at all, that way you won't even be tempted to do this.
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 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 ).
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.