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('/');
Related
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'
I am just setting up a simple Angular app as I've done countless times. I added a home state and a separate state for a note taking app, yet neither states are displaying/injecting the html partials into the ui-view. I think it might be an issue with my ui-router setup, but I cannot find the issue. I console log from my controllers and they trigger correctly, so the states are clearly pointing to the right controllers.
Index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="bower_components/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="factory.js"></script>
<script src="config.js"></script>
</head>
<body ng-app="myApp">
<ui-view></ui-view>
</body>
</html>
config
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateURL: './home.html',
controller: 'homeCtrl'
})
.state('list', {
url: '/list',
templateURL: '/list.html',
controller: 'listCtrl'
})
$urlRouterProvider.otherwise('/home');
});
app.js
'use strict';
var app = angular.module('myApp', ['ui.router']);
app.controller('listCtrl', function($scope, myFactory) {
console.log("list working!");
$scope.items = myFactory.items
$scope.addItem = function() {
$scope.items.unshift($scope.newItem);
$scope.newItem = "";
}
})
app.controller('homeCtrl', function($scope) {
console.log("home working!");
$scope.test = 'test'
})
My home state should load a partial containing:
<div>
<h1>Welcome!</h1>
</div>
Plunker
http://plnkr.co/edit/ngHYDtx0VBe2YPlBeJ3t?p=preview
It has to be
templateUrl: './home.html',
Also, it is not desirable to use relative paths for templates, './home.html' and 'home.html' will be cached internally as two different templates.
I have this project structure :
-root
|-JS
|-app.js
|-COMPONENTS
|-HOME
|-homeController.js
|-homeView.html
|-ERROR
|-error.html
|-index.html
Here is index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- JS LOADING -->
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!--APP JS -->
<script src="js/components/app.js"></script>
<script src="./js/shared/services/lb-service.js"></script>
<!--HOME JS-->
<script src="./js/components/home/homeController.js"></script>
</head>
<body ng-app='benirius'>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="error">Error</a></li>
</ul>
<div ui-view></div>
</body>
</html>
and app.js:
'use strict';
angular.module('benirius', [
'lbServices',
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/components/home/homeView.html',
controller: 'homeController'
})
.state('error', {
url: '/error',
templateUrl: '/components/error/error.html'
});
$urlRouterProvider.otherwise('/');
}]);
edit adding homeController.js:
angular.module('benirius',[])
.controller('homeController', ['$scope', function($scope) {
$scope.test = "Inside home.";
}]);
Angular ui router does not create links / load pages.
All js files are loaded and no javascript error shown in console.
Does someone know why ui-router is not working ?
Ps : I've been playing around with templateUrl path with no success.
As show here in angular doc, when you separate files and add controllers, services, or others to a module, you have to load it with no arguments.
You first define your app in a file :
angular.module('benirius', [
'lbServices',
'ui.router'
])
.config(
// CODE IN HERE
);
$urlRouterProvider.otherwise('/');
}]);
Then if you want to add elements to your app in another file, you load the module with no arguments, like this:
// notice there is no second argument therefore it loads the previously defined module 'benirius'
angular.module('benirius')
.controller('homeController', ['$scope', function($scope) {
$scope.test = "Inside home.";
}]);
//=> NO ERROR
instead of:
// In this case, it is considered as a redefinition of 'benirius' module with no dependencies injected
angular.module('benirius',[])
.controller('homeController', ['$scope', function($scope) {
$scope.test = "Inside home.";
}]);
//=> ERROR
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 ''
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.