I'm starting a new project and am going to be using angular in a "single page architecture" application. I'm a little new to angular.
So, I purchased a template for my site. It has 2 distinct layouts that I would like to use. 1 for my unauthenticated (marketing) pages and another for most of my authenticated pages.
The difference in each is subtle, but the inside pages require a class on the <body> tags that the outside pages cannot have. I considered using 2 layouts but then that got tricky as I started thinking about how I would lay out my urls.
My thought is to use angular to manage my layout so that I only need one master page like this:
<body ng-class="{menu-right-hidden: isInternalPage }">
<div class="container-fluid">
<div ng-if="isInternalPage" id="menu" class="hidden-print hidden-xs sidebar-blue sidebar-brand-primary">
<!-- sidebar content -->
</div>
<div id="content">
#RenderBody()
</div>
<div class="clearfix"></div>
<div ng-if="isInternalPage" id="footer" class="hidden-print">
<!-- internal footer -->
</div>
<div ng-if="!isInternalPage" id="footer" class="hidden-print">
<!-- external footer -->
</div>
</div>
</body>
My question is this: Is there an easy way to set isInternalPage (and possibly other valies) without having $scope.isInternalPage = true/false; decorating all of my controllers?
You could use ng-init and define a scope variable on $rootScope:
<body ng-init="$root.isInternalPage = true" ng-class="{menu-right-hidden: $root.isInternalPage }">
<div class="container-fluid">
<div ng-if="$root.isInternalPage" id="menu" class="hidden-print hidden-xs sidebar-blue sidebar-brand-primary">
<!-- sidebar content -->
</div>
<div id="content">
#RenderBody()
</div>
<div class="clearfix"></div>
<div ng-if="$root.isInternalPage" id="footer" class="hidden-print">
<!-- internal footer -->
</div>
<div ng-if="!$root.isInternalPage" id="footer" class="hidden-print">
<!-- external footer -->
</div>
</div>
</body>
Alternatively, you could assign your variable on $rootScope inside one of your controllers:
app.controller('ctrl', function($rootScope) {
$rootScope.isInternalPage = true;
});
What you can do in this case is create an AngularJS service: "You can use services to organize and share code across your app"
angular.module('core').service('GlobalVars', [ 'addDependenciesHere',
function(addDependenciesHere) {
this.isInternalPage = someVal ? true : false
}
]);
Then inject this into the constructor for each controller
angular.module('core').controller('HomeController', ['$scope', 'GlobalVars',
function ($scope, GlobalVars) {
$scope.globals = GlobalVars;
}
]);
Then in your view you can access this directly
<body ng-class="{menu-right-hidden: globals.isInternalPage }">
Related
I'm creating an application that provides a logged in user with the ability to create a poll (with questions and choices) in their dashboard.
Once the poll has been created I would like to redirect to the poll page, which will have a unique url (ex: http://example.com/p/3eRr4g6).
I would like this page to NOT use the dashboard template.
How does one accomplish this?
Here's my dashboard view:
Example Poll Page/Template:
UPDATE: To show my current index file and how I have it structured. (In reply to koox00's response)
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<div ng-include="'components/navbar/navbar.html'"></div>
<div ng-include="'components/sidebar/sidebar.html'"></div>
<div class="content-wrapper">
<div ui-view></div>
</div>
<div ng-include="'components/footer/footer.html'"></div>
</div>
</body>
You can use named views.
Create a state that loads the default template in that view e.g main and make every other state a child of this one if you want to share data.
In the desired state you can load over the main view the html you want.
update
default.html
<div class="wrapper">
<div ng-include="'components/navbar/navbar.html'"></div>
<div ng-include="'components/sidebar/sidebar.html'"></div>
<div class="content-wrapper">
<div ui-view></div>
</div>
<div ng-include="'components/footer/footer.html'"></div>
</div>
index.html
<body>
<div ui-view="main"></div>
</body>
take a look at nested states also if you want to share data between states parent/child.
Here is a simple demo Html but the main concern is same that I had to transfer the current object of the ng-repeat "result.status" value to the other module working on a different controller and on a different partial html included on the main.html
Hope I have clarified the situation here
angular.module('one',[])
.controller('myCtrl',[function(){
var thisOne=this;
thisOne.item=[
{id:1,Name:'Harish',city:'delhi',Status:false},
{id:2,Name:'Malkeet',city:'delhi',Status:true},
{id:3, Name:'Anash',city:'delhi',Status:false}
];
}]);
/*now the module two starts for the different html*/
angular.module('two',[])
.controller('myCtrl2',[function(){
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="one">
<div ng-controller="myCtrl as prime">
<div ng-repeat="result in prime.item">
<p ng-bind="result.name"></p>
<p ng-bind="result.city"></p>
<ng-include src="'different.html'"></ng-include>
</div>
</div>
</div>
<!--different.html will be like this certain code-->
<div ng-app="two">
<div ng-controller="myCtrl2 as omega">
<p><!--here i want to print the "result.Status of myCtrl"--></p>
</div>
</div>
So I followed this guide so I could have a nav bar on every page: http://tomaszdziurko.pl/2013/02/twitter-bootstrap-navbar-angularjs-component/
And it was working, until I created a separate controller to populate my bootstrap carousel. The thing is, my ng-repeat works fine, but when it does I can't see my navbar on that page. I can see it just fine on other pages. I believe this is a scoping issue, but I am not sure where.
This is what I have in the main body of this page:
<body>
<reusable-navbar></reusable-navbar>
<!-- Carousel Start -->
<div id="main-carousel" class="carousel slide container" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!--Must set this by hand-->
<div class="item active">
<img alt="" src="../Revamp/Images/carousel/1.jpg">
</div>
<!--Repeat through the rest-->
<div ng-controller="carouselPhotoController">
<div class="item" ng-repeat="source in source">
<img alt="" ng-src="{{source.source}}">
</div>
</div>
</div>
</div>
And my controller looks like this:
var carouselPhotoController=angular.module("revampApp", []);
carouselPhotoController.controller("carouselPhotoController", function($scope, $http){
$http.get('../Revamp/Images/carousel/photos.json').success(function(photos){
//Carousel photos
$scope.source = photos;
})
});
And the directive is identical to the one in that walk through, just with a different template. So how to I get it so my nav bar will show up AND I can use ng-repeat?
Make sure you are not recreating the app.
This creates a new app:
var carouselPhotoController=angular.module("revampApp", []);
But this only accesses an app already created (note the absence of the second parameter):
var carouselPhotoController=angular.module("revampApp");
Change the above line and it should work.
I've been going over the current (angular 1.2.16) routing and multiple views method for angular. Its detailed here. In this we see that for every route there is a get request to load the partial html.
How would I change this so all get requests for views happen when the app instantiates and then the routes switch the views without making further calls to the server?
Suppose that you want to change the content of a div depending on what is stored in data.mode. You need to have first a mechanism to change the value of data.mode and that's entirely up to you.
<div ng-switch on="data.mode">
<div ng-switch-when="first_value">
<!--Your first partial page content-->
</div>
<div ng-switch-when="second_value">
<!--Your second partial page-->
</div>
<div ng-switch-when="second_value">
<!--Your third partial page-->
</div>
<div ng-switch-default>
<!--Default content when no match is found.-->
</div>
</div>
You can do what they suggest here and use ui-router
i.e.
<!-- index.html -->
<body>
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
<!-- Also a way to navigate -->
<a ui-sref="route1">Route 1</a>
<a ui-sref="route2">Route 2</a>
</body>
If I have two <div ng-view></div> elements on the same page, angular.js only uses the first one. I am looking to have two templates (with two controllers and two partials) rendered on the same page, how do I do that? The code below does not work but I'd like to have something along these lines.
<div class="row">
<div class="large-6 small-12 columns">
<div ng-controller="SitesHomeCtrl" >
<div ng-view>
</div>
</div>
</div>
<div class="large-6 small-12 columns">
<div ng-controller="UsersMeetCtrl" >
</div>
</div>
</div>
ui-router is the best option but if you are going with $routeProvider, you could use ng-include (with ng-show/ng-hide) or ng-switch to achieve the same.
I imagine you're probably going to want to look at ui-router in place of angular's router at this point, as angular's router does not support multiple ng-view elements.