I have the simplest ui.router example which doesn't seem to work.
See below:
var routerApp = angular.module('mainApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
//$urlRouterProvider.otherwise('/home'); When I uncomment this, it loads /home without a problem but why is it going to the "otherwise" condition?
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'main.html'
})
});
My index file.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="/angular/angularApp.js"></script>
</head>
<body ng-app="mainApp">
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
I have been going on and on into this but I think I now have tunnel vision. Someone please help me out here. Thanks in advance!
I do not see any issue except you having the same controller for both, can you check the example below
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider.state('top', {
url: "",
templateUrl: "header.html",
controller: 'topCtrl'
})
.state('top.side', {
url: '/app',
templateUrl: "side.html",
controller: 'filterCtrl'
})
.state('top.side.list', {
url: "/items?query",
templateUrl: "items.html",
controller: 'listCtrl'
})
.state('top.side.item', {
url: "/:id",
templateUrl: "item.html",
controller: 'itemCtrl'
});
});
DEMO
Related
Hey could someone answer this for me as it is really wrecking my head.
I am getting an error stating that the controller is not a function and got defined. Now I understand this but I really can't see why.
<!DOCTYPE html>
<html ng-app="kachicode">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJs Gmail</title>
<script src="node_modules/angular/angular.js"></script>
<script src="routeCtrl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="app/config/route.js"></script>
</head>
<body id="backImg">
<div ui-view></div>
</body>
</html>
So this is my page and the routing is working fine. Basically my problem is in the routeCtrl.js file saying the function is not defined:
var app = angular.module('kachicode', []);
app.controller('indexCtrl', function indexCtrl($scope){
$scope.greeting ="hey seam";
$scope.goTo = function() {
console.log("clicking");
}
});
This my home file that is being loaded in the uiview
<div ng-controller="indexCtrl as ctrl">
{{ctrl.greeting}}
</div>
angular.module('kachicode', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider){
'use strict';
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
.state('about', {
url: '/about',
templateUrl: 'kachicode/about.html'
})
.state('contact', {
url: '/contact',
templateUrl: 'kachicode/contact.html'
});
});
this is my route file
Ok no now. I've checked to see am I loading the file correctly and made sure that it is attaching to kachicode which is defined in ng-app = "kachicode". These are the common reasons for this problem as per the stackoverflow forums but mine still isn't working. Could someone help me and I'll know forever more how to fix it?
Thanks very much
You are defining your app twice, once in your routeCtrl.js:
var app = angular.module('kachicode', []);
And again in your route.js:
angular.module('kachicode', ['ui.router'])
Either remove the second parameter from your route.js (and add the dependency to your routeCtrl.js's app), or change your setup
The solution, based on the order of loading of your scripts (first routeCtrl.js, then route.js) do this in your routeCtrl.js:
var app = angular.module('kachicode', ["ui.router]);
And this in your route.js:
angular.module('kachicode')
Though make sure that you load in the angular-ui-router before your routeCtrl.js
Below is the recommended way to define a controller.
var app = angular.module('kachicode', ['ui.router']);
//no need to write function indexCtrl() -- see below
//also use the an array to inject you dependencies in the controller -> this syntax is good if you plan on minifying your code
app.controller('indexCtrl', ['$scope', function($scope){
$scope.greeting ="hey seam";
$scope.goTo = function() {
console.log("clicking");
}
}]);
You also seem to be creating you app twice. In route.js, I would remove this line:
angular.module('kachicode', ['ui.router'])
and simply do:
app.config(function ($stateProvider, $urlRouterProvider){
'use strict';
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
.state('about', {
url: '/about',
templateUrl: 'kachicode/about.html'
})
.state('contact', {
url: '/contact',
templateUrl: 'kachicode/contact.html'
});
});
I hope that helps fix your problem
In my js app I have this in config $stateProvider section via angular ui-router:
.state('login', {
url: '/login',
templateUrl: 'app/login/login.tmpl.html',
controller: 'LoginCtrl as login'
})
.state('app', {
abstract: true,
url: '/',
views: {
'main': { templateUrl: 'app/main/main.html' }
}
})
.state('app.reports', {
url: 'reports',
views: {
'': {templateUrl: 'app/templates/reports.tmpl.html'},
'devices#app.reports': {
templateUrl: 'app/templates/devices.tmpl.html',
controller: 'DevicesCtrl as devicesCtrl'
},
'graphics#app.reports': {...}
}
})
In index.html I have:
<body ng-controller="MainCtrl as main" >
<section ui-view>
<div ui-view="main"></div>
</section>
....
</body>
It works only if I have nested ui-view="main" in ui-view.
Is it correct way to work with ui-router?
In main.html I have header, footer and some common information for some pages.
But I have another state, 'login', in which I'll have their own templates. But in index.html their will be loading with ui-view, not ui-view="main".
How can I refactor my index.html and js to avoid nested ui-view in index.html?
Or I have a correct way?
You could refactor your app state like this:
.state('app', {
abstract: true,
url: '/',
templateUrl: 'app/main/main.html'
})
That should allow you to ony have the following in your index.html:
<body ng-controller="MainCtrl as main" >
<section ui-view>
</section>
....
</body>
I'm beginner in AngularJS and I have a problem when use Angular UI Router.
index.html
<body ng-app="app" ng-controller="AppController" layout="column">
<ui-view></ui-view>
</body>
login.html
<h1>Login page content</h1>
And in my $stateprovider...
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "views/app.html",
controller: "AppController"
}).state('app.login', {
url: "/login",
templateUrl: "views/login.html",
controller: "LoginController"
});
$urlRouterProvider.otherwise('/login');
})
It can't display a content of login.html page. But when i change state from app.login to login. It can be displayed. How should i do now?
Out of curiosity could you try:
$urlRouterProvider.otherwise('/app/login');
I saw the abstract nested classes routed in that format in some examples,
though i don't have time to test it in jsfiddle.
edit:
Maybe if you try setting the base url to "/" ?
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$stateProvider
.state('app', {
url: "/",
abstract: true,
templateUrl: "views/app.html",
controller: "AppController"
}).state('app.login', {
url: "/login",
templateUrl: "views/login.html",
controller: "LoginController"
});
$urlRouterProvider.otherwise('/login');
})
I am trying to learn AngularJS and this is the code I have written:
myApp.config(function($routeProvider){
console.log('--Inside config--');
$routeProvider
.when('/',{
templateUrl: 'index.html'
})
.when('/list', {
templateUrl: 'list.html'
})
.when('/detail', {
templateUrl: 'detail.html'
})
.otherwise({
redirectTo: '/'
});
});
When I view this in Chrome, the JS console shows that it has gone into infinite loop and freezes. As soon as I remove this function, it comes up fine. Any help?
Try this, in the HTML file:
<html ng-app="My_App">
<head>
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="<path to test.js>/test.js"></script>
</head>
<body ng-view>
</body>
</html>
test.js:
var app = angular.module('My_App', []);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/main',{
templateUrl: 'partials/main_navigation/main.html',
controller: 'main' // If you want to use controllers
)
.when('/menu',{
templateUrl: 'partials/main_navigation/menu.html',
controller: 'menu' // If you want to use controllers
).otherwise({redirectTo: '/main'});
Facing some strange with ui-router angularjs. I am configuring an single page application using these frameworks.
Here is my code
function initWmappConfig($stateProvider, $locationProvider, $compileProvider) {
$locationProvider.html5Mode(true);
$stateProvider.
state('login', { url: '/', templateUrl: '/Views/login', controller: 'login-controller', controllerAs: 'vm' })
.state('register', { url: '/register', templateUrl: '/Views/Register', controller: 'login-controller', controllerAs: 'vm' });
$stateProvider.state('otherwise', {url: '/'});
$compileProvider.debugInfoEnabled(false);
}
If i am using this above configuration i am facing this war
WARNING: Tried to load angular more than once
but on other hand if i simple change
$locationProvider.html5Mode(false);
then everything seems to work just fine...
Please let me know why this is happening.
Thanks
It's because you didn't mention the .html extension in the templateUrl
state('login', { url: '/', templateUrl: '/Views/login.html', controller: 'login-controller', controllerAs: 'vm' })
.state('register', { url: '/register', templateUrl: '/Views/Register.html', controller: 'login-controller', controllerAs: 'vm' });
Also for otherwise, you need to use $urlRouterProvider
$urlRouterProvider.otherwise('/');
I was getting this error.
The reason behind this is the use of jQuery.
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="/public/vendor/angular/angular.js" type="text/javascript"></script>
<script src="/public/vendor/angular/angular-route.js" type="text/javascript"></script>
I removed the following and warning disappeared:
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>