I'm getting the following error when I want to click on a link to show a single template (item):
WARNING: Tried to load angular more than once.
Link to screenshot: http://i.imgur.com/ZZDEA3J.png
Here is my templates.html code:
<div ng-repeat="template in filteredTemplates | filter:q" class="col-lg-4 col-md-6 col-sm-6 col-xs-12 portfolio-item">
<h4>
<a href="/edit/{{template.id}}" class="template-name" >{{ template.name }} </a>
</h4>
<p>{{ template.content.substring(0, 40) | htmlToPlaintext | removeNbsp }} ...</p>
<div class="row">
<div class="col-lg-6">
<div ng-repeat="license in template.licenses">{{license.name}} prijs <i class="fa fa-eur" aria-hidden="true"></i> {{license | setPrice}}</div>
</div>
<div class="col-lg-6">
<a ng-click="placeOrder(template)" class="btn btn-info" role="button"> Add to cart <span class="fa fa-cart-plus"></span></a>
</div>
</div>
</div>
app.js code:
//This will handle all of our routing
app.config(function($routeProvider, $locationProvider){
$routeProvider.when('/', {
templateUrl: 'js/templates/home.html',
controller: 'HomeController'
});
$routeProvider.when('/templates', {
templateUrl: 'js/store/templates.html',
controller: 'TemplateController'
});
$routeProvider.when('/edit/:id', {
templateUrl: 'js/store/template.html',
controller: 'GetTemplateController'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
templateController.js:
template.controller('GetTemplateController', function ($scope, $routeParams, Template) {
console.log('here');
});
I suspect that the problem comes from the app.js file. Does someone knows what I'm doing wrong? Because I really can't figure it out
Taken from here:
You'll notice that if the app can't find a file (i.e., otherwise), then it will redirect to the root, which in this case loads the templateUrl. But if your templateUrl is wrong, then it will cause a recursion that reloads index.html loading angular (and everything else) over and over.
Seems like wrong template url is what's causing this.
Related
I am having trouble to access angularjs expressions after the click event.
index.html
<div class="row">
<a href="#/company"><div class="tile col col-comp cat-a-g grow-appear" ng-click="onSelect(item)" ng-repeat="item in data" >
<p>{{item.compname}}</p>
</div></a>
</div>
The above code populate a list of company names. When I click on a company it opens company.html
company.html
<div class="comp-info col s12 grow-appear">
<span class="comp-logo-container">
<img src="images/aap3-160x70-black.jpg" />
</span>
<span class="comp-info-container">
<p><i class="far fa-envelope"></i>{{item.compemail}}</p>
<p><i class="fas fa-location-arrow"></i>{{item.compbuilding}}</p>
<p><i class="fas fa-phone"></i>{{item.compphone}}</p>
</span>
</div>
Controller (app.js)
$scope.onSelect = function($event, data) {
console.log(data);
}
File Structure
root
+--public
+--templates
+--company.html
+--index.html
+--javascript
+--app.js
+--views
+main.html
I am using ngRoute to inject index.html and company.html into main.html.
app.config(function($routeProvider){
$routeProvider
.when ('/', {
templateUrl: 'templates/home.html',
controller: 'AppCtrl'
})
.when ('/company', {
templateUrl: 'templates/company.html',
controller: 'AppCtrl'
})
});
So when I console.log() the controller, it shows the array of data but it doesn't add it to the company html document. What am I missing?
The structure of your application is a little unclear, but I think your problem may be to do with $scope. item in item in data is not accessible from the root of $scope. You can do something like this:
<div class="comp-info col s12 grow-appear">
<span class="comp-logo-container">
<img src="images/aap3-160x70-black.jpg" />
</span>
<span class="comp-info-container">
<p><i class="far fa-envelope"></i>{{selected.compemail}}</p>
<p><i class="fas fa-location-arrow"></i>{{selected.compbuilding}}
</p>
<p><i class="fas fa-phone"></i>{{selected.compphone}}</p>
</span>
</div>
Then:
$scope.onSelect = function($event, data) {
$scope.selected = data;
}
First of all, I'm sorry for a long question, but it just has to be like that. Unfortunately...
I have a couple of templates and a couple of routing logic, all linked in separate files. For some reason the template I want to load (which depends on the region selected), doesn't load its region template. It loads, if I click it second time. Please note I have tried ever solution from this topic:
Reloading current state - refresh data
Nothing worked for me.
I have managed to resolve one (another region) of them by placing "{reload:true}" inline in the html code, like this:
<a data-ui-sref="uk-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>
Now I did the same for another template and it is not working. This is my html:
<div class="btn us-btn" data-ng-controller="carCtrlUs">
<script type="text/ng-template" id="careersTplUs.html">
<div class="closer">
<span class="close-me" data-ng-click="ok()">X</span>
</div>
<uib-accordion close-others="true">
<div uib-accordion-group class="modal-body modone panel-default pull-right" is-open="false">
<uib-accordion-heading>
<p class="car-heading">Sales Department <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</p>
</uib-accordion-heading>
<ul>
<li><a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a></li>
<li><a data-ui-sref="us-crm" data-ui-sref-opts="{reload:true}">Client Relationship Manager</a></li>
</ul>
</div>
<div class="modal-body modtwo panel-default pull-right" uib-accordion-group is-open="false">
<uib-accordion-heading>
<p class="car-heading">Marketing Department <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</p>
</uib-accordion-heading>
<ul>
<li><a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Web Developer</a></li>
<li><a data-ui-sref="us-crm" data-ui-sref-opts="{reload:true}">Marketing Coordinator</a></li>
</ul>
</div>
</uib-accordion>
<div class="show-me" ui-view></div>
</script>
<button class="btn" ng-click="open()" data-ui-sref="us-intro">United States</button>
</div>
app.js:
var app = angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ui.router']);
controller, for this template:
app.controller('carCtrlUs', function($scope, $http, $uibModal) {
$http.get('json/jobs-us.json').then(function(response) {
$scope.placeholder = response.data.default;
$scope.specs = response.data.specs;
$scope.open = function() {
var modalContent = $uibModal.open({
templateUrl: 'careersTplUs.html',
controller : 'modalContentCtrlUs',
controllerAs: '$ctrl',
size: 'lg',
backdropClass: 'backdropOver',
openedClass: 'modal-opened',
resolve: {
items: function() { return $scope.specs; },
items2: function() { return $scope.placeholder;}
}
})
console.log($scope.placeholder);
console.log($scope.specs);
console.log($scope.specs.web-dev);
}
});
});
app.controller('modalContentCtrlUs', function($scope, $uibModalInstance, items, items2) {
$scope.specs = items;
$scope.placeholder = items2;
$scope.ok = function() {
$uibModalInstance.close();
}
});
factory.js:
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("us-intro", {
url:"/intro",
templateUrl: "templates/us/start.html"
})
$stateProvider
.state("us-web", {
url: "/web-developer/",
templateUrl: "templates/us/web-developer.html",
})
.state("us-crm", {
url: "/crm/",
templateUrl: "templates/us/crm.html"
})
/*next .state*/
}]);
Template:
<div ng-repeat="(k, v) in specs.webdev">
<h3>{{::v["job-title"]}}</h3>
<p>{{::v["job-body"]}}</p>
United States Apply Here:
<p>{{::v["job-apply"]}}</p>
</div>
As you can see I'm using ui-bootstrap (modal and accordion, since it is all in a modal window).
What can I do to make it refresh instantly? I'm stuck for days on this and it is frustrating... What am I doing wrong here?
EDIT: Please note that I know "::" is for one-way data binding. I've tried without it and the result is the same. I can probably resolve this by placing the data in question in the .json file, but that would really be an ugly hack.
<div ng-repeat="(k, v) in specs.webdev">
<h3>{{::v["job-title"]}}</h3>
<p>{{::v["job-body"]}}</p>
United States Apply Here:
<p>{{::v["job-apply"]}}</p>
</div>
The "::" avoid data binding to reduce digest cycle. Try to remove them.
<a data-ui-sref="uk-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>
// it should be
<a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>
I have solved this..What I wanted to do is to make the "URL" the same. I have changed the url to manifest the region by the region code, so it is working now.
For example:
UK:
$stateProvider
.state("de-web", {
url: "/web-developer-de",
templateUrl: "templates/de/web-developer.html",
})
.state("de-crm", {
url: "/crm-de",
templateUrl: "templates/de/crm.html"
})
Italy:
$stateProvider
.state("it-web", {
url: "/web-developer-it",
templateUrl: "templates/it/web-developer.html",
})
.state("it-crm", {
url: "/crm-it",
templateUrl: "templates/it/crm.html"
})
United States:
$stateProvider
.state("us-web", {
url: "/web-developer-us",
templateUrl: "templates/de/web-developer.html",
})
.state("us-crm", {
url: "/crm-us",
templateUrl: "templates/de/crm.html"
})
Although this works, I'm not happy. How can it be achieved that the templates are being loaded into the same url?
I am new to ionic and angular.js. I download this ionic collection repeat and navigation example from http://codepen.io/ionic/pen/mypxez. The initial example was working perfect with single index.html and index.js files. I tried to separate the code in controller, service, app.js and in the HTML files. I can see the collections but I am not able to see the details and navigate it. Here is the HTML file to show all collection which works:
<ion-view title="Home">
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="filter">
</label>
</ion-header-bar>
<ion-nav-buttons side="right">
<a class="button" ng-click="scrollBottom()">
Scroll To Bottom
</a>
</ion-nav-buttons>
<ion-content>
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90" collection-item-width="'100%'"
ui-sref="tab.detail({petsId: pet.id })">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
</ion-content>
</ion-view>
Here is the code of app.js:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.detail', {
url: "/detail/:petsId",
views: {
'main': {
controller:'DetailCtrl',
templateUrl: "templates/question-detail.html"
}
}
})
Here is the code of the controller which never get called:
.controller('DetailCtrl', function($scope, $stateParams, PetService) {
$scope.pet = PetService.get($stateParams.petsId);
})
...and the question-detail.html code:
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
I can view the collection and can search but I am not able to see the details by clicking them. I can see the url (http://localhost:8100/#/tab/detail/2) if i click on item 2 but i am not able to see the question- detail.html page.
Considering you are very new to this framework, or angularJS itself. I am just going to answer the question without saying anything else, but for future, please go through docs first.
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
Thanks karan for your prompt answer.. I changed two things and the
code is working now:
the html file where i declared the anchor tag. I changed the ui-sref
to href:
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90"
collection-item-width="'100%'" href="#/tab/detail/{{pet.id}}">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
my app.js file
.state('tab.detail', {
url: '/detail/:petsId',
views: {
'tab-chats': {
templateUrl: 'templates/question-detail.html',
controller:'DetailCtrl'
}
}
})
Issue is quite simple. I have been trying for hours now but just couldn't get the template to load via angularJS client side routing. Not using any server side routing.
So, used various combinations of paths. If I use "/home" in button href it straight away gives error that it couldn't find "/home". But with "#/home", I don't get that error but it still wouldn't load the template.
Any help would be greatly appreciated.
Created a new plunker: http://plnkr.co/edit/F7KoWbBuwsXOQLRPF0CN?p=preview
Template directory:
Project ---
|
|
CSS
|
|
JS
|
|
templates---
|
|
home.html
JS:
var myApp = angular.module("myApp",['ngRoute']);
myApp.controller('appController',function($scope,$http){
//mytext = 0; instantiating variables without using var gives referencing error due to "use strict";
$scope.angular = angular;
$scope.mytext = "Harsh";
$scope.formSuccess = false;
$http({method:"GET", url:"JS/carousel-data.json"}).
success(function(data) {
$scope.carouselData = angular.fromJson(data);
}).
error(function(data) {
console.log("Error loading images");
});
myApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'templates/home.html',
controller: 'appController'
})
.when('/edit', {
templateUrl: 'templates/home.html',
controller: 'appController'
});
});
HTML:
<body ng-controller="appController">
<header id="pageHeader" class="col-md-12 col-sm-12 col-xs-12 header">
<nav class="col-md-5 col-sm-6 col-xs-10 menu">
<ul class="nav nav-pills" id="menuLinks">
<li class="dropdown visible-xs">
Sapient <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Home</li>
<li>Edit</li>
</ul>
</li>
<li role="presentation" class="hidden-xs" >Home</li>
<li role="presentation" class="hidden-xs" >Edit</li>
</ul>
</nav>
</header>
<div ng-view></div>
</body>
It's rather unclear how you've set up things? Is the HTML your index or is that your home.html?
Secondly you already declare the controllers of your pages to be appController, no need to define that with the ng-controller directive anymore.
Apart from that you're loading the same template on each href, could it be that you're just seeing the same page like declared?
$routeProvider
.when('/home', {
templateUrl: 'templates/home.html', <---
controller: 'appController' <---
})
.when('/edit', {
templateUrl: 'templates/home.html', <---
controller: '**appController'<--
});
It should be noteworthy that there is a more extensive module for routing. You can find it at ui-router.
I am trying to build a basic dynamic website using Django + AngularJS but I cant for the life of me seem to get dynamic routing working. My HTML is,
<html data-ng-app="homeApp">
<body data-ng-app="homeController">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-dashboard fa-fw"></i> Home
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> second<span class="fa arrow"></span>
<div id="page-wrapper">
<div data-ng-view></div>
</div>
And my Javascript file.
var homeApp = angular.module('homeApp', ['ngRoute']);
homeApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
controller: 'homeController'
}).
when('/second', {
templateUrl: 'home.html',
controller: 'testController'
});
}]);
homeApp.controller('homeController', function($scope) {
});
homeApp.controller('testController', function($scope) {
});
But nothing loads when I click my navigation buttons
Can you tell which browser you are using? This problem may occur in Chrome.
Your code might looks ok.
Remove ngRoute from following line.
var homeApp = angular.module('homeApp', []);
If you run this in firefox, Then your problem might be solved.
Thanks