Develop Reference

Layout with form in angular Js

I am a beginner in angular Js and need some help / pointers. I want to create an application (SPA). Every page of an application has a header bar and in that header bar, I have a form (like search bar) where a user can add data and search. But I am not being able to approach.
How should my approach be so that this header is present in any page of my app and I must be able to search in any page. How can this be done without code repetition? I mean I dont want to create a directive and call it in every page. I want to know if there is a proper way to do it?
The app should be like Quora where the input field for question is present in any page.
Request you to not downvote it as I am naive in Angular and need some good help.
Thank you in advance.

Search for ui-router and define some states for your application, basically you have a main states which hold header and footer, and sub states that are children of your main state.
your markup would be like this:
<header></header>
<ui-view></ui-view>
<footer></footer>
and the header can contain the search form, and all sub states are loaded in mains <ui-view>

Have you checked out ui-router?
You could define a layout/root state whose template defines multiple named ui-views. The layout/root state could load the persisting elements (ex. the search input field) into one view, and child states could load the unique page content into another view.
ex. layout.html
<div class="layout">
<div class="search" ui-view="search"></div>
<div class="content" ui-view="content"></div>
</div>
ex. state configuration (in a module's config() function)
$stateProvider.state('root', {
url: '',
views: {
'main': {
templateUrl: 'layout.html'
},
'search#root': {
template: '<input type="text" ng-model="search.input" />',
controller: ['$scope', function($scope){
$scope.search = {
input: ''
};
}]
}
}
});
$stateProvider.state('root.page1', {
views: {
'content#root': {
template: '<p>This is the first page.</p>',
}
}
})
.state('root.page2', {
views: {
'content#root': {
template: '<p>This is the second page.</p>'
}
}
});
With that config, you would need to have in your main index.html:
<div ui-view="main"></div>
Plunker Demo

Routing not working in angular web app

I'm trying to route to a reset page from the login page of the webapp i'm working on but nothing happens when I click on "forgot Password". when I replace #/login with #/reset in the address bar the view changes to the reset page so I know the route is setup correctly. Any idea what i'm doing wrong?
My code:
in my login template:
<a href="#" class="forgotPassword" ng-click="forgotPassword()">Forgot Password?
In my login controller:
$scope.forgotPassword = function(){
$location.path('/reset');
}

whenever using anchor tag and want to redirect by using ng-click, do not use href
for you remove the href
now your template look like this..
<a class="forgotPassword" ng-click="forgotPassword()">Forgot Password?

Have you tried to redirect your view with the "href" tag instead of the "ng-click" function?
Forgot Password?

How to load content from all tabs from angular ui tabset even when not active

I've been stuck on this for a while, I hope someone can help.
I have four different controllers and templates. One controller has a heading, a submit button, and 3 tabs in it.For the purpose of this question I will call it the parent controller, the module for this parent controller is personManagement
The tabset in parent.html looks like this:
<div>
<h3> Main page title </h3>
<div>
<tabset>
<tab role="tab" heading="General Info" ui-sref="tab1"></tab>
<tab role="tab" heading="Detailed Info" ui-sref="tab1"></tab>
<tab role="tab" heading="Related Info" ui-sref="tab1"></tab>
</tabset>
<div ui-view></div>
</div
Each of the controller uses $stateprovider
I am able to load each html tab correctly and switch around between tabs fine either manually in each tab controller using $state.go or ui-sref. However each tab has form data in it with some of the fields being required fields and I need to be able to verify that the required fields are all filled across the three different tabs before the Submit button is enabled in the parent html.
In the html for each tab, I use ng-init on each required field input box and call a function checkAllRequiredFields in the controller for that tab which checks whether all the required fields are filled. However, it will only check the ones in the current tab.
I tried moving the checkAllRequiredFields function to the parent controller and then used a factory like this
angular.module('myApp.personManagement').factory('RequiredFieldsFactory', function () {
return { AllRequiredFields: [], checkAllRequiredFields: '' };
}); //this code is in the parent controller. The definition for the `checkAllRequiredFields` function is also declared in the parent controller..
Each time an input box is modified, the function in the parent controller is called but it always only knows about the required fields for the current tab. I am pretty sure it is because the other tabs are hidden until you navigate to those tabs and so the DOM only has the data from the current tab.
Is there a way around this so I can verify that all required field across all 3 tabs are filled so that the Submit button can be enabled?

How can I read URL parameters in AngularJS?

I'm trying to make a blog using AngularJS. The home page queries a third party service of mine that returns an array of all my articles/posts. I am displaying shortened versions of these posts on the home page, and want to have "read more" under each post that passes that post's ID through a URL parameter to another HTML page:
index.html:
<div ng-controller="blogCtrl" id="blog">
<div class="post" ng-repeat="post in posts">
<div class="header">
<h1>{{ post.fields.title }}</h1>
<p class="date">{{ post.sys.createdAt | date}}</p>
</div>
<p>{{ post.fields.body | cut:true:1600:' ...'}}</p>
read more
</div>
</div>
What do I need to do in post.html so that I can read the value of id in the URL parameter? Do I need to create a new angularJS app in post.html?
edit:
I've changed the read more link to <a href="post/{{post.sys.id}}"> and i am trying to set up the following route:
app.config(function($routeProvider){
$routeProvider
.when('/post/:postid',{
templateUrl: '/post.html',
controller: 'postCtrl'
})
});
However, clicking the "read more" link doesn't load up post.html, but instead a page that says File not found: /post/2B1K9K2DHqsYaGYcms2YeW. The route doesn't seem to be getting properly set up, since post.html isn't getting loaded.

This isn't all that hard to do, but you need to have routing set up on your app. You can create this functionality in your existing app, or separate it into a new one, it's up to you. Here are the relevant things you'll need to include in your code:
In your app include ngRoute as a dependency:
var myApp = angular.module('myApp', ['ngRoute']);
Also include routing config for your app:
myApp.config(function($routeProvider){
$routeProvider
.when('/someroute', {
templateUrl: 'someFolder/withSomeFile.html'
}
.when('/someroutewithparamters/:aftercolonisparameter', {
templateUrl: 'someFolder/post.html'
}
});
You can include a default route as well, but it's not necessary if you'd rather not. Be sure to include angular-route.js in your index.html for this to work.
Now in your controller you can simply do something like:
myApp.controller('postCtrl', function($routeParams, $scope, postFactory){
$scope.post = postFactory.functionToLoadPost($routeParams.aftercolonisparameter);
});
Obviously this will be different for your implementation based on how everything is set up, and you'll probably want to pick better names for your elements than I did, but those are the things you'll need in place to make this work. It's actually pretty straightforward.

How can I pass an id target to angular ui-sref for scroll/load at different element [duplicate]

Hey guys I am pretty new to Angular.
Users can edit profile settings in profileSettings page.
I have the following on my profile template:
<div>{{ user.name }}</div>
<a class="pull-right" ui-sref="profileSettings"><strong>Edit Name</strong></a>
...more code...
<div>{{ user.description }}</div>
<a class="pull-right" ui-sref="profileSettings"><strong>Edit Description</strong></a>
I want them to be able to click on the edit link that takes them to the Settingsprofile template. However I want when the new template renders to automatically scroll to the relevant field.
So if they click edit link for name, they are taken to the profileSettings template and automatically scrolled to edit name field. If they click the edit description link then they are also redirected to profileSettings page but automatically scrolled to edit description field.
Is there an easy way to do this with Angualar/ui-sref?

Use the optional onEnter
callback which will be called when profileSettings state becomes active to render those two functions :
$location.hash('hashValue')
will take to the element with id="hashValue" url like : /profileSettings.html#hashValue
$anchorScroll
will scrolls to that element
So your code may look like this:
$stateProvider.state('profileSettings', {
url: '/settings',
template: 'settings.html',
controller: 'ProfileSettingsCtrl',
onEnter: function(){
$location.hash('hashValue');
$anchorScroll();
}
});
Note: Remember to add $location and $anchorScrollto your dependencies.