UI Router inline template - javascript

I'm just trying UI Router for the first time. This is my very simple attempt. So I would now expect, that just the header would display. But the page keeps empty. What am I doing wrong?
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
<script>
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('index', {
template: '<h1>Header</h1>'
});
});
</script>
</head>
<body>
<main ui-view></main>
</body>
</html>

You have to set - in your example - $urlRouterProvider:
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('index', {
url : '/',
template: '<h1>Header</h1>'
});
});

If you're expecting a state to activate when on a specific url (from pushState or http) you need to specify the url.
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('index', {
url : '/',
template: '<h1>Header</h1>'
});
});

You have to set a blank url state for $stateProvider
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url : '',
template: '<h1>Header</h1>'
});
});
Plnkr: http://plnkr.co/edit/n3uX2SMR0puNROzRePOO

Related

Routing issue in Angular ui-router using href

I have made one state and trying to navigate to other page. There is no error in console but navigation is not working either.
index.html
<body ng-app="app">
<a href='#/first-msg'>link</a>
<div ui-view></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script src="application.js"></script>
</body>
application.js
var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', '$locationProvider', function($stateProvider, $locationProvider) {
$stateProvider.state('firstMessage', {
url: '/first-msg',
templateUrl: 'home.html',
controller: 'homeCtrl'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
app.controller("homeCtrl", ['$scope', function($scope) {
$scope.message = "This is home";
}]);
when i click on link, the url is like
.../index.html#%2Ffirst-msg
Using ui-router, you should not use href. Use ui-sref instead:
<a ui-sref="firstMessage">link</a>
Note I use the state name, and not its URL.
JSFiddle demo

index Ctrl is not a function

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

States not being applied with angular ui router

I am having an issue with ui router where the state is not being triggered on a url.
On navigation to /#/dashboard/ the $state.current is set to abstract true with no state selected within.
No error messages are being thrown on $stateChangeError
JS -
var app = angular.module('frame', ['ui.router']);
app.config(['$stateProvider', '$locationProvider', function($stateProvider, $locationProvider) {
$stateProvider
.state('dashboard', {
url: '/dashboard/',
views: {
'header#': {
template: 'header'
},
'nav#': {
template: 'nav'
},
'main#': {
template: 'main'
}
}
});
// $locationProvider.html5Mode(true);
}]).
run(['$browser', '$rootScope', '$state', function($browser, $rootScope, $state){
// $browser.baseHref = function() { return '../'; };
$rootScope.$on("$stateChangeError", console.log.bind(console));
console.log(window.location);
$rootScope.state = $state;
}]);
html -
<body>
<div ui-view="header">
</div>
<nav ui-view="nav">
</nav>
<main ui-view="main">
</main>
</body>
Here is a link that throughly explains how to use Absolute Names,
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Angularjs ui-router abstract state not invoking controller

I am new to UI-Router and am struggling to get my controller invoked. I am using an abstract state as the parent and it does not seem to call the controller. Below is a simplified version of my code.
I binded $stateChangeError onto the console and am not getting an error on the console. I added onEnter and OnExit attributes to my state and only the onEnter function gets called (not included below).
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js" ></script>
<script src="app.js"></script>
</head>
<body>
<div ui-view="navbar" ></div>
<div class="container">
<div ui-view="content" ></div>
</div>
<p>We are on the homepage.</p>
</body>
</html>
App.js
var app = angular.module('plunker', ['ui-router']);
app.config(function ($stateProvider, $urlRouteProvider) {
$urlRouteProvider.otherwise("/");
$stateProvider.state('site', {
abstract: true,
views: {
'navbar#': {
template: '<p>This is the {{nav}}</p>',
controller: 'NavBarCtrl'
}
}
});
});
app.config(function($stateProvider) {
$stateProvider
.state('home', {
parent: 'site',
url: '/',
views: {
'content#': {
template: '<p>This is the {{content}}</p>',
controller: 'MainCtrl'
}
}
});
});
app.controller('NavBarCtrl', function($scope) {
$scope.nav = 'Navbar'
});
app.controller('MainCtrl', function($scope) {
$scope.content = 'content'
});
There is a working example
There are two issues. Firstly we have to reference correct module:
// instead of this
// var app = angular.module('plunker', ['ui-router']);
// we need this
var app = angular.module('plunker', ['ui.router']);
And we have to use proper names of the '$urlRouterProvider'
// instead of this
app.config(function ($stateProvider, $urlRouteProvider) {
$urlRouteProvider.otherwise("/");
// we need this
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
Check it working here

How inject $stateProvider in angular application?

I try to use angular-ui, and try to inject $stateProvider:
html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
<script src="test/appModule.js"></script>
</head>
<body>
<div ng-app="appModule">
<div ng-controller="appController">
{{date}}
</div>
</div>
</body>
</html>
js (test/appModule.js)
var module = angular.module("appModule", ['ui.router']);
module.controller('appController', ['$scope', '$stateProvider',
function ($scope, $stateProvider) {
$scope.date = new Date();
}]);
stack trace
Error: Unknown provider: $stateProviderProvider <- $stateProvider
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js:28:236
...
If I remove $stateProvider and ui.router with comments everything will work:
var module = angular.module("appModule"/*, ['ui.router']*/);
module.controller('appController', ['$scope'/*, '$stateProvider'*/,
function ($scope, $stateProvider) {
$scope.date = new Date();
}]);
So the problem with injection $stateProvider any ideas about resolving?
P.S. I have tried ui sample it works, but I cannot figure out why mine does not.
When using it in a controller you have to use $state:
angular.module("appModule", ['ui.router']).controller('appController', ['$scope', '$state', function ($scope, $state) {
$scope.date = new Date();
}]);
You can only use the state provider in the config, for example:
angular.module('appModule').config(['$stateProvider', function($stateProvider){
/* do w/e with state provider */
})];
var bootstrapApp = angular.module('bootstrapDemoApp', ['ui.bootstrap','ui.router']);
bootstrapApp.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
// For any unmatched url, redirect to /
$urlRouterProvider.otherwise("/");
// Now set up the states
$stateProvider
.state('login', {
url: "/",
controller: "loginCtrl",
templateUrl: "partials/login.html"
})
});

Categories

Resources