I have Dashboard Page.
It has two columns
One on the left and other on the right side.
Left Div contains Links [Home,Profile]
When user clicks on the link on the left side, "Right DIV" data changes accordingly.
What I have tried
I used Angular directive ng-switch in order to load partials in page.
<div class="col-lg-2">
<h3>MENU</h3>
Resources
<br>
Users
</div>
<div class="col-lg-10 card">
<div ng-switch on="page">
<div ng-switch-when="resources">
<h3>Dashboard</h3>
</div>
<div ng-switch-when="users">
<h3>Users</h3>
</div>
<div ng-switch-default>
<h4>Default</h4>
</div>
</div>
</div>
But now I want to inject partial page with data coming from database.
How can I achieve that.
Please Help.
Related
Is there a way to prevent the transition animation for the first page of bricks? I like the animation for resizing and appending but I would like the first page of bricks to appear in place without the animation.
I explored using the layoutComplete event but it gets triggered multiple times.
<div ng-controller="AppsCtrl" masonry masonry-options="{ transitionDuration: '0.4s' }">
<div ng-repeat="app in Apps" class="masonry-brick">
<div id="{{app.id}}" class="sz-card sz-app md-whiteframe-2dp">
<a href="#">
<div class="sz-card-image">
<div class="sz-app-image"><img src="../../app/images/{{app.imageFile}}"></div>
</div>
<div class="sz-card-details">
<div class="sz-card-name">{{app.name}}</div>
<div class="sz-card-settings"><md-icon></md-icon></div>
</div>
</a>
</div>
</div>
<div scroll-trigger="loadMore()" threshold="100"></div>
</div>
Try to use ng-cloak
<div ng-controller="AppsCtrl" ng-cloak ....
https://docs.angularjs.org/api/ng/directive/ngCloak
code work fine when it is single page but when i add in my angular app then code is not working,when user click on accordion header then it link to (#collapse id)
what is wrong with my code when i adding to my app.
http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">login</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<form>
<input type="text">
<input type="password">
<input type="button" value="login">
</form>
</div>
</div>
</div>
</body>
</html>
If you want to use Bootstrap components like Accordion with AngularJS you'll need to use the specific bindings for them. They can be found (with some example code) at this GitHub project.
You'll need to swap the normal Bootstrap JavaScript file for the one above, and make sure you get the version with the templates included otherwise it won't work out of the box. The file with the templates included has tpls in the file name. There are plenty of examples of how to use this code, but feel free to ask if you have any more problems.
How to auto refresh DIV or span in angularjS ? what is write in angularjs for refresh
<div class="direct-chat-text">
<div ng-repeat="comment in comments">
<div class="updates">
<div ng-controller="MyCtrl">
<span>{{comment.message}}</span>
</div>
Controller should be defined earlier, values changing in model will change in the view as well.
<div ng-controller="MyCtrl">
<div class="direct-chat-text">
<div ng-repeat="comment in comments">
<div class="updates">
<span>{{comment.message}}</span>
</div>
</div>
</div>
</div>
In your controller you have to update scope data of "comments" and then your view will be updated with new data. to update data you can use $timeout with collback
I am trying to have a single-page Angular-App which has a view in the middle and tools like sidebar and topbar around that. But when the user is not logged in, the view should show a login partial and the side- and topbar should be hidden. As well as there should be a fullscreen background image. I got a working attempt, but it's rather ugly, so I wonder how I could do better:
<body ng-app ="MB">
<div ng-controller="mbMainCtrl as mainCtrl" class="container-fluid">
<!--fullscreen background when not logged in-->
<div ng-hide="$root.loggedIn" class="landing" ng-cloak>
</div>
<div>
<div ng-show="$root.loggedIn" class="row">
<mb-topbar></mb-topbar>
</div>
<div class="row">
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<mb-sidebar></mb-sidebar>
</div>
<!--view always visible, loads the login page as well-->
<div class = "col-sm-6">
<div ng-view></div>
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<div class="row">
<div mb-news-feed-dir></div>
</div>
<div class="row">
<div mb-quest-feed-dir></div>
</div>
</div>
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
</div>
</div>
</div>
...
</body>
I suggest you use ui-router and have a nested view to accomplish something like this in a more clean way without having to hide and show dom elements.
I'm really new to AngularJS and I started to make a learning Project and I came to a point where I do not know how to proceed. Behind AngularJS Frontend there is an API which retrieves database data(Like menu elements, product list).
Than I would like to split my template in 2 parts and each should be handled by different Angular Models. What I'm trying it doesn't seems to work. What is the correct way to do this?
-index.html
<head></head>
<body ng-app="appApp">
<div class="container" ng-view=""></div>
</body>
--views/main.html
<div ng-include src="navigation.html"></div>
<div class="jumbotron">
<h1></h1>
<p class="lead"></p>
<p></p>
</div>
<div class="row products">
<div ng-include src="product_list.html"></div>
</div>
<div class="footer">
<p>footer</p>
</div>