So, today I added angular-ui-router to my webapp. However, it's showing some really weird behaviour. It used to display the current page in the ui-view. So a page in a page.
Now, it's working correct, but it doesn't show subpages and I can't seem to figure out why.
Main page
<!doctype html>
<html lang="en" ng-app="ExampleApp">
<head>
<meta charset="UTF-8">
<title>Example App</title>
</head>
<body>
<div>
<div ui-view></div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- Main app file -->
<script src="/js/main.js"></script>
</body>
</html>
main.js
var ExampleApp = angular.module('ExampleApp', ['ui.router']);
ExampleApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise("/home");
//
// Now set up the states
$stateProvider
.state('home', {
url: "/home",
templateUrl: "views/home.html",
controller: "MainController"
})
.state('settings', {
url: "/settings",
templateUrl: "views/settings.html",
controller: "SettingsController"
})
.state('settings.account', {
url: "/account",
templateUrl: "views/settings.account.html",
controller: "AccountSettingsController"
});
});
ExampleApp.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Try this
url:"settings/account",
Related
I am using angular-ui-router tutorial.
It does not work when i want to load home.html page.
I defined 3 states for each page and define their template url,but no navigation is working at all.
http://localhost:8080/index.html#/home.
this is index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>catalogue</title>
<link rel="stylesheet" type="text/css"
href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="css/myStyle.css" />
</head>
<body ng-app="MyApp" >
<div ui-view >
</div>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
this is app.js :
var app=angular.module("MyApp",['ui.router']);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider.state('home',{
url:'/home',
templateUrl: 'views/home.html',
controller: 'HomeController'
});
$stateProvider.state('chercher',{
url:'/chercher',
templateUrl: 'views/chercher.html',
controller: 'MyController'
});
$stateProvider.state('newProduct',{
url:'/newProduct',
templateUrl: 'views/newProduct.html',
controller: 'NewProductController'
});
});
app.controller('HomeController', function() {
});
app.controller('NewProduitController', function() {
});
home.html:
<div>
<h1>home</h1>
</div>
Set default URL state.
var app=angular.module("MyApp",['ui.router']);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider.state('home',{
url:'/home',
templateUrl: 'views/home.html',
controller: 'HomeController'
});
$stateProvider.state('chercher',{
url:'/chercher',
templateUrl: 'views/chercher.html',
controller: 'MyController'
});
$stateProvider.state('newProduct',{
url:'/newProduct',
templateUrl: 'views/newProduct.html',
controller: 'NewProductController'
});
// add this code
$urlRouterProvider.otherwise('/home');
});
app.controller('HomeController', function() {
});
app.controller('NewProduitController', function() {
});
open this link in browser http://localhost:8080/
i solved the problem.
I used ui-sref instead of writing directly in the URL browser.
<button ui-sref="home" >Home</button>
I am just trying to get a partial page to load.
HTML:
<!DOCTYPE html>
<html ng-pp='app' lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Friends</title>
<script src='angular/angular.js'></script>
<script src='angular-route/angular-route.js'></script>
<script src='app.js'></script>
</head>
<body>
<p>
<a href='#!/list'>All Your Frinds</a> | <a href='#!/new'>Add a Friend</a>
</p>
<div ng-view=''>
</div>
</body>
</html>
Routing:
var app = angular.module('app', ['ngRoute']).config(function ($routeProvider)
{
$routeProvider
.when('/list',
{
templateUrl: 'partials/list.html'
})
.when('/new',
{
templateUrl: 'partials/create.html'
})
.when('/show/:id',
{
templateUrl: 'partials/show.html'
})
.when('/edit/:id',
{
templateUrl: 'partials/edit.html'
})
.otherwise(
{
redirectTo: '/'
})
});
Although, I have a controller, there is nothing in it. I just want to be all to see the a partial page is loading and it is not. I need the ng-controller directive in my partial page for it to load?
It doesn't do anything in this example
Most likely your nodejs is serving your static angularjs content from a folder, if you are using expressjs it will be because of
app.use(express.static('public'))
However, the angularjs router is handling your partials
Make sure you set
$locationProvider.html5Mode(false);
It can also help by looking into the developer console to see what url your router is pointing too.
Also
is fine by itself without the ""
I tried your code after removing exclamation mark from href and it's working as expected. Also add base href in HTML. Try below code
<!DOCTYPE html>
<html ng-pp='app' lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="/"></base>
<meta charset="utf-8" />
<title>Friends</title>
<script src='angular/angular.js'></script>
<script src='angular-route/angular-route.js'></script>
<script src='app.js'></script>
</head>
<body>
<p>
<a href='#/list'>All Your Frinds</a> | <a href='#/new'>Add a Friend</a>
</p>
<div ng-view=''>
</div>
</body>
</html>
JS
var app = angular.module('app', ['ngRoute']).config(function ($routeProvider,$locationProvider)
{
$locationProvider.html5Mode(false);
$routeProvider
.when('/list',
{
templateUrl: 'partials/list.html'
})
.when('/new',
{
templateUrl: 'partials/create.html'
})
.when('/show/:id',
{
templateUrl: 'partials/show.html'
})
.when('/edit/:id',
{
templateUrl: 'partials/edit.html'
})
.otherwise(
{
redirectTo: '/'
})
});
The directive was misspelled... Should be:
ng-app
I am using Angular 1.6.2 and UI Router. I am still trying to learn the concepts correctly, but have come to a road block.
I have a parent state called app using MainController, and a bunch of child states. However I now want to go one level deeper by making grandchild states.
The following codes leaves me with a blank page when loading www.example.com/manage-users/edit/1 thus not loading the grandparent state.
However it does work if I make app a parent of edit-users (the one I want to make a third level deep), but thats not really the correct way of going about it. Because after this I need to use the parent states for other reasons.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
// loading JS/CSS etc
</head>
<body ng-app="sampleApp">
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
parent.html
<div ng-controller="MainController as data">
// more html
<div ui-view></div>
</div>
manage-users.html
<div class="col-sm-12" ng-controller="UserController as data">
// more html
<div ui-view></div>
</div>
manage-users-edit.html (only works when I make the parent state 'app' instead of 'manage-users'
<div>Hello World! This is the Edit HTML Page</div>
app.js setting up states
$stateProvider
.state('app', {
templateUrl: 'views/parent.html',
controller: 'MainController as data'
})
.state('manage-users', {
parent: 'app',
url: '/manage-users',
templateUrl: 'views/manage-users.html',
controller: 'MainController as main'
})
.state('edit-users', {
parent: 'manage-users',
url: '/manage-users/edit/:id',
templateUrl: 'views/manage-users-edit.html',
controller: 'MainController as main'
});
Try this:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
// loading JS/CSS etc
</head>
<body ng-app="sampleApp">
<div class="container" ui-view="container"></div>
</body>
</html>
parent.html
<div ng-controller="MainController as data">
// more html
<div ui-view="parent"></div>
</div>
manage-users.html
<div class="col-sm-12" ng-controller="UserController as data">
// more html
<div ui-view="manageusers"></div>
</div>
app.js
$stateProvider
.state('app', {
views:{
'container': {
templateUrl: 'views/parent.html',
controller: 'MainController as data'
}
}
})
.state('app.manage-users', {
url: '/manage-users',
views:{
'parent':{
templateUrl: 'views/manage-users.html',
controller: 'MainController as main'
}
}
})
.state('app.manage-users.edit-users', {
url: '/edit/:id',
views:{
'manageusers':{
templateUrl: 'views/manage-users-edit.html',
controller: 'MainController as main'
}
}
});
You should always navigate to the child of your hierarchy. In this case, $state.go('app.manage-users.edit-users')
EDIT:
Your URL property in state config is wrong. To hit what you expect, you should enter http://exapmle.com/#/manage-users/edit/1.
I have updated the config, so extra manage-users from the URL is removed. Give it a shot.
I was following these instructions here and cannot get this to work.
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
I verified my bootstrap grid divs work by putting them all in index.html and loading the page. Then I "angularfied' it, and the page doesn't render.
I don't see any errors in the javascript console.
To start out with, the page is supposed to look like this. Actual screen shot of the webpage before I split out the views from index.html
Here is my code after I added angular and created multiple views:
index.html
<html ng-app="stackoverflowApp">
<head>
<meta charset="utf-8"/>
<title>stackoverflow Question</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" type="text/css"/>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="scripts/stackoverflowApp.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div ui-view="stackoverflowTopPane"/>
</div>
<!-- main panel-->
<div class="row">
<!-- Left pane-->
<div ui-view="stackoverflowLeftPane"></div>
<!-- content pane-->
<div ui-view="stackoverflowMainPane"></div>
</div>
</div>
</body>
</html>
js
'use strict';
angular.module('stackoverflowApp', [
'ui.router'
])
.run(
['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
/////////////////////////////
// Redirects and Otherwise //
/////////////////////////////
$urlRouterProvider
.otherwise('/');
//////////////////////////
// State Configurations //
//////////////////////////
// Use $stateProvider to configure your states.
$stateProvider
//////////
// Home //
//////////
.state("home", {
views: {
'stackoverflowTopPane': {
templateUrl: 'so-views/stackoverflow-top-pane.html'
},
'stackoverflowLeftPane': {
templateUrl: 'so-views/stackoverflow-left-pane.html'
},
'stackoverflowMainPane': {
templateUrl: 'so-views/stackoverflow-main-pane.html'
}
}
})
}
]
);
As far as I can see, you never assign the "home" state the index.html URL. Try setting url: "/", just before "views"
i have a lot of question about the angular ui-router module.
I'm tryin to understand it well before implement my applications with that one, but i have problems even with simple things.
HTML
<!doctype>
<html ng-app='myapp'>
<head>
<title>main</title>
<meta charset="utf-8">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<!--controller-->
<script src="app.js"></script>
<script src="controller.js"></script>
<!-- endbuild -->
</head>
<body>
hi
<div ui-view="view1"></div>
<div ui-view="view2"></div>
</body>
</html>
EDIT
var app=angular.module('myapp',['ui.router'
]);
app.config(function($stateProvider/*,$urlRouteProvider*/){
//$urlRouteProvider.otherwise("view1");
$stateProvider.
state('father',{
abstract:true,
template:'<div ui-view></div>',
controller:function($scope){
$scope.view='hi';
}
}).
state('son',{
parent:'father',
url:'/',
views:{'view1':{
templateUrl:'view1.html'
},
'view2':{
templateUrl:'view2.html'
}
}
})
})
and this is my js plunker http://plnkr.co/edit/hsEFKhpaGkIkzarQiuQQ?p=preview.
Now the questions:
1) As you can see in the index.html nothing appears, and my first intention is to see both the views in the main window
2)i have build an abstract state to pass a $scope.view to all the child state, but it seems it didn't work too
3)If what i want to do is done in the wrong way, what's the better approach to do it?
After spending more time than I should have playing around with it, I think I figured out what you were looking for.
I made a few changes and I will try to go over them all.
In the HTML, I added ui-router, moved your js script tags to just before </body>, that allowed me to get rid of all the console errors:
<!doctype>
<html ng-app='myapp'>
<head>
<title>main</title>
<meta charset="utf-8">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ui-view ></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="ui-router.js"></script>
<script src="app.js"></script>
</body>
</html>
Than in your app.js file I made a few changes:
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('', '/');
$stateProvider
.state('father', {
abstract: true,
// I couldn't get this to work without a templateUrl for some reason,
// I'm sure with a little time you could figure this part out.
templateUrl: 'father.html',
controller: function($scope) {
$scope.view = 'Hello Dad';
console.log($scope.view);
}
})
.state('father.son', {
parent: 'father',
url: '/',
views: {
// Added the absolute target declaration `#father`, see link 1 below
'view1#father': {
templateUrl: 'view1.html',
controller: function($scope) {
console.log($scope.view);
}
},
'view2#father': {
templateUrl: 'view2.html',
controller: function($scope) {
console.log($scope.view);
}
}
}
})
});
Here is the father.html template:
<!-- Big file, I know -->
<div ui-view="view1"></div>
<div ui-view="view2"></div>
Link 1: View Names - Relative vs. Absolute Names
Link 2: Plunker