I am having trouble with my Angular JS ui-router and every question I have found on here shows a solutions I have already tried.
In my ui-view-tag my actual template is not displayed.
<body ng-app="myApp">
<div class="row">
<div class="col-md-6 col-md-offset-2">
<ui-view></ui-view>
</div>
</div>
</body>
This is my app.js
angular.module('myApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'MainCtrl'
})
$urlRouterProvider.otherwise('home');
}])
Thank you very much everybody, I would really appreciate a short feedback on that.
The $urlRouterProvider otherwise() accepts the url path you want to redirect to. Therefore, you need to change:
$urlRouterProvider.otherwise('home');
To:
$urlRouterProvider.otherwise('/');
Related
My goal is doing routing page on web app.
I have writted 2 pages: index and home.
In index page, there is ng-view which is calling home page.
But browser doesn't show any home page.
Maybe I'm mistake to write script.js...
index.html:
<body ng-controller="productsCtrl">
<header ng-include="'header.html'"></header>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view>
</div>
</div>
</body>
scripts.js:
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: '../templates/home.html'
})
.otherwise({
redirectTo: '/home'
});
}]);
Someone can help men about this. Thanks
You have to use ng-app directive
<body ng-app="myApp">
I'm using ngRoute to do the routing of my AngularJS application (myApp) but I have a problem: I don't know how to NOT APPLY my index.html design (with all my sidebars) to my login.html page, which seems to be applied by default if it is defined as a view. I want a simple design for my login.html page: only two fields to fill out, without the design of my index.html, which is applied to all the views in myApp. Thereby, I don't know how to do my routing to accomplish such task. Thank you very much.
<-- This is a sample of how I do my routing in myApp (for only one view - "/view1") -->
Sample of app.js:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'ngResource',
'ui.bootstrap',
'ngCookies',
'myApp.view1',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
For each view there is a .js file associated where I defined its routing and controllers. For instance, for view "/view1" - view1.js:
'use strict';
angular.module('myApp.view1', ['ngRoute', 'ngResource'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope', function($scope) {
// something
}]);
And a sample of my index.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<script src="view1.js"></script>
<-- MORE SCRIPTS ARE LOADED -->
</head>
<body class="hamburg" ng-controller="MasterCtrl">
<-- SIDEBARS ARE DEFINED -->
<div id="content-wrapper">
<div class="page-content">
<!-- Main Content -->
<div class="row">
<div class="col-xs-12">
<div class="widget">
<div class="widget-body">
<div ng-view></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Given the situation above looks like you want two page layout (page design or page template), the first one is now used in index.html, and the second one you want to use in login.html which just has two fields to fill out. So angular-ui/ui-router (doc url: https://github.com/angular-ui/ui-router/wiki) could be the solution to this issue.
The idea behind that is ui-router has a very powerful tool named ui-view which you can see it as a layout or template. So when the path is on any page other than login page like /index or /home use one ui-view, and on /login page then use another different ui-view.
For a rough example:
index.html page:
<html>
<head></head>
<body>
<div ui-view="layout"></div>
</body>
</html>
I assume you will reuse the head part, so just wrap every thing from the body in the original index.html and put into the new index.html. Same to the login page login.html.
config file:
$stateProvider
.state('index', {
url: '/index',
views: {
layout: {
templateUrl: "/path/to/index.html"
}
},
controller: 'indexController'
}
.state('login', {
url: '/login',
views: {
layout: {
templateUrl: "/path/to/login.html"
}
},
controller: 'loginController'
})
So what does the code above do is very similar to what you did with $routeProvider, it defines on which url use which controller and to load which view.
Hope this can help you, if any question let me know please.
You need to create your login page as a diferente ngApp, store your sesion on the localSotarge in case of a successfull login and then redirect to you main ngApp.
In your main ngApp, validate if a session exists in the localStorage and redirecto to the loginApp if it dont.
I know it sounds a bit like overdoing stuff, but I have not found any other solution in my 3 years working with AngularJS. Now, keep in mind that this is necesary because you need to NOT TO APPLY your index.html, and the only way to do that is using another ngApp.
Routing is used for injecting views in angular SPA. What I get from from your question is you need a login dialog.
For that you may look ngDialog or uibDialog
In your case you need to load new layout. I understand, for login and for application there is mostly different layout. This operation is equal to redirecting page to new location. With new angular app and controllers for login. You can use:
$window.location.href="new/layout/template".
Read more # Angular Dev Docs.
I use ui-router (states) for my routing:
$urlRouterProvider.otherwise('/Home');
$stateProvider
.state('home', {
url: '/Home',
templateUrl: '/Home/Home',
controller: 'MainCtrl'
})
.state('posts', {
url: '/Posts',
templateUrl: '/Home/Posts',
controller: 'PostCtrl'
});
$locationProvider.html5Mode(true);
In html I have something like this:
<html>
<head>
<base href="/" />
<!--render scripts -->
<title>My Angular App!</title>
</head>
<body ng-app="flapperNews" ngcloak>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ul>
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="posts">Posts</a></li>
</ul>
<ui-view></ui-view>
</div>
</div>
</body>
</html>
When I use my menu links (Home, Posts) the app works fine and updates my view in <ui-view></ui-view> as needed. When I use the address bar after the first download to change the url to localhost:port/Posts, the app refreshes the page.
Keep in mind that I removed # from links.
Why does angular not know about my routes?
Or how can I set client-side menu with angular?
Angular Knows about your route but you webserver may thinks he need to show the index.html page in the map posts
Try to set your html5Mode to false and see if it still happens
the this link and look at the part about Hashbang and HTML5 modes
and especially the last row requires server-side configuration: Yes
I'm writing a web app using phonegap and Ionic. I want to write each HTML page in a different file but I cannot manage to do this. In Ionic API they show only the following example:
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
Which is a HTML code written inside a <script> tags, in the index.html page.
I tried to create a different file with the name home.html for instance, and received the following error:
XMLHttpRequest cannot load file: path-to-the-file. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
My js is looks like this:
angular.module('myApp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
// Set and define states
$stateProvider
.state('/', {
url: '/',
templateUrl: 'index.html'
})
.state('home', {
url: '/home',
templateUrl: 'templates/home.html'
});
$urlRouterProvider.otherwise("/");
})
and html page:
<ion-view title="home">
<ion-content>
The content of the page
Register
</ion-content>
I see the index.html page with the register link, but clicking it doesn't execute anything.
It seems like only when it is wrapped in a <script> tags it works.
Any suggestions?
Get rid of the script tags. Ionic does this for you:
<script id="templates/home.html" type="text/ng-template">
And you can't use ui-router by loading index.html as the base state, as index should have the first ui-router html tag. You need to include in index.html, and create some sort of menu file if you want to have a base/abstract state, such as the following:
angular.module('myApp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
// Set and define states
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html'
})
.state('app.home', {
url: '/home',
templateUrl: 'templates/home.html'
});
$urlRouterProvider.otherwise("/app");
I wanted to animate my application so I injected ngAnimate but now none of my views are displaying:
var spApp = angular.module('spApp', ['ngRoute','ui.bootstrap', 'ngAnimate'])
.config(function($routeProvider, $locationProvider){
var rootUrl = '/Style%20Library/projects/spDash/app/partials/';
$routeProvider
.when('/home',
{
templateUrl: rootUrl+'home.html'
})
.when('/userView',
{
templateUrl: rootUrl+'userView.html',
controller: 'userCtrl'
})
.when('/groupView',
{
templateUrl: rootUrl+'groupsView.html',
controller: 'groupCtrl'
})
.when('/sitesView',
{
templateUrl: rootUrl+'sitesview.html',
controller: 'sitesCtrl'
})
.otherwise({redirectTo:'/home'});
//$locationProvider.html5Mode(true);
});
Is this incorrect?
Your application demo in the plunker is missing the app declaration like this for example:
<body ng-app="spApp">
There is controller or main controller defined.
<div ng-controller="mainCtrl">
<ng-view></ng-view>
</div>
More over I am not sure about your script declaration.
Here is a plunker configured:
http://plnkr.co/edit/tjDnzBu2PVSADKtbEFrL?p=preview
Here's a plunker with a few HTML files. In the original, you had "home.js" instead of "home.html", but when the partials are saved as HTML they seem to work fine.
http://plnkr.co/edit/aa6fKoBljxRHe4zVPYBl?p=preview
The version between angular and animate weren't the same. Angular was 1.2.4 while animate was 1.2.10.
Upgrading angular solved the issue.
Thanks for trying.