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"
})
});
Related
I've been struggling with getting my AngularJS app to display a view based on a template.
The issue: ui-router seems to be correctly "routing" all the files, because the template file (landing.html) is being delivered to the console as an object (see console.log(result) in main.js below). Nevertheless, the template file is not being displayed in the app where <div ui-view></div> is supposed to be.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
##include('partials/head.html')
<body>
##include('partials/header.html')
<div ui-view></div>
##include('partials/footer.html')
</body>
</html>
main.js:
angular.module('myApp', [
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('landing', {
url: '/',
controller: 'LandingCtrl as landing',
templateUrl: 'templates/landing.html'
});
$urlRouterProvider.otherwise('/landing');
}])
.run(['$http', '$templateCache', function($http, $templateCache) {
$http.get('templates/landing.html', {
cache: $templateCache
}).then(function(result) {
console.log(result);
});
}]);
My template file landing.html:
<main class="content">
##include('partials/search.html')
<h2>Show me the contents of landing.html!</h2>
</main>
I'm using grunt and made sure to have it both watch and copy the /templates into /dist. Overall the Angular app is behaving correctly (no ng errors in the console).
Also, if instead of specifying a template file (templateURL), I simply use template: <h2>Show me the contents of landing.html!</h2> in main.js then this is rendered in the view. There's something preventing a file from being rendered.
Question: Given ui-router is correctly finding and routing all files, does anyone have an idea as to why the app is simply not displaying the template file?
Edit Here is LandingCtrl.js:
(function() {
function LandingCtrl($scope, $location, $anchorScroll) {
$scope.goTo = function(id) {
$location.hash(id);
console.log($location.hash());
$anchorScroll();
};
}
angular
.module('myApp')
.controller('LandingCtrl', ['$scope', '$location', '$anchorScroll', LandingCtrl]);
})();
in your main.js file change the url of Landing State as below:
angular.module('myApp', [
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('landing', {
url: '/landing',
controller: 'LandingCtrl as landing',
templateUrl: 'templates/landing.html'
});
$urlRouterProvider.otherwise('/landing');
}])
.run(['$http', '$templateCache', function($http, $templateCache) {
$http.get('templates/landing.html', {
cache: $templateCache
}).then(function(result) {
console.log(result);
});
}]);
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
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
I'm trying to parse for the access_token from Foursquare where the URL is like this:
https://mywebsite.com/4sqredirect/#access_token=1234567890XXXXX
I've tried $routeParams and $location and get nothing returned. Only after I tried $route, I did get an object back with the following attribute in it:
current: {
params: { }
pathParams: { }
loadedTemplateUrl: partials/4sqredirect
locals: { }
scope: {
this: {
$ref: $["current"]["scope"]
}
route: {
$ref: $
}
location: { }
token: null
}
}
Does this mean there's no way to get it using native AngularJS functions cause of the hash?
UPDATE:
my controller looks like as follows:
angular.module('myApp')
.controller('4sqredirectCtrl', function ($scope, $route, $location, $routeParams) {
$scope.route = $route;
$scope.location = $location;
$scope.token = $routeParams.access_token;
});
my main js looks like as follows:
angular.module('myApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'partials/main',
controller: 'MainCtrl'
})
.when('/4sqredirect/', {
templateUrl: 'partials/4sqredirect',
controller: '4sqredirectCtrl'
})
.otherwise({
redirectTo: '/'
});
});
From angular location service $location.hash() method return #after-hash
so if your url is look like
https://mywebsite.com/4sqredirect/#access_token=1234567890XXXXX
then
$location.hash() return access_token=1234567890XXXXX
you need to split it split('=')[1]
see this plunker when you click 4Square then $location.url() return
/4sqredirect/#access_token=123456
$location.hash().split('=')[1]
return 123456
Use $location.search()
//e.g. url https://www.example.com/#!?name=123
var s = $location.search();
// {name: '123'}
http://docs.angularjs.org/api/ng.$location
Search:
Returns search part (as object) of current url when called without any parameter.
I'm not aware of a "native angular" way to do it, but you do have access to the hash via location.hash as a string type. it's probably not ideal, but it's workable.
There is in fact no direct support from Angular JS to do this. I wouldn't use ngRoute, because it already might expect the # at a different place. A simple solution to your problem is to use the location.hash and the substring() function:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script>
angular.module('app', [])
.controller('AppCtrl', ['$scope', '$window', function($scope, $window) {
$scope.accessToken = $window.location.hash.substring(14);
}]);
</script>
</head>
<body ng-controller="AppCtrl">
<h1>Access Token</h1>
<p>{{accessToken}}</p>
</body>
</html>
I'd like the root URL, /, of my AngularJS app to display a template based on cookie value. For example, when a login cookie is present display dashboard. When login cookie is absent, display a login screen.
I tried to inject $cookies to app.config to determine the template property of $route based on it, but that didn't work.
var myApp = angular.module('myApp', ['ngRoute', 'ngCookies']);
myApp.config([
'$routeProvider',
'$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: function() {
// read cookies here?
return '../../connect.html';
},
controller: "getAuthUrl"
});
$locationProvider.
html5Mode(true).
hashPrefix('!');
}
]);
Answering my own question...
After further investigation, I found out that $routeProvider is not what I should be using. $routeProvider is for serving templates based on URL routes. What this problem needed is the ui-router module, which is an official AngularJS module.
Instead of URLs, ui-router lets you specify page content based on "state". In my situation, I have a "loggedin" state and a "dashboard" state. Here's how I have implemented the solution:
var myApp = angular.module('myApp', ['ngCookies', 'ui.router']);
myApp.config([
'$stateProvider',
'$locationProvider',
function ($stateProvider, $locationProvider) {
$stateProvider.
state('login', {
template: '<h1>Login now.</h1>'
}).state('dashboard', {
template: '<h1>You are logged in. Welcome.</h1>'
});
$locationProvider.
html5Mode(true).
hashPrefix('!');
}
]);
myApp.controller('mainCtrl', [
'$scope',
'$state',
'$cookies',
function($scope, $state, $cookies) {
// You can read cookies here
if (true) {
console.log($cookies);
$state.go('dashboard');
}
else {
$state.go('login');
}
}
]);
And then the HTML is
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script src='js/lib/angular.js'></script>
<script src='js/lib/angular-ui-router.js'></script>
<script src='js/lib/angular-cookies.js'></script>
<script src="js/app.js"></script>
</head>
<body ng-controller='mainCtrl'>
<div class="container" ui-view></div>
</body>
</html>
You can read all about ui-router in its wiki
Note: You have to use ui-router v0.0.2 at least. v0.0.1 won't work.