I have 2 list of items say, news and people.
These 2 lists have different logic and are located in different pages, so don't share shame ng-app:
<!-- News.html -->
<div id="newsList" ng-app="newsListApp">
<div id="{{news.id}}" ng-app="modalApp" ng-repeat="news in newsList">
...
</div>
</div>
<!-- People.html -->
<div id="peopleList" ng-app="peopleListApp">
<div id="{{person.id}}" ng-app="modalApp" ng-repeat="person in people">
...
</div>
</div>
I need to open each item in a modal popup, so I have to use a modalApp, but I want to use the same modalApp(that will use the same popup template) in the news and people lists...
What is the concept of sharing angular application/modules in cases like this?
You can't do it using ng-app. You have to manually bootstrap at least one of them. See this question for more info.
I think you are mixing up ng-app and ng-controller. Probably you are looking for something like this. In general angular only expects one app per page, and they certainly shouldn't be nested
<body ng-app="myApp">
<div id="newsList" ng-controller="newsListCtrl">
<div id="{{news.id}}" ng-controller="modalCtrl" ng-repeat="news in newsList">
...
</div>
</div>
<div id="peopleList" ng-controller="peopleListCtrl">
<div id="{{person.id}}" ng-controller="modalCtrl" ng-repeat="person in people">
...
</div>
</div>
</body>
https://docs.angularjs.org/api/ng/directive/ngController
Edit:
If news and people are different pages then you need a router of some kind. Your main options are ngRoute or ui-router. I think ui-router is more flexible to I would go with that. Couple of useful links that might help out:
https://scotch.io/tutorials/angular-routing-using-ui-router
http://plnkr.co/edit/dd8Nk9PDFotCQu4yrnDg?p=preview
Related
I want to let two separate Vue components communicate with each other (not siblings, so not child or parent).
Let's assume I have a Laravel blade template file like that:
<div id="app">
<div class="header">
<shopping-cart></shopping-cart>
</div>
<div class="content">
<products-list></products-list>
</div>
</div>
How can I send a product from component to component (putting products to the cart) ?
If you want to get the right solution with the right structure, and it's simple, you have to use the State Manager(Vuex), because it's the best solution.
I wanted to write this in the comment, but I could not because I did not have enough reputation.
I'm working on an Angular 4 project and I'm stuck on a problem regarding templates.
Let me explain it better.
I have two components in my project:
SectionCompontent.ts
HomeCompontent.ts
These are the relative HTML templates
section.compontent.html
<div class="section">
<div class="cards">
<ng-content></ng-content>
</div>
</div>
home.compontent.html
<section>
<div *ngFor="let card of cards">
<span>{{card.title}}</span>
</div>
</section>
When I run this project, I expect to see the rendered content of *ngFor projected inside SectionComponent where <ng-content> is located.
Unfortunately, this is what I see on the DOM instead of <ng-content>:
<!--bindings={}-->
I added some static HTML tags like <p> and <h1> and they allowed it to work.
Can you help me solve this problem?
Thanks in advance.
I have a collection of items, that I would like to stuff into a bootstrap grid. This then looks like this:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
So I would need to loop through my collection and adding after every second item
There are two issues:
invalid html! No idea how to get around this
Issues with the module, but I think with some helpers I could get around.
Best would be if there were some examples.
Thanks for any inputs
check out this question. you should be searching for handlebars or spacebars to get better results. Blaze is the template engine; not the template system (if that makes sense.)
How do I populate a bootstrap grid system using handlebars for each command in Meteor.js?
Generically, you need to ensure that your collection is exposed to the template, most likely in a template helper. Then you can iterate the collection items like so:
{{#each templateHelperName}}
<div class="row">
<div class="col-md-8">{{propertyName1}}</div>
<div class="col-md-4">{{propertyName1}}</div>
</div>
{{/each}}
To create a template helper, take a look at the meteor docs; they're quite good.
If this doesn't help, perhaps you can provide some more clarity about what your collection looks like, and how you'd like it displayed. Your code doesn't really give much indication.
I have a simple angular app but the template is growing. I want to split it and use the ng-include directive but I can't get it to include correctly.
current template.html
<div class="edit-object-form" ng-show="editable">
<!-- ... -->
</div>
<div class="list-objects" ng-show="!editable">
<!-- ... -->
</div
desired template.html
<div class="edit-object-form" ng-show="editable">
<div ng-include="/partials/edit_objet_form.html"></div
</div>
<div class="list-objects" ng-show="!editable">
<!-- ... -->
</div
The default value of editable is false, but when I switch to true the include directive doesn't work.
Note: I'm using Angular-1.0.7
I'm not able to recreate this issue. Take a look at this plunker that loads two different templates. (The both look odd, since they're templates stolen from other plunkers to allow for xss).
Maybe this issue is caused by the two incomplete div ending tags, that are .
I am trying to render my application template, which is getting very complicated, so I want to split it up into separate <script type="text/x-handlebars">'s
I think I want to use the {{view}} helper, but I don't know. Let's say I have this:
<script type="text/x-handlebars" data-template-name="application">
<div id="wrapper" class="clearfix">
<hgroup>
<header>
<div class="logo"></div>
<h1 id="facilityName">{{facilityName}}</h1>
<div id="sessionInfo">
<a id="userName">{{user}}</a>
<a id="logOut" href="../logout">log out</a>
</div>
</header>
</hgroup>
{{view App.breadcrumbsView}}
</div>
</script>
And I want to load this next template inside of the one above:
<script type="text/x-handlebars" id="breadcrumbs">
<div id="breadcrumbs">
<p>
Network
{{#each breadcrumbObj}}
<span>></span><a {{bindAttr href="link"}}>{{name}}</a>
{{/each}}
</p>
</div>
</script>
Right now I am trying to do this with this code from my app.js
App.breadcrumbsView = Ember.View.create({
templateName: 'breadcrumbs',
breadcrumbObj: Util.breadcrumbs()
});
This is not working and I am getting Uncaught Error: assertion failed: Unable to find view at path 'App.breadcrumbsView'
Thanks
I think that you declared your App using var keyword. So it's not visible in handlebars template.
Change this
var App = Ember.Application.create();
To this
App = Ember.Application.create();
And you have to use extend instead of create when creating your views. Because ember will handle the object lifecycle like: create, destroy, add and remove binding etc.
#Marcio is right, you should .extend() and let the framework create it for you automatically by request. Furthermore when you extend the best practice is to use capitalized names like App.BreadcrumbsView.
See here a demo how it renders correctly doing it this way.
Hope it helps.