Develop Reference

How to create a layout template for angular routing?

I use angular routing:
angular.module("app-test", ["ngRoute"]).config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider.when("/",
{
controller: "firstController",
templateUrl: "/views/first/index.html"
});
$routeProvider.when("/second",
{
controller: "secondController",
templateUrl: "/views/second/index.html"
});
$routeProvider.otherwise({ redirectTo: "/" });
});
But all my views of the different routes (e.g. views/first/index.html, views/second/index.html, etc.) have repeating html code like loading panels, messages, etc.
How can I outsource those common syntax in for example a layout html page that is used together with all the templateUrl views of the angular routing?
For example if every templateUrl has following html code - <div>{{message}}</div> - I would like to put this code in an extra html file which will be included in the templateUrl while the angular routing is getting the view.

You can use ng-include. But you can also use the same View (html) with different controllers:
$routeProvider.when("/",
{
controller: "firstController",
templateUrl: "/views/shared.html"
});
$routeProvider.when("/second",
{
controller: "secondController",
templateUrl: "/views/shared.html"
});
Please also note that a "views" folder doesn't scale very well. It works better to have a feature directory for each feature that contains all the pieces needed to build that feature. Shared stuff can get a bit dicey--if you know in advance you're going to share it, you can put it in a "shared" or "common" directory, but sometimes you wind up using it from the feature where it was first used.

Accessing $state outside angularjs

I have an angularjs application. The app is supposed to be a hybrid mobile app for android and iOS. I have a JavaScript file in the project which is not a part of any module. In that JavaScript file I need to call the respective template URL, either through $state or any method which loads the controller also.
For $scope I found many ways of accessing it outside that angularjs project but could not find the same for $state.

we can use java-script
window.location.href //to change location
for example:
suppose right now I am in https://www.google.co.in/
now i want to navigate to https://news.google.co.in/
we can simply write
window.location.href ="https://news.google.co.in/"
it will navigate to that page
Now in your project you might have defined your routing like this
function routeConfig($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('landing.home', {
url: '/home',
templateUrl: "app/components/homeFolder/home.html",
controller: 'homeController',
controllerAs: 'homec'
})
.state('landing.hometwo', {
url: '/home1',
templateUrl: "app/components/OnHand/Templates/OnHandhome.html",
controller: 'OnHandController',
controllerAs: 'Onhand'
})
})
Now if you are in angularjs controller you will simply use
$state.go('landing.home');// to navigate to your required location
But if you are not in angularjs Module you can change window.location to navigate to required page
for example to achieve ---$state.go('landing.home'); you can write
window.location.href ="https:complete url"
or otherwise
window.location.hash ="#/home1" //the url which is defined for that state

angularjs nested routing doesn't load layout

.state('home', {
url: '/',
templateUrl: 'index.html',
abstract:true
})
.state('home.dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
controller: 'dashboardCtrl'
})
I failed to load index.html when I visit example.com/dashboard, I was only able to get the raw html of what is inside dashboard/index.html. That's strange, because in index.html I've declared <ui-view></ui-view> within the body so I expect dashboard/index.html to be a child of index.html.
Pushed a repo of my code.

You don't actually have nested states; you simply have a primary index.html file that serves as the container for your application, its dependencies, and your views. Angular won't load your primary index.html page, the index.html page loads Angular.
So there is no need for your 'home' state to have a templateUrl. You will use nested states if, for example, your dashboard view has an inner view that can load different templates depending on a user action. See Angular UI Router's documentation for some example use cases for nested views.

You can't declare index.html as your firststate like #jakeblues said.
Try to put all the specific content from index.html in a new template :
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'homeCtrl'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
controller: 'dashboardCtrl'
})

I downloaded your code from the repo.
The main problem I am seeing is that your angular code is not being loaded when you do example.com/dashboard
app.use(express.static(path.join(__dirname, 'public')));
This makes your public folder as the folder from which the project is being loaded.
When you do example.com, Your angular code is loaded because you are responded with public/index.html file which contains angular code and it is correct.
But when you do example.com/dashboard, it is actually loading html file /public/dashboard/index.html where there is no any angular code.
Try doing alert on dashboardCtrl.js. You will get nothing because it is not being loaded. It is only included in index.html file which is not loaded at all.
Try changeing url to dashboards and remove 'home.dashboard'
.state('dashboard', {
url: '/dashboards',
templateUrl: 'dashboard/index.html',
controller: 'dashboardCtrl'
})

Angularjs routes are coming upto localhost only

I have to setup a wordpress site which was developed by another team locally. They used angularjs. I am very new to angular. I placed the wordpress files in wamp server. The name of the folder is playbook.
When I tried to access the site by using url localhost/playbook, I got a javascript error saying localhost/home not found.
I checked the javascript file and I saw routing like this
.when('/', {
controller: 'HomeCtrl',
templateUrl: '/home'
})
When I added /playbook at the start like below of templateUrl, page displayed
.when('/', {
controller: 'HomeCtrl',
templateUrl: '/playbook/home'
})
Why is this happening. Shouldn't the route take the path up to localhost/playbook?

You need to specify the extension .html for the template.Assuming your file is called home.html, replace your current code with
.when('/', {
controller: 'HomeCtrl',
templateUrl: '/playbook/home.html'
})
Regarding the usage of a more specific path.Consider this, you are coding a multi-module app in Angular.To seperate concerns, you may have a file structure that is based on each module.So my routes could look something like this. For my file, this was defined in app.js , which was inside the JS folder in my whole application.Additionally, you may choose to define routes in a seperate folder altogether. There is no reason for it to default to a particular file or folder.
foodApp.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',
{
templateUrl:'js/apps/choiceScreen/choice.html',
controller:'choiceCtrl'
})
.when('/cafe',
{
templateUrl:'js/apps/cafe/cafeScreen.html',
controller:'cafeCtrl'
})
.when('/showCafe/',
{
templateUrl:'js/apps/eachScreen/itemView.html',
controller:'itemCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);

Avoid all layouts being combined into one page?

I am trying to move over my bootstrap file on html to being implemented with meteor. I want everything to be on seperate pages, but my program is showing all my pages on one page even though I am routing the files via angular-ui-router. This is my routes.js file which I placed in the root/client folder:
angular.module("project").config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('aboutus', {
url: '/aboutus',
templateUrl: 'client/views/about.html',
})
.state('contactus',{
url: '/contactus',
templateUrl: 'client/views/contact.html',
})
.state('home', {
url: '/home',
templateUrl: 'client/views/index.html',
})
.state('services', {
url: '/services',
templateUrl: 'client/views/services.html',
})
$urlRouterProvider.otherwise("/home");
}]);
If you want to see the whole project, here it is:
https://github.com/Aggr0vatE/project

From the docs (http://docs.meteor.com/#/full/structuringyourapp):
Meteor scans all the HTML files in your directory for three top-level elements: <head>, <body>, and <template>. The head and body sections are separately concatenated into a single head and body, which are transmitted to the client on initial page load.
You need to structure your html files to take advantage of Meteor templates. The fact that you have everything in head and body tags is why it's being concatenated together into one page. I'd suggest reading some of the docs in the above link.