I just have a problem with angular routes.
I have a singlePage Application with 4 different views.
I'm using the ui.router for $stateProvider.
The main view is on route: https://testsite.com/
If I'm wanted to get to the page like: https://testsite.com/view1 i have an error. It is working if I'm on the main view and then changing the route on a click event like:
$scope.go = function ( path ) {
$location.path( path );
};
, but if i give the absolute url for the browser, it wont work.
Here is my index.html:
<body>
<div ui-view></div>
<script type="text/javascript" src="assets/javascript/libs/angular.min.js"></script>
<script type="text/javascript" src="assets/javascript/libs/angular-route.min.js"></script>
<script type="text/javascript" src="assets/javascript/libs/angular-ui-router.min.js"></script>
<script type="text/javascript" src="assets/javascript/app.js"></script>
</body>
view1:
<div class="first-container">
//some content here
</div>
view2:
<div class="second-conteiner">
//some content here
</div>
and my App.js:
var app = angular.module('SofticApp',['ngRoute', 'ui.router']);
app.config(function($routeProvider,$stateProvider, $urlRouterProvider, $locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
}).hashPrefix('!');
$stateProvider
.state( '/', {
url: '/',
templateUrl: 'assets/views/view1.html',
controller: 'viewFirstController'
})
.state( '/view2',{
url: '/view2',
templateUrl: 'assets/views/view2.html',
controller: 'viewSecondController'
});
Thanks for your help!
dont use the absolute url, use the path only
alternatively use
$state.go('view2')
notice that the state name should be 'view2' NOT '/view2'
Related
I wonder why my template which I refer to in my angular state ('home') won't be shown - in my index.html I included a <ui-view></ui-view> tag. Does anyone know?
app.js:
var app = angular.module('portfolio', ['ui.router']);
html:
<body ng-app="portfolio">
<p>hellooooo</p>
<ui-view></ui-view>
<script src="angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-beta.2/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<script src="js/home/home.js"></script>
</body>
home.js:
app.config(function ($stateProvider) {
$stateProvider.state('home', {
url: '/',
templateUrl: '/browser/js/home/home.html'
});
});
home.html:
<div><p>not working</p></div>
I think your router are not able to match / url. That's why you have to specify a default state, because not always your url will come with /.
Consider forcing a default state like so:
$stateProvider.otherwise('/');
I am trying to set up my ui-routes and it seems simple but I don't know what's wrong. I have the following example, making a simple web template with angular ui-router
<script src="./bower_components/angular/angular.min.js" >></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap.min.js" >></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="./app/app.module.js"></script>
<script src="./app/app.route.js"></script>
I've written the app.module.js ,app.route.js and index.html something like this
app.module.js
'use strict';
angular.module('ezer',[ 'ui.router'
])
.controller('main-cntrl',['$scope','$rootScope','$state',function($scope,$rootScope,$state)
{
$scope.message = "abc";
}]);
app.route.js
angular.module('ezer')
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('root',{
url: '',
views: {
'header': {
template: '<h1>My header</h1>',
controller: 'main-cntrl'
},
'footer':{
template : '<h1>My footer</h1>',
controller: 'main-cntrl'
}
}
})
}]);
index.html
<body ng-app="ezer" ng-controller="main-cntrl">
<div ui-view="header"></div>
<div ui-view="footer"></div>
</body>
In my console there are no errors at all.. I don't understand, what is the matter?
In your routes where you have the url, I think you should have 'url' : '/'.
in your app.route, the url should at least be '/' and not ''
Let's say I have two pages, cloud and settings. I have the following code set up:
var routerApp = angular.module('APP', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/cloud');
$stateProvider
.state('cloud', {
url: '/cloud',
templateUrl: 'pages/templates/cloud.html',
controller: 'cloud',
})
.state('settings', {
url: '/settings',
templateUrl: 'pages/templates/settings.html',
controller: 'settings'
});
});
routerApp.controller('cloud', function($scope, $http, $state) {
alert("cloud");
});
routerApp.controller('settings', function($scope, $http, $state) {
alert("settings");
});
HTML
<!DOCTYPE html>
<html lang="en" ng-app="APP">
<head>
<title>TITLE</title>
<base href="/">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="/js/app.js" type="text/javascript"></script>
</head>
<body>
<div id="navContainer">
<a ui-sref="cloud">Cloud</a>
<a ui-sref="settings">Settings</a>
</div>
<div id="pageContent">
<div ui-view></div>
</div>
</body>
</html>
Regardless of what page I load, settings or cloud, the each controller will run no matter what. Meaning I will get 2 alerts, regardless, when I reload the page.
Could anyone help explain what I need to do so that if I reload my website on /settings, only the code in my settings controller will run and vice versa?
If you have your controllers declared in the partials(views) that your router is loading then those controllers will only fire when the view is loaded. It sounds to me like you need a parent controller(s) that will fire to give you logic that can controller both of the views.
Your Code:
$stateProvider.state('cloud', {
url: '/cloud',
templateUrl: 'pages/templates/cloud.html',
controller: 'cloud',
})
.state('settings', {
url: '/settings',
templateUrl: 'pages/templates/settings.html',
controller: 'settings'
});
You are setting the controllers there if you would like them to share a controller simply refer to the same controller like so:
$stateProvider
.state('cloud', {
url: '/cloud',
templateUrl: 'pages/templates/cloud.html',
controller: 'shared',
})
.state('settings', {
url: '/settings',
templateUrl: 'pages/templates/settings.html',
controller: 'shared'
});
I am writing a angular app.
which contains index page, register page
below written code is of index file.
<html data-ng-app="dreamflow" lang="en">
<head>
<% include ./partials/head %>
</head>
<body>
<div>
<header>
<% include ./partials/header %>
</header>
<div class="ng-animate" ui-view></div>
<footer>
<% include ./partials/footer %>
</footer>
</div>
<!-- library after page load-->
<script type="text/javascript" src="/angular/angular.min.js"></script>
<script type="text/javascript" src="/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/browser/controllers/dreamflow.js"></script>
</body>
</html>
This is the code of home page
<div class="container-fluid">
<div class="row custom-row2">
<h1>MAIN PAGE</h1>
</div>
</div>
this is dreamflow.js
'use-strict'
angular.module('dreamflow', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: '/browser/views/home.html'
})
.state('register', {
url: '/register',
templateUrl: '/browser/views/register.html',
controller: 'RegisterController'
});
}
])
This is registerCtrl.js
var myApp = angular.module('dreamflow', []);
myApp.controller('RegisterController', ['$scope',
function($scope) {
$scope.title = "Sign Up";
$scope.register = function() {
var user = {
name: $scope.name,
email: $scope.email,
organization: $scope.organization,
username: $scope.username,
password: $scope.password
};
//Register(user);
};
}
]);
When we add the registerCtrl.js script in the index file (just below dreamflow.js) then our ui-view doesn't work.
When we didn't use registerCtrl.js in index file then ui-view works fine but RegisterController shows following error.
Error: error:areq Bad Argument
Argument 'RegisterController' is not
When we add this registerCtrl.js file anywhere before dreamflow.js then also it shows the same error.
I am unable to find what exactly the problem is. i am trying to solve this from past three days but didn't able to resolve this even after going through all issue related to this error or topic.
In registerCtrl.js, the first line actually instantiate your module again.
what you meant was :
var myApp = angular.module('dreamflow');
Also, I don't see a .run() on your module, which mean to me that your app is not running.
I would like to add new page into default ionic app with tabbed menu and display this page as the default page of the app.
Here is how I tried to do that:
I added new state into app.js
.state('home', {
url: '/home',
views: {
'home': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}
}
})
and set default router to home page
$urlRouterProvider.otherwise('/home');
And template file:
<ion-view title="Home">
<ion-content class="padding">
<h1>Home page</h1>
</ion-content>
</ion-view>
Now, if I am trying to go to http://myapp.loc/index.html#/home I got always black page without content.
What I'm doing wrong?
Thanks for any help.
EDIT:
In order to Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined
I'm adding related code.
Added controllers:
angular.module('starter.controllers', [])
.controller('HomeCtrl', function($scope, $location) {
})
.controller('DashCtrl', function($scope) {
})
.controller('FriendsCtrl', function($scope, Friends) {
$scope.friends = Friends.all();
})
.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
$scope.friend = Friends.get($stateParams.friendId);
});
Order in index.html is following
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/overall_stats.js"></script>
<script src="js/services.js"></script>
I would say, that solution here should be surprisingly simple:
Remove the view name 'home'. In fact change it to '' (empty string)
There is a working plunker with this change?
.state('home', {
url: '/home',
views: {
// instead of this
// 'home': {
// use this
'': {
templateUrl: 'tpl.home.html',
controller: 'HomeCtrl',
}
}
})
Why? Because most likely the index.html would look like this:
<body ng-app="myApp" >
...
<ion-nav-view></ion-nav-view>
</body>
And that means that the view name is "", almost like <ion-nav-view name=""></ion-nav-view>
Check that in action here
EXTEND based on the question extension
if we use ionic-like approach with separated file and module for controllers:
// inside of the index.html
<script src="js/controllers.js"></script>
// the controller.js
angular.module('starter.controllers', [])
We must be sure, that our app.js does contain that module as well:
angular.module('myApp', [
'ionic',
'starter.controllers' // this is a MUST
])