I just started changing some code from another person and tried to add a simply html with a controller. My problem is, that my html wont load and if I navigate to it .. the system simply displays: Loading...
here is the html:
<div ng-controller="MxjobdetailCtrl">
<p>this is going to be the detail view</p>
<form name="detailForm" class="css-form" novalidate>
Name:
Referenz:
Zusatzinfo:
IH - Objekt:
</form>
and here is the rather emtpy controller:
angular.module('sipApp')
.controller('MxjobdetailCtrl', function ($scope) {
});
the app.js looks like this:
$stateProvider
.state('home', {
url: "/home",
templateUrl: "views/home.html",
controller: 'HomeCtrl'
})
.state('main', {
url: "/main",
templateUrl: "views/main.html",
controller: "MainCtrl"
})
.state('test',{
url: '/mxjobdetail',
templateURl: "/views/components/mxjobdetail.html",
controller: "MxjobdetailCtrl"
})
.state('bpLogbook', {
url: '/bpLogbook',
templateUrl: 'views/business-processes/bpLogbook.html',
controller: "BpLogbookCtrl"
})
.state('bpLogbook.mxobjectList', {
url: "/mxobjectList",
templateUrl: "views/business-processes/bpLogbook.mxobject.html",
controller: "BpLogbookMxObjectCtrl"
})
.state('bpLogbook.logbook', {
url: "/:mxobjectId",
templateUrl: "../views/components/logbook.html",
controller: "LogbookCtrl"
})
;
})
and the index html looks like:
<div class="sidebar sidebar-fixed" id="sidebar">
<ul class="nav nav-list">
<li ui-sref-active="active"><a ui-sref="home">View Home</a></li>
<li ui-sref-active="active"><a ui-sref="main">View Main</a></li>
<li ui-sref-active="active"><a ui-sref="bpLogbook">Logbuch</a></li>
<li ui-sref-active="active"><a ui-sref="test">DetailView Test</a> </li>
</ul>
</div>
still, if I click on the DetailView Test link, nothing except a "Loading..." is displayed.
Does Anyone have any idea why a simple html with an emtpy controller won't load?
Thanks in advance,
It might be just a typo: note the capital R in your templateURl -- it should be templateUrl.
Also, you don't need the leading slash in your view url, and you don't need the ng-controller in your template, since you already specified the controller in the state definition.
You don't need to define ng-controller inside your html template:
<div>
<p>this is going to be the detail view</p>
<form name="detailForm" class="css-form" novalidate>
Name:
Referenz:
Zusatzinfo:
IH - Objekt:
</form>
....
</div>
Related
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?
http://plnkr.co/edit/F5jojPEBVaAIyMa0CXDw
I am having issues getting the ui-router to load a fragment into a bootstrap tab body. I linked my code example above. Please let me know if I missed something. I have looked at 10 different stack overflow examples and non of them have helped solve my problem.
I have an outer ui-view that loads the initial page fragment fine.
<div id="view" ui-view></div>
Next I have the fragment that is loaded (This is where the tabs are set up)
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li ng-repeat="tab in tabs" ui-sref="{{tab.link}}" ui-sref-active="active"><a>{{tab.label}}</a></li>
</ul>
<div id="my-tab-content" class="tab-content" ui-view="tabs"></div>
</div>
</div>
Following that I have a two fragment pages that for test only have some text in them (request-tab.html and approved-tab.html)
Finally, I have the js file that routes the views. I left off the controllers to shorten the post. They are on the plunker if needed but they shouldn't be the issue.
var app = angular.module("BRAVO", ['ui.router', 'ui.bootstrap', 'ui.bootstrap.tpls']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/requestView/request');
$stateProvider
/* Main Views */
.state('requestView', {
url: '/requestView',
templateUrl: 'bravo_home.html',
controller: 'requestCtrl'
})
/*Other states here*/
/* Tabs */
.state('requestView.request', {
url: '/request',
view: {
'tabs': {
templateUrl: 'request-tab.html',
controller: 'requestTabCtrl'
}
}
})
.state('requestView.approved', {
url: '/approved',
view: {
'tabs': {
templateUrl: 'approved-tab.html'
}
}
});
})
plunker
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li ui-sref-active="active" ng-repeat="tab in tabs"><a ui-sref="{{tab.link}}" >{{tab.label}}</a></li>
</ul>
<div id="my-tab-content" class="tab-content" ui-view="tabs"></div>
</div>
</div>
You should set your states like this:
$stateProvider
/* Main Views */
.state('requestView', {
url: '/requestView',
templateUrl: 'bravo_home.html',
controller: 'requestCtrl'
})
/*Other states here*/
/* Tabs */
.state('requestView.request', {
url: '/request',
templateUrl: 'request-tab.html'
})
.state('requestView.approved', {
url: '/approved',
templateUrl: 'approved-tab.html'
});
Then, in your bravo_home.html: <div id="my-tab-content" class="tab-content" ui-view></div>
Note that I removed the ="tabs". You can add controllers to your nested tab states as needed, for example:
// add "controller: 'requestTabCtrl'" to state
.controller("requestTabCtrl", function($scope) {
console.log('Hello Request Tab');
})
// add "controller: 'approvedTabCtrl''" to state
.controller("approvedTabCtrl", function($scope) {
console.log('Hello Approved Tab');
});
so i have been following a tutorial on how to use AngularJS ui route. I manage to get the views working just fine. However in trying to get the states to work and its just not working. I followed the tutorial exactly but for some reason my states to just show up. Hopefully someone can help me out.
Scirpt.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'views/home.html',
controller: 'homeCtrl'
})
.state('home.list', {
url: '/list',
templateUrl: 'views/partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'aboutCtrl'
})
.state('/views/about', {
// Figure out later
});
});
index.html
<!-- Page Content -->
<div id="page-content-wrapper" ng-app="routerApp">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Content Page</h1>
<p>This is where the template of the vast amount of pages will be loaded. This will keep it a single page applcatino. The
main page will inject the html that needs to be loaded to the user. While the top nav bar will allow the user to
view the rest of the website, which will be separate pages
</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
</div>
</div>
</div>
<!-- Angular Template, this is where content will be injected -->
<div ng-include="pages"></div>
<div ui-view></div>
</div>
</div>
home.html
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref=".list" class="btn btn-primary">List</a>
<a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
partial-home-list.html
<div>
<ul>
<li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>
</div>
Plunker
http://plnkr.co/edit/cN5uM1m20DHGps8cZgzt
Since you are using nested states and views ("home.list" is nested inside "home"), you need to include <div ui-view></div> in your home.html as well.
For further information: https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views
Good luck! :)
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 using angularJS with bootstrap to design a navigation on my application. I have defined a main controller and inside the main controller I call different page views using the ng-view attribute and then these individual views have their own controllers.
I am using the ng-class attribute to add the active class to my links, however, it is not working. The expression evaluates to true or false but the ng-class does not updates the class="active" on the elements.
On my home page I have the following code -
<section ng-controller="dashBoardCtrl" class="container">
<section class="row">
<h1>DME DashBoard | <small>WFM HeadCount</small> </h1>
</section>
<section class="row">
<ul class="nav nav-tabs">
<li role="presentation" ng-class="{active: {{path=='/'}}}"><a ng-href="#/">Home</a></li>
<li role="presentation" ng-class="{active: {{path=='/login'}}}"><a ng-href="#/login">Login</a></li>
</ul>
</section>
<section ng-view></section>
</section>
This is how the routes are configured on the app -
dmeDash.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/views/home.html',
controller: 'homePageCtrl'
})
.when('/login', {
templateUrl: '/views/login.html',
controller: 'loginCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
The dashBoardCtrl have the following code -
dmeDashControllers.controller('dashBoardCtrl', ['$scope','$location', function($scope, $location) {
$scope.path = $location.$$path;
$scope.$watch('path',function(n,o) {
})
}]);
Home Page Controller has the following code -
dmeDashControllers.controller('homePageCtrl', ['$scope','$location', function($scope, $location) {
$scope.$parent.path = $location.$$path;
}]);
The log in page controller has the following code -
dmeDashControllers.controller('loginCtrl', ['$scope','$location', function($scope, $location) {
$scope.$parent.path = $location.$$path;
}]);
When I click from Home page to Login page the active class is not removed from home page link and not applied to the login page as well, however, when I view the code in firebug the expressions evaluates to true or false when the page changes.
When I refresh on individual pages the ng-class works correctly but not when using the hyperlinks, please suggest.
The syntax is wrong on the template. It should be:
<li role="presentation" ng-class="{'active': path==='/'}"><a ng-href="#/">Home</a></li>
And as style guide try using the === instead of the simple == because of type coercion. Or test agains truthy or falsy