I am working on a project where I have a created a directive for a multi step form. Essentially trying to replicate this. The project layout has a header,navigation, a content page (which includes a ui-view) depending on the tab selected on the navigation tab.
Now there is a form tab which when clicked routes to a HTML page which includes this form directive. The directive calls the template (which includes another ui-view) loads the html content but failed to load the nested state. How do I set the default state?
The project directory looks like
src
main
app
directive
formData
formData.js
formData.tpl.html
formInterest.tpl.html
formProfile.tpl.html
formFinal.tpl.html
views
header.html
leftNavigation.html
appRun.html
app.js
index.html
The app.js file has states defined as
$stateProvider
.state('landingPage', {
url: '/landingPage',
templateUrl: 'views/landingPage.html'
})
.state('appRun', {
url: '/appRun',
templateUrl: 'views/appRun.html'
})
.state('appRun.first', {
url: '/first',
templateUrl: 'directives/formData/formProfile.tpl.html'
})
.state('appRun.second', {
url: '/second',
templateUrl: 'directives/formData/formInterest.tpl.html'
})
.state('appRun.third', {
url: '/third',
templateUrl: 'directives/formData/formFinal.tpl.html'
});
The appRun.html looks like
<form-data></form-data>
The formData.js directive looks like
var formData = angular.module('formData',[]);
formData.directive('formData',function(){
return {
restrict: 'EA',
scope: {},
replace: true,
link: function($scope, element, attributes){
},
controller: function($scope,$attrs,$http){
$scope.processForm = function(){
console.log("processFrom");
}
},
templateUrl: 'directives/formData/formData.tpl.html'
}
});
the formData.tpl.html looks like
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<h2>Let's Be Friends</h2>
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".first"><span>1</span> Profile</a>
<a ui-sref-active="active" ui-sref=".second"><span>2</span> Interests</a>
<a ui-sref-active="active" ui-sref=".third"><span>3</span> final</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div ui-view></div>
</form>
</div>
<!-- show our formData as it is being typed -->
<pre>
{{ formData }}
</pre>
</div>
</div>
When I click on appRun state it shows up the content in formData.html but ui-view doesn't show a default state. How do I add a default state such that when the formData.html is loaded it also shows appRun.first state?
Use
<ng-include="'directives/formData/formProfile.tpl.html'"/>
Inside <div ui-view></div>. This will be the default page.
The other option:
Mark state appRun abstract.
Whenever linking to appRun link to appRun.first instead.
Related
I am attempting to have the page go to a div section of the page based on what they click. I have the div for each section id'd with the proper tag. I have done a test where I can load the page and type url.com/services#insertidhere and it will go to the correct location. The issue is when I try to implement it in the state it won't go to the location. It just goes to the page normally even though the URL shown is correct.
HTML Index Snippet
<div ng-repeat="x in blue.services">
<div class="wrapIMG">
<img src="{{x.icon}}" />
<img class="clone" src="{{x.icon}}" />
</div>
<h4>{{x.title}}</h4>
<hr/>
<p>{{x.text}}</p>
<a ui-sref="services({id: x.title})" class="button2">About This</a>
</div>
myapp.js Snippet
app.config(function($stateProvider){
$stateProvider
.state('index', {
url:"/",
templateUrl: 'main.html',
data: {
cssId: 'home'
}
})
.state('services', {
url: "/services/#:id",
templateUrl: 'services.html',
data: {
cssId: 'services'
}
})
});
Services HTML Snippet
<section class="no-padding" style="" id="[id equal to x.title]"> ...</section>
<section class="no-padding" style="" id="[id equal to x.title]"> ...</section>
<section class="no-padding" style="" id="[id equal to x.title]"> ...</section>
I believe the issue has to be with .state URL but it shows correctly in the URL but it just isn't going to the location.
Angular uses the # in URLs for page routing (so do many other SPA frameworks).
To anchor the link to a specific id on a page, use the $anchorScroll service.
Example:
<div id="scrollArea" ng-controller="ScrollController">
<a ng-click="gotoBottom()">Go to bottom</a>
<a id="bottom"></a> You're at the bottom!
</div>
<script>
angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}]);
</script>
$scope.toPage = function(){$state.go('index');}
Did you try this?
I've pretty much used the top solution from UI-Router multiple named views not working with my angular app, but my ui-view does not seem to be updating, but rather just disappearing altogether. There must be some really small detail I'm missing that I've been stuck on for a long time...
I have an index.html page, with a [div ui-view=""] that is replaced on the home state. This ui-view (frontpage.html) has another [div ui-view="search-result"] which I'm hoping gets updated (change text to "successful template replacement") from a state change, but when the state changes, the entire [div ui-view=""] from index.html disappears instead when the search button is clicked.
All relevant script tags are included in my index.html.
index.html:
<body ng-app="...">
<div class="container">
<div ui-view=""></div>
</div>
app.js:
angular.module('...', [ 'ui.router','ui.bootstrap']).
config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('main', {
url: "/",
templateUrl: "/app/states/frontpage/frontpage.html"
})
.state('search', {
url : "/search/:query",
views: {
'search-result#search': {
template: 'successful template replacement'
}
}
}).run(function(){});
frontpage.html:
<div class="row" ng-controller="MainController">
some stuff here
<div class="col-xs-9">
<input type="text" class="inline" ng-model="searchText" placeholder="Search..."></input>
<button class="btn btn-default inline" type="button" ng-click="search()">Search</button>
<div ui-view="search-result"></div>
</div>
</div>
mainCtrl.js
angular.module('...')
.controller('MainController', ['$scope','$state', function($scope,$state) {
$scope.searchText;
$scope.search = function(){
console.log('going to state search with searchText: ' + $scope.searchText);
$state.go('search',{query:$scope.searchText});
}
}]);
In case that 'search' state should go to template of the 'main' ... it must be its child (check the parent: 'main')
.state('main', {
url: "/",
templateUrl: "/app/states/frontpage/frontpage.html"
})
.state('search', {
parent: 'main', // parent is main, named view will find its target
url : "/search/:query",
views: {
'search-result#search': {
template: 'successful template replacement'
}
}
}
I'm trying to build accordion style navigation for an app with Meteor and Angular JS. I have a list of articles like so:
State:
$stateProvider
.state('articles', {
url: '/articles',
template: '<articles></articles>'
});
<articles>:
<div class="article-entry" ng-repeat="article in articles.list" slug="{{article.slug}}">
<div class="inner">
//...
<div ui-view="{{article.slug}}"></div>
<a ui-sref="article.content({slug: article.slug})">View article</a>
</div>
</div>
And then the article content:
$stateProvider
.state('articles.content', {
url: '/:slug',
template: '<content></content>'
});
<content> is just, you guessed it, the article content.
Is it possible to get <content> to show up in the ui-view associated with it when someone visits the articles.content state? How would I do this?
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! :)
I am using ui-router for nested states & views. When I click on the link, the URL changes to the URL for the substate, but the template does not load.
For example, when the URL changes to the substate project/settings, the corresponding template project.settings.html is not loading.
Here is an SSCCE courtesy of Plunkr
Below is my code as well:
app.js
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider
.state('project', {
url: "/project",
views:{
"content":{templateUrl: "partials/project.html"},
"header":{templateUrl: "partials/header"}
}
})
.state('project.settings', {
url: "/settings",
views:{
"content":{templateUrl: "partials/project.settings.html"},
"header":{templateUrl: "partials/header"}
}
})
$urlRouterProvider.otherwise("/")
});
/* cheching whether the user is authentic or not*/
myApp.run(function($rootScope,$location,$cookieStore,validateCookie,$state) {
$rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState){
if($cookieStore.get('user')){
validateCookie.authService(function(result,error){
if(!result){
$location.path("/");
}else{
$state.go('project.settings');
}
});
}
else{
$location.path("/");
}
});
});
index.html
<div ng-controller="userController">
<div ui-view="header"></div>
<div class="container" ui-view="content"></div>
</div>
project.html
<div ng-controller="userController">
<div class="details">
<a ui-sref=".settings" class="btn btn-primary">Settings</a>
</div>
</div>
project.settings.html
<h1>Project Setting -State test</h1>
Your nested project.settings state needs to address the view in the higher state explicitly using an '#' suffix, ie.:
.state('project.settings', {
url: "/settings",
views:{
"content#":{templateUrl: "partials/project.settings.html"},
"header#":{templateUrl: "partials/header"}
}
})
See more details here https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names
First of all change file name project.settings.html in templateurl and file name to projectSettings.html (remove dot).
.state('project.settings', {
url: "/settings",
views:{
"content":{templateUrl: "partials/projectSettings.html"},
"header":{templateUrl: "partials/header"}
}
})
Add two divs in the project template to load the sub pages (header abd projectSettings)
Note: Any content in this divs will be replaced with the page loaded here.
project.html
<div ng-controller="userController">
<div class="details">
<a ui-sref=".settings" class="btn btn-primary">Settings</a>
</div>
<div ui-view="header">( Project Page header will replace with projectSettings header )</div>
<div class="container" ui-view="content">( Project Page content will replace with projectSettings Content )</div>
</div>
I had the same issue and the solution was to place ui-view to your parent's template. Because your partials also need a too, if they will be loading a template from a child state.
See here https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading--showing
If using nested views with UI-router, be sure to add ui-view into the html of the parent page and include specific named views.
I had the same issue, the solution was; open the project.html file (which is the parent page) and wrap everything within <ui-view>
So, replace these:
<div ng-controller="userController">
<div class="details">
<a ui-sref=".settings" class="btn btn-primary">Settings</a>
</div>
</div>
with these:
<ui-view>
<div ng-controller="userController">
<div class="details">
<a ui-sref=".settings" class="btn btn-primary">Settings</a>
</div>
</div>
</ui-view>
and you will be good to go ;)
Use ui-sref="project.settings" for link in project.html template.