I am trying to redirect to another page using angular redirect. But I am getting a couldn't resolve from state error. I followed the How to pass parameter when I redirect the page in angularjs using ui router? link.
Please find below my route.js code:
var helloWorldApp = angular.module('helloWorldApp', ['ui.router']);
helloWorldApp.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('first', {
url: '/first',
templateUrl: 'first.html'
})
.state('second', {
url: '/second',
templateUrl: 'second.html'
});
});
My first.html code
<html lang="en" ng-app="helloWorldApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script type="text/javascript" src="./app/routes.js"></script>
</head>
<script type="text/javascript">
var helloAppConf = angular.module('helloWorldApp', ['ui.router']);
helloAppConf.controller('firstCtrl',function($scope,$state){
$scope.userInput='Hello world from first page';
$scope.getNewPage=function() {
$state.go("second", { id: $scope.userInput });
}
});
</script>
<body>
<div ng-controller="firstCtrl">
<h4>{{userInput}}</h4>
<button ng-click="getNewPage()">New Page</button>
</div>
</body>
</html>
My second.html code
<!DOCTYPE html>
<html lang="en" ng-app="helloWorldApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script type="text/javascript" src="./app/routes.js"></script>
</head>
<script type="text/javascript">
var helloAppConf = angular.module('helloWorldApp', ['ui.router']);
helloAppConf.controller('secondCtrl' , function($scope, $state){
$scope.id = $stateParams.id;
});
</script>
<body>
<div ng-controller="secondCtrl">
<h4>{{id}}</h4>
<button ng-click="getNewPage()">New Page</button>
</div>
</body>
</html>
I am using springboot and my project structure snapshot is attached here:
I am able to access both first.html and second.html pages on my browser. But when I click on the New Page button on first.html, I get the
Error: Could not resolve 'second' from state ''
at Object.t.transitionTo (http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js:7:8834)
at Object.t.go (http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js:7:8182)
at Scope.$scope.getNewPage (http://localhost:8080/first.html:18:16)
at fn (eval at (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:13322:15), :4:221)
at callback (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:23549:17)
at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:15989:28)
at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:16089:25)
at HTMLButtonElement. (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:23554:23)
at HTMLButtonElement.eventHandler (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:3298:21)
Please help. Thanks in advance.
In your second html code you inject $state wrongly instead of $stateParams. So that your code didn't work
Inject with $stateParams
var helloAppConf = angular.module('helloWorldApp', ['ui.router']);
helloAppConf.controller('secondCtrl' , function($scope, $stateParams){
$scope.id = $stateParams.id;
});
or use $state.params.id
var helloAppConf = angular.module('helloWorldApp', ['ui.router']);
helloAppConf.controller('secondCtrl' , function($scope, $state){
$scope.id = $state.params.id;
});
Related
I'm creating a website and I'm using JavaScript + AngularJS, presently I create the routes for the application, but it always returns 404 not found on the server, I've tried several examples of the internet but none of them worked, here's an example of my code, remembering that The html pages are inside the WebContent:
<html ng-app="angularRoutingApp">
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
<div>
index <br> home
</div>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script>
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
angularRoutingApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/index", {
template: "/index.html"
})
.otherwise({
redirectTo: '/home.html'
});
});
</script>
</body>
</html>
you forgot the ng-view directive.
also,
the href need to be with a hash prefix - or using the Link directive.
the redirectTo key need to provide a view [name/address] & not a
template
if you want to use template files & not inline code use the templateUrl key
you can see an example of your code here: http://codepen.io/AceDesigns/pen/ZLXLKa
<html ng-app="angularRoutingApp">
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
<div>
index<br>
home
</div>
<div class="">
<ng-view></ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script>
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
angularRoutingApp.config(function($routeProvider){
$routeProvider
.when("/index", {template:"<div>INDEX VIEW</div>"})
.when("/home", {template:"<div>HOME VIEW</div>"})
.when("/tempFile", {templateUrl: "views/temp_file.html"})
.otherwise({redirectTo: '/home'});
});
</script>
</body>
</html>
I have written a demo code for ui-router but getting error
like: unknown attribute 'ui-sref
I go through from the source: (How to get angular ui-router's ui-sref to work, when inside a directive's template?).
But, still I did not correct it.
my code is:
index.html
<!DOCTYPE html>
<script <script src="lib/angular-ui-router.js"></script>
<script src="lib/angular.min.js"></script>
<script src="helloworld.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="helloworld">
<a ui-sref="hello" ui-sref-active="active">Hello</a<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>
</html>
helloworld.js
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
}
var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
Any help is appreciated.
I want to dynamically add menu JavaScript file and html to content.html, but it can't do.
I created simple example
demo
I try move "<script src="menu.js"></script>" to menu.html
Your code moves away from the whole idea of writing single page app with angular. I have updated it to give you basic idea of how you would do the routes and share templates and use controller.
Check out the plunkr
html
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="menu.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script data-require="ui-router#*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
<script src="menu.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="menu" ng-include="'menu.html'"></div>
<div ui-view></div>
</body>
</html>
js
angular.element(document).ready(function() {
angular.bootstrap(document, ["app"]);
});
angular.module('app',['moduleContent', 'moduleMenu', 'ui.router']);
var app = angular.module('app');
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: "",
templateUrl: "first.html",
controller: 'firstCtrl'
})
.state('second', {
url: "/second",
templateUrl: "second.html"
})
});
app.controller('firstCtrl', ['$scope', function($scope) {
$scope.page = "first";
}]);
//Conttent module
angular.module('moduleContent',[])
.controller('contentCtrl', contentCtrl);
function contentCtrl(shareData)
{
shareData.currentPage = 0;
}
I have a very basic example that isn't working: I have two aspects, the index.html and the main.js. They are in the same folder:
<!DOCTYPE html>
<html>
<head>
<title> AngularJS Tutorials </title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="main.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope) {
$scope.data = {message: "Hello"};
}
my page shows this:
{{data.message}}
You need to add the controller to the angular module. you can use the controller function to add the js function for your controller.
var FirstCtrl = function FirstCtrl($scope) {
$scope.data = {message: "Hello2"};
};
angular.module("myApp",[]).controller("FirstCtrl",FirstCtrl);
If you already had the angular module defined somewhere else in the page, Use this version.
angular.module("myApp").controller("FirstCtrl",FirstCtrl);
Here is a working sample http://jsbin.com/tiroteharu/edit?html,js,console,output
<script src="~/Scripts/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', ['$scope', function ($scope) {
$scope.data = { message: "Hello" };
}]);
</script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
More help read: https://docs.angularjs.org/guide/controller
I'm building a cordova app and want to use angular to build out pages a the user selects content. I'm building out in the web right now before I move to cordvoa.
<!doctype html>
<html ng-app="nanoApp">
<head>
<link rel="stylesheet" href="css/main.css">
<script src="js/angular.min.js"></script>
<script src="js/ngroute.min.js"></script>
<script src="js/angular-script.js"></script>
</head>
<body>
<div id="content" class="scroller" ng-view></div>
</body>
</html>
angular-script.js:
var nanoApp = angular.module('nanoApp',['ngRoute']);
nanoApp
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'HomeController as homeSlides',
templateUrl:'../content/home.html'
});
});
home.html:
<div id="home" class="container paralax">
...
</div>
That's because you didn't define HomeController.
Try to create controller first
Like this
var nanoApp = angular.module('nanoApp',['ngRoute']);
nanoApp.controller("HomeController",["$scope",function($scope){
//put your code here
}]);