I have my index.html page in which an ng-view is implemented. The same applies to the sidebar, which also linkes to 3 pages (main.html, product.html and customer.html).
I need to change the class of sidebar.html for example when I'm in the customer.html page.
I tried to do it from the customerController but it had no result. As I understand it, because the sidebar.html is controlled by MyController
Can anyone guide me?
Thank you
Here are the relevant parts of the code:
index.html
<html ng-app="appDataBoard">
<body ng-controller="MyController" >
<!-- SIDEBAR-->
<div ng-include="'./template/sidebar.html'" ></div>
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="col-md-12 column sortable">
<div ng-view></div>
</div>
</div>
</body>
</html>
sidebar.html
<div class="page-sidebar-wrapper">
<ul >
<li class="nav-item start open">
</li>
<li class="nav-item ">
</li>
<li ng-class="nav-item">
</li>
</ul>
</div>
<!-- END SIDEBAR -->
routing.js
var dbApp = angular.module('appDataBoard', ['ngRoute','ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
// configure our routes
dbApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/main', {
templateUrl : 'template/main.html',
controller : 'mainController'
})
// route for the about page
.when('/product', {
templateUrl : 'template/product.html',
controller : 'productController'
})
// route for the contact page
.when('/customer', {
templateUrl : 'template/customer.html',
controller : 'customerController'
});
});
Related
Can anybody help me.
In index.html, I run ng-view, which code corresponds to Routing.js file. The menu calls two pages main.html and product.htm.
main.htm, has included another page called filterApp.html.
I need to hide a page element that is embedded main.html the filterApp.html. I have not succeeded.
If I take the include and put the code directly into main.html works. I read that ng-ng-hide and include not working properly. Is there anything I can do. I need to have it in separate files.
Here is the code of the pages.
Thank you so much
Index.html
<html ng-app="appDataBoard">
<body ng-controller="mainController" >
<ul >
<li class="nav-item start open">
</li>
<li class="nav-item ">
</li>
</ul>
<div class="col-md-12 column sortable">
<div ng-view></div>
</div>
</body>
</html>
Main.html
<div class="jumbotron text-center">
<h1>main Page</h1>
<p>{{ message }}</p>
</div>
<!-- INCLUDE FILTER APPS-->
<div ng-include="'./template/filterApp.html'" ></div>
Product.html
<div class="jumbotron text-center">
<h1>Product Page</h1>
<p>{{ message }}</p>
p ng-hide="hide1">este parrafo se debe borrar</p>
</div>
filterApp.html
<div ng-hide="hselect1" >
<select id="select-1" multiple="multiple" onchange="RecargaSelectBU()" >
</select>
</div>
Routing.js
// create the module and name it dbApp
var dbApp = angular.module('appDataBoard', ['ngRoute']);
// configure our routes
dbApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/main', {
templateUrl : 'template/main.html',
controller : 'mainController'
})
// route for the about page
.when('/product', {
templateUrl : 'template/product.html',
controller : 'productController'
})
});
// create the controller and inject Angular's $scope
dbApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Pagina principal';
$scope.hselect1 = true;
});
dbApp.controller('productController', function($scope) {
$scope.message = 'Pagina de producto.';
$scope.hide1 = true;
});
Check this plunker link. Its working fine for me.
https://embed.plnkr.co/RZDGdnFEq1SmT7F3ncZa/
I've studied this: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names to exhaustion. I'm trying to get the following working:
...
<div ui-view="mdd"></div>
...
Which will get filled with a partial (or template or whatever you want to call it) which includes a view:
<div class="well" ng-controller="planningCtrl">
<div class="panel panel-default row">
<div class="col-xs-3">
<a class="btn btn-block btn-default btn-lg">
Add a plan
</a>
</div>
<div class="col-xs-9">
<div ui-view="plan"></div>
</div>
</div>
</div>
Debug<br />
<pre>{{state}}</pre>
<pre>{{stateParams}}</pre>
which if rendered statically would be:
...
<div ui-view="mdd">
<div ui-view="plan"></div>
</ui-view>
...
And I can't figure out how to get the ui-router to plug a partial in to the plan view when the planning template is loaded. I get the plan template just fine, but I can't get the initial view into the plan view.
Here's my config for the app:
.config(
[
'$stateProvider'
, '$urlRouterProvider'
, function(
$stateProvider
, $urlRouterProvider)
{
/*
* Make sure that a default path is defined for when no
* state matches.
*/
$urlRouterProvider.otherwise('welcome') ;
/*
* These are states which will get more complicated when I start
* to nest views.
*/
$stateProvider
.state(
'login'
, {
url: '/login'
, views:
{
'mdd': {
templateUrl: "view/login.html"
}
}
})
.state(
'planning'
, {
url: '/planning'
, views:
{
'mdd': {
templateUrl: "view/planning.html"
, controller: 'planningCtrl' // you have to specify the controller here using ui-router.
}
, 'plan#planning':
{
templateURL: 'view/plan/welcome.html'
, controller: 'planningCtrl' // you have to specify the controller here using ui-router.
}
}
})
/* .state(
'planning.welcome'
, {
views:
{
'plan#':
{
templateURL: 'view/plan/welcome.html'
}
}
})*/
.state(
'welcome'
, {
url: '/welcome'
, views:
{
'mdd':
{
templateUrl: "view/welcome.html"
}
}
}) ;
}
]) ;
and I've tried a number of variations on the views and state names with no joy. Any pointers would be appreciated. I'm probably doing something obvious wrong, but if I knew what it was, I wouldn't be asking.
I did some more poking, still puzzled, but maybe this will help somebody figure this out. Here's the HTML that gets generated including a bit of debugging information from the ui-router about what state it's in. This is the partial embedded in the mdd view but failing to have another view (a welcome page) embedded in the plan view:
<!DOCTYPE html>
<html class="ng-scope" ng-app="mdd" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<meta charset="UTF-8">
<title>My Divorce Decisions</title>
<link href="My%20Divorce%20Decisions_files/bootstrap.css" rel="stylesheet">
<link href="My%20Divorce%20Decisions_files/bootstrap-theme.css" rel="stylesheet">
<script src="My%20Divorce%20Decisions_files/angular.js"></script>
<script src="My%20Divorce%20Decisions_files/angular-resource.js"></script>
<script src="My%20Divorce%20Decisions_files/angular-ui-router.js"></script>
<script src="My%20Divorce%20Decisions_files/mdd.js"></script>
<script src="My%20Divorce%20Decisions_files/sessionSrvc.js"></script>
<script src="My%20Divorce%20Decisions_files/userSrvc.js"></script>
<script src="My%20Divorce%20Decisions_files/mddCtrl.js"></script>
<script src="My%20Divorce%20Decisions_files/loginCtrl.js"></script>
<script src="My%20Divorce%20Decisions_files/planningCtrl.js"></script>
</head>
<body class="ng-scope" ng-controller="mddCtrl">
<div class="panel panel-default">
<div class="panel-body">My Divorce Decisions</div>
</div>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li><a class="" href="#/planning" ui-sref="planning" ng-show="isLoggedIn()">Begin Planning</a></li>
<li><a class="ng-hide" href="#/login" ui-sref="login" ng-hide="isLoggedIn()">Sign In</a></li>
<li><a class="ng-scope" ng-click="logout()" ng-show="isLoggedIn()" ng-controller="loginCtrl">Sign Out</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="ng-binding" ng-show="isLoggedIn()">esplanner</a></li>
</ul>
</div>
</div>
<!-- uiView: mdd --><div class="ng-scope" ui-view="mdd"><div class="well ng-scope" ng-controller="planningCtrl">
<div class="panel panel-default row">
<div class="col-xs-3">
<a class="btn btn-block btn-default btn-lg">
Add a plan
</a>
</div>
<div class="col-xs-9">
<!-- uiView: plan --><div class="ng-scope" ui-view="plan"></div>
</div>
</div>
</div><span class="ng-scope">
Debug</span><br class="ng-scope">
<pre class="ng-binding ng-scope">{"url":"/planning","views":{"mdd":{"templateUrl":"view/planning.html","controller":"planningCtrl"},"plan#planning":{"templateURL":"view/plan/welcome.html"}},"name":"planning"}</pre>
<pre class="ng-binding ng-scope"></pre>
</div>
<div class="panel panel-default">
<div class="panel-body">
Footer
</div>
</div>
</body></html>
Looking at this: http://plnkr.co/edit/g9wgfMkD6TE3eqhDpkM1?p=info
the state information says this should be working and it isn't.
OK, after another few hours and experimentation, I got this working. One missing piece in my brain was that the index page of the application is the root for displaying views and isn't in the state table. This isn't explicitly discussed in the documentation for ui-router but strongly implied by the example here: http://plnkr.co/edit/7FD5Wf?p=preview
A second piece is that you really have to specify the controller to be used by each view. I discovered by accident that putting ng-controller tags in doesn't seem to work. I don't know if that's a bug or a feature, but it's works this way so I'll continue to do it right or wrong.
The third missing piece was that (for my application and I suspect most) the planning view I use never gets instantiated by itself, so it should have been abstract to get the template displayed and then the child state gets injected into the parent state (as ui-router says it does). Since I don't need parallel views at the moment, I could get rid of the view names in the divs and my state table turned into:
.config(
[
'$stateProvider'
, '$urlRouterProvider'
, function(
$stateProvider
, $urlRouterProvider)
{
/*
* Make sure that a default path is defined for when no
* state matches.
*/
$urlRouterProvider.otherwise('welcome') ;
$stateProvider
.state(
'login'
, {
url: '/login'
, templateUrl: "view/login.html"
, controller: 'loginCtrl'
})
.state(
'planning'
, {
url: '/planning'
, abstract: true
, templateUrl: "view/planning.html"
, controller: 'planningCtrl'
})
.state(
'planning.welcomeToPlan'
, {
url: '/welcome'
, templateUrl: 'view/plan/welcome.html'
, controller: 'planningCtrl'
})
.state(
'welcome'
, {
url: '/welcome'
, templateUrl: "view/welcome.html"
, controller: 'mddCtrl'
}) ;
}
]) ;
and things began to work.
Sorry for the wasted bandwidth and my being thick about this. ui-router is way cool and makes the design of my app a whole lot more intuitive.
I have a HTML page with different sections, which are loaded with AJAX. I have created a controller for each of the sections.
How is possible to bind the controller on a section which has been dynamically added on HTML?
I have found very complicated solutions, which i don't even know if they apply.
I need the most basic, easiest solution, something similiar with ko.applyBindings($dom[0], viewModel) for the ones who worked with KnockoutJs.
Index html
<div class="row" ng-app="app">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li>
Profile
</li>
</ul>
</div>
<div class="col-xs-9">
<div id="container"><!-- load dynamic HTML here --></div>
</div>
</div>
Dynamic HTML
<div ng-controller="profile">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
Javascript:
var app = angular.module('app', []);
app.controller('profile', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
// load new HTML
// normally this is triggered by a link / button
$(function () {
$.get("/EditProfile/Profile", function (data, status) {
$("#container").html(data);
});
});
Don't use jQuery to embed html to your container. If you use jQuery, AngularJS can't track DOM manipulations and trigger directives. You can use ng-include directive of AngularJS.
In index.html file:
...
<div id="container">
<div ng-include="'/EditProfile/Profile'"></div>
</div>
...
If you want you can make that conditional:
...
<div id="container">
<div ng-if="profilePage" ng-include="'/EditProfile/Profile'"></div>
</div>
...
With that example, if you set profilePage variable to true, profile html will be load and render by ng-include.
For detailed info take a look to ngInclude documentation.
By the way, best practice to include views to your layout by triggering same link clicks is using routers. You can use Angular's ngRoute module or uiRouter as another popular one.
If you use ngRoute module, your index.html looks like that:
<div class="row" ng-app="app">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li>
Profile
</li>
</ul>
</div>
<div class="col-xs-9">
<div id="container" ng-view><!-- load dynamic HTML here --></div>
</div>
</div>
And with a router configuration like below, profile html will be automatically loaded and rendered by ngRoute inside ngView directive:
angular.module('myapp', []).config(function($routeProvider) {
$routeProvider
.when('/profile', {
templateUrl: '/EditProfile/Profile',
controller: 'ProfileController'
});
});
I'm new to angular trying to implement routing in my angularjs app. My app does the followings
user can login via facebook
then he/she can select a link to navigate
Following is my main angularjs file (with route and facebook connect, facebook connect is working :)), My problem is , routing doesnt work..
#app.js
var app = angular.module('myApp', ['facebook', 'ngRoute'])
.config([
'FacebookProvider',
function(FacebookProvider) {
var myAppId = '<FB app ID>';
FacebookProvider.init(myAppId);
}
],
function($routeProvider) {
$routeProvider
// route for the home page
.when('/add', {
templateUrl : '../pages/add_form.html',
controller : 'addCtrl'
})
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
});
}
)
and when I add a debug pointer to line .when('/add', {control flow is not coming to that line at all.
Following is my href
<li>Add & Edit Recipes</li>
I'm following this tutorial for routing , any help would be greatly appreciated
** UPDATE **
my html
<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie" data-ng-app="myApp">
<head>
//stuff
<body class="theme-default no-main-menu main-navbar-fixed" data-ng-controller="MainController">
<script>var init = [];</script>
<div id="main-wrapper">
// some html
<ul class="nav navbar-nav">
<li class="dropdown">
Home <i class="navbar-icon fa fa-angle-down"></i>
<ul class="dropdown-menu" data-ng-show="logged">
<li>Add & Edit Recipes</li>
<li>Unpublished</li>
<li>Published</li>
<li class="divider"></li>
<li>Page 3</li>
</ul>
</li>
<li>Recipe</li>
</ul>
<div id="content-wrapper">
<div ng-view>
<%= yield %>
</div>
</div>
<div id="main-menu-bg"></div>
</div>
</body>
</html>
i need to add 2 o 3 slider to my page with angularjs by reading some json.
my code should be something like that:
<div class="wrapper">
<div id="navigation">...</div>
<div class="slider">
<ul class="painting">
<li>
<img src="img/01.jpg" height="240" width="237"/>
<h1>title</h1>
<h2>description</h2>
</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="slider">
<ul class="illustration">
<li>
<img src="img/01.jpg" height="240" width="237"/>
<h1>title</h1>
<h2>description</h2>
</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="footer"></div>
</div>
i code 2 template: one for the list of slide and one for the detail. I add ng-view to the first div.slider and when i click on the image, the details template is open inside the div.slider ..instead i need to clean all and print it inside the body.
By now, this is my index:
<div id="wrapper">
<div id="navigation">...</div>
<div id="portfolio" class="sliderCont first">
<div ng-view class="slider"></div>
</div>
<div class="sliderCont">
<div class="slider"></div>
</div>
<div class="sliderCont">
<div class="slider"></div>
</div>
<div class="sliderCont last">
<div class="slider"></div>
</div>
</div>
this is my list.html template:
<ul class="works">
<li ng-repeat="work in works">
<img src="{{work.thumbUrl}}" height="240" width="237"/>
<h1>{{work.testo1}}</h1>
<h2>{{work.testo2}}</h2>
</li>
</ul>
my controller.js:
function sliderListCtrl($scope, $http) {
$http.get('json/slider1.json').success(function(data) {
$scope.works = data;
});
}
function sliderDetailCtrl($scope, $routeParams, $http) {
$http.get('json/' + $routeParams.workId + '.json').success(function(data) {
$scope.work = data;
});
}
and in the end, my app.js:
angular.module('workList', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/works', {templateUrl: 'partials/work-list.html', controller: sliderListCtrl}).
when('/works/:workId', {templateUrl: 'partials/work-detail.html', controller: sliderDetailCtrl}).
otherwise({redirectTo: '/works'});
}]);
does anyone have any idea?
I am not sure if I understand your question, but reading the title, 2-3 ng-view, that is not possible.
You can only have one ng-view per application, which normally contains the application itself.
If you want to add partial templates, you can use ng-include which allow you to add all the templates you want inside others.
On the other hand, there is a ui-router project which have a different way to add templates to your views.