Why does adding AngularJS to a page break it? What can I do to allow it to function correctly? Controls stop rendering. Menus stop expanding.
I am trying to divide the index.html page of an existing Bootstrap theme into partials / templates. Unfortunately, as soon as I move the HTML out of the index.html the controls on that page break.
The theme I am using is KingAdmin v1.3 from WrapBootstrap.com: https://wrapboo...
The only markup I'm adding is...
ng-app="app"
<div ng-include="'shell.html'"></div>
<script src="assets/thirdparty/angular/1.2.26/angular.js"></script>
<script src="assets/app/app.js"></script>
The shell.html contains only the portion of the body that was in the index originally...
WITHOUT ANGULAR:
WITH ANGULAR:
INDEX.HTML:
<head>
<title>Dashboard | KingAdmin - Admin Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="KingAdmin - Bootstrap Admin Dashboard Theme">
<meta name="author" content="The Develovers">
<!-- CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/css/main.css" rel="stylesheet" type="text/css" media="screen">
<!--[if lte IE 9]>
<link href="assets/css/main-ie.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/css/main-ie-part2.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/kingadmin-favicon144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/kingadmin-favicon114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/kingadmin-favicon72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="assets/ico/kingadmin-favicon57x57.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body class="dashboard">
<div ng-include="'shell.html'"></div>
<!-- Javascript -->
<script src="assets/js/jquery/jquery-2.1.0.min.js"></script>
<script src="assets/js/bootstrap/bootstrap.js"></script>
<script src="assets/js/plugins/modernizr/modernizr.js"></script>
<script src="assets/js/plugins/bootstrap-tour/bootstrap-tour.custom.js"></script>
<script src="assets/js/king-common.js"></script>
<script src="assets/js/plugins/stat/jquery.easypiechart.min.js"></script>
<script src="assets/js/plugins/raphael/raphael-2.1.0.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.resize.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.time.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.pie.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.tooltip.min.js"></script>
<script src="assets/js/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="assets/js/plugins/datatable/jquery.dataTables.min.js"></script>
<script src="assets/js/plugins/datatable/dataTables.bootstrap.js"></script>
<script src="assets/js/plugins/jquery-mapael/jquery.mapael.js"></script>
<script src="assets/js/plugins/raphael/maps/usa_states.js"></script>
<script src="assets/js/king-chart-stat.js"></script>
<script src="assets/js/king-table.js"></script>
<script src="assets/js/king-components.js"></script>
<script src="assets/thirdparty/angular/1.2.26/angular.js"></script>
<script src="assets/app/app.js"></script>
</body>
</html>
UPDATE 2014-11-25
I've confirmed this is not me. I had a friend attempt to convert a single page in the template to Angular partials using ng-include tags and setting it up behind a proper Node.JS server. He had the same results. As soon as Angular renders the first page, tons of functionality breaks. the expand/collapse logic everywhere stops working. Most of the controls stop rendering properly.
NOTE
Someone mentioned that the problem might be caused by the use of ng-include tags and partials WITHOUT the partial file having a contoller. The side bar, top bar, breadcrumb are all being included as static HTML / Jade files via an ng-include. A route is passing in the controller for the main body, however the problems exist within this area as well.
Here is a link to the template on the developer's site:
KingAdmin Dashboard Theme
And here is how it currently looks:
Quick look at the modifications from the index.html page:
PARTIALLY RESOLVED:
Not sure if this would be considered a hack. Someone with more knowledge of jQuery and Angular could / should chime in to tell you if this is safe.
STILL UNRESOLVED:
This seems to work while the page is being loaded for the first time. It does NOT work if you navigate away from the page and back again (using the back button, for example). I believe this is happening due to Angular injecting the body and NOT re-rendering the entire page... or the scripts. There's probably something that can be done within each template that uses jQuery (re-init somehow, etc.).
There seem to be tons of questions / examples discussing similar problems with the DOM, jQuery, and using timeouts to correct them:
AngularJS: How can I run a directive after the dom has finished rendering?
The entire fix is in with your common resource scripts, king-common.js, etc.. They each have several rendering functions that appear to be called up front, however the DOM is still being rendered.
Example:
$(document).ready(function(){
$('.main-menu .js-sub-menu-toggle').click( function(e){
[snip]
$li.find('.sub-menu').slideToggle(300);
});
By wrapping each of these operations in a setTimout you postpone rendering until after the DOM is modified:
$(document).ready(function(){
setTimeout(function(){
$('.main-menu .js-sub-menu-toggle').click( function(e){
[snip]
$li.find('.sub-menu').slideToggle(300);
},1000);
);
These have been moved to the tail end of your scripts.jade / scripts.html file. This was done initially as an attempt to delay the firing of these methods, so this might be unnecessary. Still, that's part of how we arrived at a functioning template.
Your problem is Bootstrap is not watching for the newly created elements on your page that angular compiles for you. You can create directives that can call the the Bootstrap jQuery method that add the Bootstrap bindings to your element, such as ($('.dropdown').dropdown()).
There is a wonderful AngularJS library that replaces that is an angular agnostic rewrite of bootstrap.js that may fix this for you: http://angular-ui.github.io/bootstrap/
For a quick hack, if you want all your elements with the .dropdown class to use Bootstrap dropdown, you would create a directive like this.
angular.module('app')
// Directives: https://docs.angularjs.org/guide/directive
.directive('dropdown', [
// Use window dependency
'$window',
// Returns a directive
function ($window) {
return {
// Restrict to attribute, or class name so can be used like so:
//
// <a class="dropdown btn btn-primary">Dropdown button</a>
// or
// <a dropdown class="btn btn-primary">Dropdown button</a>
restrict: 'AC',
link: {
post: [
// This dependency gives you the element with
// the directive wrapped as a jQuery object
'$element',
function ($element) {
$element.dropdown();
}
]
}
};
})
I think you should reconsider your dependencies. The elements broken in your UI seems to require jquery, for instance: jquery.easypiechart.min.js
At https://docs.angularjs.org/misc/faq you can read:
Does Angular use the jQuery library? Yes, Angular can use jQuery if
it's present in your app when the application is being bootstrapped.
If jQuery is not present in your script path, Angular falls back to
its own implementation of the subset of jQuery that we call jQLite.
Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer
might work correctly with Angular but we don't guarantee that.
Notice that angular requires jQuery 2.1 or above, whilst Bootstrap require the latest 1.1.x version of jQuery (Bootstrap does not support jQuery 2+ due to jQuery 2 does not support IE8).
After reading the above you should also read:
Does one need jQuery when using Twitter Bootstrap with Angular.js?
https://github.com/angular-ui/bootstrap/issues/2765
Related
I am trying to learn to create non modal popup using angularjs that will allow to navigate to other webpage when it is still open and it should not blur the window. I found http://yong2579.github.io/ link.
But window is getting blur
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<title>Tabindex</title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
$(function () {
var dialog = new BootstrapDialog({
message: 'Custom tabindex.',
tabindex: 10,
modal: false,
title: 'Modeless draggable dialog',
draggable: true,
animate: false
});
dialog.open();
});
</script>
</body>
</html>
In the context of angular if you are making DOM manipulations (adding or removing elements from the view or modifying their properties) then you should use directives. For bootstrap modals and other interactive bootstrap elements check out the ui-bootstrap module with lots of directives including modal:
https://angular-ui.github.io/bootstrap/#!#modal
Modal's are sort of a special case in angular where it makes the most sense to have a service handle opening/closing modals but the docs there should make it pretty clear how to use if not search here or post a new question with issues.
When using ui-bootstrap you just include the bootstrap.css and ui-bootstrap-tpls.js file (not the bootstrap.js or jquery.js). If you don't include jQuery before angular, angular will load jQuery lite (see docs on angular.element() for details).
Given an empty document with just the bare essentials, loading js files and stylesheet:
<!doctype html>
<html ng-app="labApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="/static/lab.js"></script>
<link rel="stylesheet" href="/static/local.css" />
<link rel="stylesheet" href="/static/superhero.min.css" />
</head>
<body ng-controller="labController">
</body>
</html>
And an empty controller in lab.js:
angular.module('labApp', [])
.controller('labController', function() {
var lab = this;
});
How do I go about loading a partial view into the body?
Am I supposed to do things like that manually, using jQuery, or is there some hidden facility in angular to load partials?
You can do this by rendering different views with ui-router: https://github.com/angular-ui/ui-router
When loaded into your application, you can include it like this in
angular.module('app', [ui.router])
When you follow the documentation it is pretty easy to setup different routes. Good luck!
I have tried to implement the latest version of Lightbox as of 30 June 2015. I have loaded the js files (jquery.min.js and lightbox.js in that order). I also have added the css line to my head section as well. I have even tried loading lightbox.min.js
I have added the data-lightbox attribute to the image ink. When I click on the link to show the image, all that happens is I go to the image itself. It is like I opened the image from my local machine in a browser. No lightbox effect or features at all.
The page in question can be seen at http://www.kilajager.com/new/bs.php
The 5 images side by side at the top are my links to the full image.
Below are snippets of the code:
<head>
<title>Kila Jager Modeling Portfolio | Portfolio</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="all">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js"></script>
<script src="js/lightbox.js"></script>
</head>
<a href="images/bs02.jpg" class="b-link-stripe b-animate-go thickbox play-icon" data-lightbox="bonnie" data-title="Image 02">
<img src="images/bsslid2.png" class="img-responsive" alt="" />
</a>
The simple instructions in Lightbox 2 website are currently inadequate (as of now, they have been updated to be adequate).
Lightbox 2 will not work with versions of jQuery below 1.7. And the placement of the <script> tag matters.
Use jQuery 1.7 or above.
If you don't already use jQuery in your page, simply use lightbox-plus-jquery.min.js instead as it includes jQuery 2.1.4.
If you already use it, upgrade to jQuery 1.7 or above and test out your existing jQuery-based code and plugins. Hopefully nothing else breaks =)
Put the Lightbox 2 <script> tag (for the JavaScript file) at the end of the page, just before the body closing tag (</body>).
The <link> tag for the CSS can remain in the <head> tag.
I've inherited an angular project, and it's having problems loading the ui-bootstrap-tpls modules.
For each directive it's trying to use from bootstrap, I get something similar to the following:
Error: [$compile:tpload] Failed to load template: template/datepicker/popup.html
I've read about the need to include the tpls version of the ui-bootstrap lib. (ui-bootstrap-tpls-0.10.0.js (instead of ui-bootstrap.js)), but having done that as well as every permutation of module injected into my module as a dependency (ui.bootstrap, ui.bootstrap.tpls, template/datepicker/datepicker.html'), but I can't beat it.
Here're my includes:
<html class="no-js" ng-app="hiringApp">
<head>
<meta charset="utf-8">
<title>#ViewBag.Title</title>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="layout" content="IRLayout">
<!-- styles IRLayout-->
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css">
<!-- BootStrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- font-awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="#Url.Content("~/content/css/layout.css")">
<link rel="stylesheet" href="#Url.Content("~/content/css/normalize.css")">
<link rel="stylesheet" href="#Url.Content("~/content/css/main.css")">
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/css/Upload.css")">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/css/styles.css")">
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/css/site-specific.css")">
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/css/rating.css")">
<!-- Upload -->
#*<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/Upload.css")">*#
<!-- Header Scripts-->
<!-- Jquery & Jquery UI -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="#Url.Content("~/Scripts/Vendor/underscore-min.js")"></script>
<!-- BootStrap -->
<!-- Validate -->
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<!-- Analytics -->
<script src="//cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/graphael/0.5.1/g.raphael-min.js"></script>
<!-- Angular -->
<!--
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="#Url.Content("~/Scripts/app.js")"></script>
<script src="#Url.Content("~/Scripts/controllers.js")"></script>
<script src="#Url.Content("~/Scripts/directives.js")"></script>
<script src="#Url.Content("~/Scripts/filters.js")"></script>
<script src="#Url.Content("~/Scripts/services.js")"></script>
<script>
angular.module("hiringApp").constant("$userProvider", #Model.User.SystemRoles);
angular.module("hiringApp").constant("$jobProvider", '');
</script>
<!-- Upload -->
<script src="#Url.Content("~/content/js/plupload.full.js")"></script>
<script src="#Url.Content("~/content/js/UploadImage.js")"></script>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
<script src="~/Content/js/audio/irAudioRecorder.js"></script>
#RenderSection("script", required: false)
</head>
Here's my app module:
var hiringApp = angular.module('hiringApp', ['ui.router', 'ngAnimate', 'ngResource', 'filters', 'ui.bootstrap', 'ui.bootstrap.tpls']);
Here's the error:
GET http://localhost:54720/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:8539
7Error: [$compile:tpload] Failed to load template: template/tooltip/tooltip-popup.html
http://errors.angularjs.org/1.2.22/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:78:12
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:6900:17
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:8098:11
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11688:76
at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12658:28)
at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12470:31)
at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12762:24)
I just wanna post my solution for this error.
include the tpls version of ui.bootstrap
src="assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"
apparently the none tpls version doesn't include those templates.
when you inject it into you app, make sure you inject ui.bootstrap and not ui.bootstrap.modal
angular.module("shiftPlanner", ['ngResource', 'ngRoute', 'ui.bootstrap']);
for more info rtfm ;)
I had a very similar issue and was able to resolve it thanks to your comment, Glenn. Therefore I would like to wrap this up into a more general answer that is hopefully helpful to many others:
If UI Bootstrap templates fail to load and you have already double-checked that you have included the right module from the right JS file (and only it) into your app, check if the template cache is disabled/broken for some reason.
There are multiple ways to disable or clear the cache, and one may not be aware that this is happening at all.
In my case modal dialogs weren't opening with error messages like Error: [$compile:tpload] Failed to load template: template/modal/backdrop.html.
I had started off from a great template project downloaded from the JBoss Developer page, which had the following lines included in the app definition:
var xpApp = angular.module('kitchensink', ['ui.bootstrap',...])
.config(... {
/*
* Use a HTTP interceptor to add a nonce to every request to prevent MSIE from caching responses.
*/
$httpProvider.interceptors.push('ajaxNonceInterceptor');
...
.factory('ajaxNonceInterceptor', function() {
// This interceptor is equivalent to the behavior induced by $.ajaxSetup({cache:false});
var param_start = /\?/;
return {
request : function(config) {
if (config.method == 'GET') {
// Add a query parameter named '_' to the URL, with a value equal to the current timestamp
config.url += (param_start.test(config.url) ? "&" : "?") + '_=' + new Date().getTime();
}
return config;
}
}
});
Once I removed the interceptor, the modal dialogs were showing.
I also had this issue but I was only using the tpls version of ui.bootstrap.
In my case the issue was a cache busting module ngCacheBuster.
In the network tab I could see there was cachebuster parameter at the end of the resource call:
/template/window.html?cb=4889764132
In this case, bootstrap did not look into its templatecache but decided to load the file from this location, which of course did not exist.
I solved this by whitelisting all calls to the templates folder from the cachebusting mechanism.
I hope this will be helpful to anyone experiencing this problem and using cachebusting.
Include ui.bootstrap.tpls right below ui.bootstrap
make sure you have included not only ui-bootstrap.js, as well ui-bootstrap-tpls.js
For me it was the interceptor that was producing the error i had to add the below code to make it ignore the calls that are not made to my api:
if (config.url.indexOf('templates/') == 0 || config.url.indexOf('uib/') == 0)
{
console.log('ignoring '+config.url);
return config;
}
Yep. I solved this issue like this.. and by including ui-bootstrap-tpls.js
angular.module('mainModule', ['ui.bootstrap', 'sub-module']);
angular.module('sub-module', ['ui.bootstrap.modal']);
However i am not sure if other cases like template-caching will cause the issue or not. At least not for me..
I have a table which should be filtered depending on the url.
This is my module::
angular.module('myApp', ['pipelibservice']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/pipes/:pipeID', {templateUrl: 'partials/wizard.html', controller: PipeListCtrl});
}]);
In my template I have a list with a href that should filter the table:
<li ng-repeat="pipe in pipes">
<a href='#/pipes/{{ pipe.code }}'>{{ pipe.code }} - {{pipe.title_en}}</a>
</li>
This is my index.html
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.2/angular-strap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="lib/angular/angular-resource.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Problem is, the entire page reloads when I hit the link. I only want the url to change so my table is filtered. How do I fix so the page is not reloaded?
Update:
I've narrowed it down to the rest API call. If i replace the rest call with hardcoded values (from the orginal rest-call) then it works. Any idea what can be wrong?
you cant normally use $route and not refresh the page. but in your case i would just use a filter http://docs.angularjs.org/api/ng.filter:filter
<li ng-repeat="pipe in pipes | filter: pipeID">
<a href='#/pipes/{{ pipe.code }}'>{{ pipe.code }} - {{pipe.title_en}}</a>
</li>
dont forget to put in ctrl $scope.pipeID = $routeParams.pipeID
P.S. i wrote a post explaning a bit simpler Ben Nadels idea (which is awesome) and its a way to use $route without refreshing http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial-basic_20.html
the point is that using $route with templateUrl and/or controller creates new instances of the controller and view, and by ur description u dont want it. so u can drop the templateUrl controller and send a custom parameter and in the app use ngSwitch to switch ngInclude and u manage it all with 1 controller
As per ngHref documentation, you should use ng-click to prevent the page reload:
{{ pipe.code }} - {{pipe.title_en}}
You would need to create the goToPipe function in your controller, with something like:
$scope.goToPipe = function (pipe_code) {
$location.path("/pipe/" + pipe_code);
};
The only solution I've found to this problem so far is this:
http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm
Take a look at their demo:
http://bennadel.github.io/AngularJS-Routing/#/pets/cats/10/medical-history
Notice the tabs BACKGROUND, DIET, MEDICAL HISTORY and how the do not refresh the page.
However this solution is very complex and involves and employing a lot of non-native to angular stuff.
I'm still looking to find a simpler solution to this simple problem.