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

angular Js ui router nested views

link to example: http://goo.gl/jJBMZL
Here two states are defined. 1. home , 2. about
home has 1 view viewA
about has 2 views viewA and viewB but viewB is a sub part of about page. I want to show viewB inside of about.html page and not on index page. Is this possible. Please provide a plunkr link thanks.
what is the best practice if there are various views and each view has sub states

You can include your page 'about-sub-level.html' inside 'about.html' using ng-include like as-
<h1>I am about page</h1>
<div ng-include="'about-sub-level.html'"> </div>
Change your routing like below-
.state('about', {
url: "/about",
views: {
"viewA": {
templateUrl: "about.html"
}
}
})
Hope this may help you..

Angular partials in some views using ui-router

I'm building a MEAN application and having troubles dealing with ui-router. I have an index.html where i have the template of the entire website with a header, sidebar and a content where i place <div ui-view>. In this file I also load every javascript necessary like angular, ui-router, bootstrap, ocLazyLoad, etc.
Every partial view are placed in index.html content with ui-router states. My ui-router is configured this way:
myApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '../views/home.html',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'myApp',
files: [
'js/controllers/homeCtrl.js'
]
}]);
}]
}
})
});
Up to now I have everything controlled. My problem is this: How can i create a state login.html that does not have the header and the sidebar, because if the user is not logged in i don't want to show any options but login. How is the safest and best way to achieve this?
Thanks in advance.

My website shared the same case with you. What I did is I have 2 states: login and home. Login state will point to the login page and home state will point to home.html.
Here is example of home.html:
<div id="wrapper" ng-class='{"toggled" : $root.toggle }'>
<div ng-include="'components/sidebar/sidebar.html'"></div>
<div ng-include="'components/navbar/navbar.html'"></div>
<div id="page-content-wrapper">
<div class="container-fluid">
<!-- <ui-breadcrumbs displayname-property="data.displayName" abstract-proxy-property="data.proxy" ></ui-breadcrumbs> -->
<ui-breadcrumbs displayname-property="data.displayName" template-url="components/breadcrumb/uiBreadcrumbs.tpl.html"></ui-breadcrumbs>
<div ui-view="home"></div>
</div>
</div>
</div>
So all the states that after the user login should be the children state of home

Using ui-router for "main" layout?

I'm trying to create the 'main layout' for my page using ui-router views, but I can't seem to get it working right (various errors, controllers not getting called, templates not getting loaded).
<!DOCTYPE html>
<html ng-app="App">
<head>
...
</head>
<body>
<header ui-view="header">
</header>
<section ui-view="navigation">
</section>
<section ui-view="content">
</section
</body>
</html>
The idea is to have a state representing the "root" state for the whole site providing templates for navigation and header as well as a "root controller". Every other state loads it's content into the "content" view without affecting the others.
$stateProvider
.state("index", {
url: "/",
controller: "App.IndexController",
controllerAs: "vm",
views: {
"header#index" : { templateUrl: "app/main/header.html" }
// nav etc.
}
The app loads without any errors, but the templates as well as the controller never get invoked. Did I miss something?
I also saw that many people provide a separate "layout" view that get's loaded into an unnamed view (mostly on the <body> tag), but I consider this useless as the main index.html file is already my layout. Or: Is there a better way to achieve what I want?

There is an answer Angular UI Router - Nested States with multiple layouts with a working plunker showing layout: http://plnkr.co/edit/I0BJ09BxR7nG9kZDeEIv?p=preview
The point is that there is index.html with
<div ui-view="layout"></div>
And the root state then injects into that ui-view="layout" its own template (layout) and also injects into layout views.
So firstly the layout template:
<div>
<section class="top">
<div ui-view="top"></div>
</section>
<section class="middle">
<section class="left">
<div ui-view="left"></div>
</section>
<section class="main">
<div ui-view="main"></div>
</section>
</section>
</div>
And here is state def
$stateProvider
.state('root', {
url: '',
views: {
'layout': {
templateUrl: 'partials/layout/1-column.html'
},
'header#root': {
templateUrl: 'partials/layout/sections/header.html'
},
'footer#root': {
templateUrl: 'partials/layout/sections/footer.html'
}
}
})
And how it is working? we are using the absolute and relative target names.
View Names - Relative vs. Absolute Names
Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname#statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.
For example, the previous example could also be written as:
.state('report',{
views: {
'filters#': { },
'tabledata#': { },
'graph#': { }
}
})

How to search items from different views in Angular.js

In my home:
.state('home',{
url: '',
views: {
'': {
templateUrl: 'views/main.html',
controller:'MainCtrl'
}
...
I loop through some books and also have a simple search field to filter the items:
<input type="text" ng-model="search">
<article class="items" ng-repeat="book in allBooks | filter: search" >
This works, but I would like to add the input filed inside a sidebar, and have that sidebar in a seperate view - so that I would not have to duplicate it in every view. So in my index.html I have the following code
<div ng-include ng-controller="MainCtrl" src="'views/sidebar.html'" class="sidebar"></div>
<div class="container" ui-view></div>
Assuming that this is a good practice, is there a way to add the search input field inside the sidebar, and still have it effect the loop in the home state?
Thanks

You can make the home state a nested view of the sidebar. The ng-model that your filter is bound to in the sidebar view will then be available to the home state. The home state will delegate to the above sidebar scope when it doesn't find a search property on its own scope.
Here's my quick and dirty example:
http://plnkr.co/gmUaDLSfJxOL42EPZ9ak