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>
Related
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.
I use AngularJS and I have the following template_
<div class="wrapper">
<div class="as-container">
<div ui-view="header"></div>
<div class="apoSoftContainer">
<div class="row clearfix">
<div class="col-md-12 column" ui-view="content"></div>
</div>
</div>
</div>
<div class="as-footer">
<div ui-view="footer"></div>
</div>
</div>
A span- Tag in my Footer looks like this:
</span> Version <span style="font-weight:normal;">Some Text</span></span>
There is no controller or service for the footer.
My aim is that when I click onto "Some Text" than a modal should be open but I don't know where to place the code?
If you already got the code to open a modal, I suggest you create a controller for it.
I usually wrap my entire application using a "mainController". That way, I can use it for head elements, footer, etc.
<!DOCTYPE html>
<html ng-app="WebApp" ng-controller="mainController as main">
<head>
<title>{{main.myTitle}}</title>
</head>
</body>
<footer>
<span ng-click="main.openModal()">Click here!</span>
</footer>
</body>
</html>
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.
I see during load that the scope element $scope.docDetails has the necessary data.
In the view when I use the ng-repeat to print info, I see that it is not displayed in browser.
<body ng-controller="documentUploadController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div ng-repeat="row in documentUploadController.docDetails">
<div class="col-sm-2">{{row.DocumentTypeName}}</div>
<div class="col-sm-3 elementwrap">{{row.FileName}} </div>
..
</div>
</div>
WHen i view the HTML ,i see the ng-repeat code being commented out
Where am I going wrong?
Currently, your ng-repeat variable is $scope.docDetails
Since $scope already equals the controller, remove the controller reference in ng-repeat like <div ng-repeat="row in docDetails">
<body ng-controller="documentUploadController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div ng-repeat="row in docDetails">
<div class="col-sm-2">{{row.DocumentTypeName}}</div>
<div class="col-sm-3 elementwrap">{{row.FileName}} </div>
..
</div>
</div>
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.