Here i am trying to add one page controller adding to another controller using same module in angular js. how can i add ctrl2.js menu to inside ctrl1.js.please help me currently i am using angualrjs one .. i am struck in this issue please give me a solution ...
menu.html:
<div id="left-top" ng-controller="two">
<ul class="nav navbar-nav navbar-right menu-top-left col-sm-12 col-xs-12">
<li>
<a href="#/">
<i class="material-icons mobile-menu-icon-color">exit_to_app</i>
<span class="notification mobile-menu-icon-color">Logout</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons mobile-menu-icon-color">person</i>
<span class="notification mobile-menu-icon-color">{{name}}</span>
</a>
</li>
</ul>
</div>
ctrl1.js
var app=angular.module('board',[]);
app.controller('one',function($scope){
alert("ctrlone');
});
ctrl2.js
var app=angular.module('board',[]);
app.controller('two',function($scope){
});
<div ng-controller="firstController">
<div ng-controller="secondController"></div>
</div>
if you want to use common $scope(your data) for ctrl1 and ctrl2, you need to create service for this, and after inject service to ctrl1, and ctrl2
Related
<nav class="menu-nav">
<ul>
<li class="menu-li" ng-model="myVar"><a>Search<i class="fa fa-chevron-down pull-right"></i></a>
<div class="sub-menu" ng-hide="myVar">
<ul>
<li><a>Search-sub</a></li>
<li><a>Search-sub</a></li>
<li><a>Search-sub</a></li>
<li><a>Search-sub</a></li>
</ul>
</div>
</li>
<li class="menu-li"><a>Home<i class="fa fa-chevron-down pull-right"></i></a></li>
<li class="menu-li"><a>Dashboard<i class="fa fa-chevron-down pull-right"></i></a></li>
<li class="menu-li"><a>Register<i class="fa fa-chevron-down pull-right"></i></a></li>
<li class="menu-li"><a>Login<i class="fa fa-chevron-down pull-right"></i></a></li>
</ul>
</nav>
In Angular 2+ ng-hide won't work you can use *ngIf directive for hide and show element.
Example
TS -
isLoading = true // change value as per your requirement
HTML -
<div *ngIf="isLoading">Loading... </div>
Hope this will help!
If we presume that you are using Angular2+ and not AngularJS:
ng-hide is Angularjs directive, you can't use it in Angular2+. You can use *ngIf if you want your DOM elements to be actually rendered or not, and [hidden] which is equivalent of ng-show in angularjs, when you want your DOM element to be rendered but not displayed.
In your case, you can have a property in your .ts file:
public loading: boolean = false; // update this property when you have to...
And in your .html template:
<div class="sub-menu" *ngIf="loading">
<ul>
<li><a>Search-sub</a></li>
<li><a>Search-sub</a></li>
<li><a>Search-sub</a></li>
<li><a>Search-sub</a></li>
</ul>
</div>
I am developing an app with the MEAN stack...and the question is...
How can I divide the interface of my app?
I have a static page(such a webpage) and an application page, the interface is different but the development that I have followed is...
In the file 'index.js' of my app, where I put all the dependencies and set the . In this file I have set the header and the footer of the static page for not repeat it in all the html files. It is working when I navegate above the static page, but when I am developing the app-page I want to change the main interface.
So, Must I repeat the code? or Can I set directives like ng-show to show each interface in each situation?
There I show you the mockups of my app:
Static:
Application:
The body target of my 'index.js' file:
<body>
<script>
$(document).ready(function(){
$('.button-collapse').sideNav();
});
</script>
<!-- The var changeInterface control if we are on main page or app page-->
<header>
<nav class="dipu-green">
<div class="nav-wrapper container" role="navigation">
<a id="logo-container" href="#" ui-sref="/()" class="" style="color:white" >
<b>R.U. Pino Montano</b>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="#!/" style="color:white" >Inicio</a>
</li>
<!--data-activates="reportsDropdown" dropdown-button -->
<li>
<a href="#!/news" style="color:white">
Noticias</a>
</li>
<li>
<a href="#!/info" style="color:white">
Información</a>
</li>
<li>
<a href="#!/team" style="color:white">
Equipo</a>
</li>
<li>
<a href="#!/services" style="color:white">
Servicios</a>
</li>
<li>
<a href="#!/contact" style="color:white">
Contacto</a>
</li>
<li>
<a href="#!/app" style="color:white">
Resi App</a>
</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>
<a href="#!/">
<i class="material-icons">mood</i>Inicio</a>
</li>
<!--data-activates="reportsDropdown" dropdown-button -->
<li>
<a href="#!/news">
<i class="material-icons">new_releases</i>Noticias</a>
</li>
<li>
<a href="#!/info">
<i class="material-icons">info</i>Información</a>
</li>
<li>
<a href="#!/team">
<i class="material-icons">people</i>Equipo</a>
</li>
<li>
<a href="#!/services">
<i class="material-icons">business</i>Servicios</a>
</li>
<li>
<a href="#!/contact">
<i class="material-icons">contact_mail</i>Contacto</a>
</li>
<li>
<a href="#!/app">
<i class="material-icons">exit_to_app</i>Resi App</a>
</li>
</ul>
<a href="#" data-activates="nav-mobile" style="color:white" class="button-collapse">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
</header>
<main>
<div class="ribbon">
<span>BETA</span>
</div>
<!-- el controlador se añade a una parte del body-->
<div class="section">
<div ui-view></div>
</div>
</main>
<footer class="page-footer dipu-green">
<div class="container">
<div class="row dipu-green">
<div class="col s12">
<div>
<h5>Contacto</h5>
<ul>
<li><i class="tiny material-icons">location_on</i> Avda. Alcalde Manuel del Valle nº 28</li>
<li>41008, Sevilla (España)</li>
<li><i class="tiny material-icons">account_balance</i> C.I.F.: XXXXX </li>
<li><i class="tiny material-icons">local_phone</i> Tel: XXX XXX XXX</li>
<li><i class="tiny material-icons">email</i> rupinomontano#gmail.com</li>
<li><i class="tiny material-icons">web</i> rupinomontano.com</li>
</ul>
</div>
</div>
<div class="col s12">
<div>
<h5>Desarrollo</h5>
</div>
</div>
<div class="col s12">
<h5>Síguenos en</h5>
<div id="social">
</div>
</div>
</div>
</div>
<div class="footer-copyright">
<span style="margin-left:15%;">© 2018 Developed by </span>
</div>
</footer>
</body>
Thank you in advance!
As you are using angularjs, you can create a single page application.
answering to your qustions
Q: Must I repeat the code?
Ans - in angularjs you should not repeat your code, you maintain common part in one page and from that page you can render to diffrent page. this the beauty of single page application. to create a single page application you need routing. to achive routing in angular js you can use angular router package or you can use UI Router package.
please chack this example for angular router : https://www.journaldev.com/6225/angularjs-routing-example-ngroute-routeprovider
please chack this example for UI router : https://scotch.io/tutorials/angular-routing-using-ui-router
Q: Can I set directives like ng-show to show each interface in each situation?
Ans - you should use routing directive. from these directive you can navigate to different page without reloading pages again again.
This question have good chance to be a duplicate, but after some searches I wasn't able to find a good explanation to my problem - so I apologize if this is the case.
Well, I got a template which is actually written like this:
<div ng-include="'includes/header.html'"></div>
<section>... Template for homepage, page1, page2... </section>
<div ng-include="'includes/footer.html'"></div>
My header.html is like this:
<section class="header">
<div class="wrapper">
<img id="logotype" src="images/logotype.png">
<ul id="menu">
<li>
Home
</li>
<li class="border-none">
<a class="a" ng-click="chatClicked = !chatClicked">Click to chat</a>
</li>
<li id="logout" class="glyphicon glyphicon-off border-none">
Logout
</li>
</ul>
</div>
</section>
And my footer.html like this:
<section class="footer">
<div class="wrapper">
<ul id="menu-left">
<li>
Home
</li>
<li>
<a class="a" ng-click="chatClicked = !chatClicked">Click to chat</a>
</li>
</div>
</section>
I was wondering if there is a way to open open/hide this new include on all pages (
<div ng-if="chatClicked" ng-controller='ChatController' ng-include="'includes/popup-chat-to-click.html'"></div>
) each time the event chatCliked is triggered - and if it is possible - where it is the best to place this last div?
Ok problem resolved using this link, sorry:
AngularJS - losing scope when using ng-include
This was a matter of $scope.
I had to add this in my controller:
app.controller('homeController',
['$scope'',
function ($scope) {
$scope.chat = { clicked: false };
}]);
in my main view:
<div ng-include="'includes/header.html'"></div>
<div ng-if="chat.clicked" ng-controller='ChatController' ng-include="'modules/chat/popup-contact.html'"></div>
in my header.html:
<a class="a" ng-click="chat.clicked = !chat.clicked">Contact us</a>
So I have been reading this article which suggests using $watch in your controllers is bad.
I am trying to take the advice. I have controller that looks like this:
.controller('NavigationController', ['$rootScope', '$scope', function ($rootScope, $scope) {
var self = this;
// Get our current user
self.user = $rootScope.user;
// Watch
$scope.$watch(function () {
// Return our user
return $rootScope.user;
}, function (user) {
// Set our user to the new user
self.user = user;
});
}]);
and my HTML looks like this:
<div class="account-header" ng-controller="NavigationController as controller" ng-cloak ng-show="controller.user.authenticated">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-account">
<div class="collapse navbar-collapse" id="account-menu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{ controller.user.userName }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="teams">Team settings</a></li>
<li><a ui-sref="account">Account settings</a></li>
<li><a ui-sref="logout">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
You can see that I am only showing the account menu when the user is logged in. After reading the article, I am struggling to see how I can actually change my controller.
Does anyone have any suggestions?
Update 1
Some of you have said because it is in the rootscope, I don't have to do anything. I can just use user in the HTML and it should work fine.
I tested this like this:
<div class="account-header" ng-cloak ng-show="user.authenticated">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-account">
<div class="collapse navbar-collapse" id="account-menu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{ user.userName }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="teams">Team settings</a></li>
<li><a ui-sref="account">Account settings</a></li>
<li><a ui-sref="logout">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
and it did work.
Now what I want to do is add another menu item, this item is only shown if there are any kits. But I would rather not do a API call on every state change, so the only thing I can see is to amend something when a kit is either added or deleted.
But I am not sure what is the best way to do this.
When the user changes broadcast a 'userLoggin' event on the $rootScope. Then listen for that event in your controller.
Or $emit the event on $rootScope and in the controller listen on the $rootScope by injecting it.
$rootScope.$on('userLoggin' function() {
// React to user change.
})
Being new to Angularjs, I need a bit of help with this issue. I am attempting to add ng-click="getGallery(57)" to a modal tab. Adding via jQuery is not the issue, however I realize when I do this, Angular is not compiling the newly added ng-click. I have a simple controller
function imageGalleryCtrl ($scope, $http) {
//get gallery info on click
$scope.getGallery = function(id)
{
$http.post('/beta/images/get_images',{'id': id}).success(function(data)
{
$scope.images = data.thisGal_images;
$scope.images.galID = id;
});
};
}
I add the ng-click to the element with jQuery
//Edit image tab to use angularjs
$('#image_edit a').attr('ng-click','getGallery(' + settings.id + ')');
How do I force Angular to compile this newly added ng-click?
Thanks!
HTML Modal:
This is the modal that is called when the gallery name is clicked.
<div class="modal fade hide modal-creator" id="imageUploader" tabindex="-1" data-focus-on="input:first">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h3>Create New Gallery</h3>
</div>
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
Edit Image Gallery
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="home">
<?php include('create.php'); ?>
</div>
<div class="tab-pane fade" id="upload">
<?php include('upload.php'); ?>
</div>
<div class="tab-pane fade" id="edit">
<div class="span9">
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}" alt="">
{{image.orgName}}
</li>
</ul>
</div><!-- /span9 -->
</div><!-- /row -->
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
Close
Next
</div>
</div>
Update
So really attempting to do this the Angular way, and after some studies here is where I am at.
The controller is the same as above and I have updated the tabs on the modal as follows.
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
<a ng-click="getGallery(57)" href="#edit" data-toggle="tab">Edit Image Gallery</a>
</li>
</ul>
If I hard code the ng-click as above, the tab updates as expected. What I am trying to make happen, is when the modal is called, (#image_edit a) gets a defined ng-click="getGallery(id). I need to tell Angular to look at the ng-click again for the id.
Although I too think that you should try and find another approach, the answer to your question
How do I force Angular to compile this newly added ng-click?
is
// remove and reinsert the element to force angular
// to forget about the current element
$('#button1').replaceWith($('#button1'));
// change ng-click
$('#button1').attr('ng-click','exec2()');
// compile the element
$compile($('#button1'))($scope);
See this working example: http://plnkr.co/edit/SgvQzaY0TyFHD1Mf0c3F?p=preview
Basically what I'm getting at is you want to probably make this happen:
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img
ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}"
alt=""
ng-click="getGallery(image.galleryID)"
>
{{image.orgName}}
</li>
</ul>
The problem is I'm unsure of the relationship between the settings.id and the galleryID for a particular image. If you can set up this relationship in the data so it just automatically binds you're in better shape.