Suppose I have one route:
angular.module('LiveAPP', ['ui.router',
'LiveAPP.main',
'LiveAPP.artist',
'liveAPP.signup',
'LiveAPP.factory',
'liveAPP.review'
])
.config(function($urlRouterProvider, $stateProvider) {
$stateProvider.state("home", {
url:"/",
templateUrl : '/home.html',
controller : 'mainCtrl',
resolve: {
artists: function () {
console.log('resolved')
return "I want this in controller";
}
}
})
})
Prior to the instantiation of my mainCtrl I want the function bound to artists to be run. So in my controller I have the following setup:
angular.module('LiveAPP.main',['LiveAPP.factory'])
.controller('mainCtrl', ['$rootScope','$scope','$http', '$location','dataFactory','artists', mainCtrl])
function mainCtrl($rootScope,$scope,$http,$location,dataFactory,artists){
console.log(artists) //expect the return from resolve in ui.router
}
When console logging artists it is evaluated to undefined. Anyone have any idea why that is?
Were you using ui-view? If yes it should not have any ng-controller for mainCtrl. I have made minor tweaks and your code works fine
angular.module('LiveAPP', ['ui.router', 'LiveAPP.main'])
.config(function($urlRouterProvider, $stateProvider) {
$stateProvider.state("home", {
url:"/",
templateUrl : 'home.html',
controller : 'mainCtrl',
resolve: {
artists: function () {
console.log('resolved');
return "I want this in controller";
}
}
});
});
angular.module('LiveAPP.main',[])
.controller('mainCtrl', ['$rootScope','$scope','$http', '$location', 'artists', mainCtrl]);
function mainCtrl($rootScope,$scope,$http,$location, artists){
console.log(artists); //expect the return from resolve in ui.router
}
<!DOCTYPE html>
<html lang="en" ng-app="LiveAPP">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ui-view></div>
<script type="text/ng-template" id="home.html">
Lorem ipsum
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
Related
My code starts from here
<!DOCTYPE html>
<html>
<head>
<title>Routing</title>
</head>
<body ng-app="myApp">
Login
Register
<div ng-view></div>
</body>
<script src="angular-min.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/login", {
templateUrl : "login.html"
})
.when("/register", {
templateUrl : "register.html"
})
});
</script>
</html>
I cannot route, it is simple touting with html, using simple method , the basic one , i do not know why it doesnt route
This is with the version 1.2.
var app = angular.module("myApp", ["ngRoute"])
app.config(function($routeProvider) {
$routeProvider.when('/', {
template: `<h1>Login</h1>`,
controller: 'loginCtrl'
})
.when('/register', {
template: `<h1>Register</h1>`,
controller: 'RegisterCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('loginCtrl', function($scope) {
$scope.name = "Login";
});
app.controller('RegisterCtrl', function($scope) {
$scope.name = "Register";
})
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS User Registration and Login Example </title>
</head>
<body>
Login
Register
<div class="mainContainer" ng-view></div>
<script src="//code.angularjs.org/1.2.26/angular.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular-route.min.js"></script>
</body>
</html>
If you are using Angularjs version 1.6 and above, routes has changed. Look at this Answer
I am having two html files in my app folder as follows
app
| - Home.html
| - Folder - Employee.html and Employee.controller.js
| - app.module.js
| - app.route.js
My Home.html is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="/Scripts/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="/app/app.module.js"></script>
<script src="/app/app.routes.js"></script>
<script src="/app/Folder/Employee.controller.controller.js"></script>
</head>
<body ng-app="employeeModule">
<ui-view>
<i>Some content will load here!</i>
</ui-view>
Link
</body>
</html>
My app.module.js is as follows
(function () {
"use strict";
angular.module('employeeModule', ['ui.router']);
})();
My app.route.js is as follows
(function () {
'use strict';
angular.module('employeeModule').config(employeeAppConfiguration);
function employeeAppConfiguration($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '',
abstract: true,
views: {
'home': {
templateUrl: '/app/Home.html'
}
}
})
.state('home.employee', {
url: '/employee',
templateUrl: '/app/Folder/Employee.html',
controller: 'employeeController',
controllerAs: 'empCtrl'
});
}
})();
My controller is as follows
(function () {
'use strict';
angular.module('employeeModule')
.controller('employeeController', employeeController);
function employeeController() {
var ctrl = this;
ctrl.employee;
ctrl.submitEmployee= submitEmployee;
function submitEmployee(employee) {
}
};
});
I am unable to see the submitEmployee function called on my submit click this is is my html
Add
Can some one help me where I am going wrong
probably address of youre controller is misspelled
<script src="/app/Folder/Employee.controller.controller.js"></script>
incorrect controller file name. Change it to<script src="/app/Folder/Employee.controller.js"></script>
has someone an idea, why :message always throws "undefined"? i call the page with "MyDomain.com/#AMessage"
ctrl.js:
angular.module('AutApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/:message",
{
templateUrl: "index.html",
controller: "ctrl"
}
);
})
.controller('ctrl', function($routeParams) {
document.getElementById("test").innerHTML = $routeParams.message;
});
index.html:
<!DOCTYPE html>
<head></head>
<body ng-app="AutApp" ng-controller="ctrl">
<div id = "test"></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="ctrl.js"></script>
</body>
</html>
Thank you for your help!
You are not using ng-route properly. You must define a view. The template for the view cannot be index.html, as that page is the root of your application. Your controller should be associated with the route. More info on ng-route
<!DOCTYPE html>
<body ng-app="AutApp">
<div ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
angular.module('AutApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/:message",
{
template: '<div id = "test"></div>',
controller: "ctrl"
}
);
})
.controller('ctrl', function($routeParams) {
document.getElementById("test").innerHTML = $routeParams.message;
});
</script>
I can see changes in the url but the content in that page is not visible in ng-view please help. The following are the code files.
Angular script
<script>
var app = angular
.module("myapp", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/Home", {
templateUrl: "Home.html",
})
.when("/ThankYou", {
templateUrl: "ThankYou.html",
})
})
</script>
Html code
This is the main UI.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<title></title>
</head ng-app="myapp">
<body>
<div>
Home
ThankYou
</div>
<div ng-view></div>
</body>
</html>
Home.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
Home
</div>
</body>
</html>
var app = angular.module("Demo", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/Home', {
templateUrl: 'Home.html',
controller: 'FirstController'
})
.when('/ThankYou', {
templateUrl: 'ThankYou.html',
controller: 'SecondController'
})
});
app.controller('FirstController', function($scope) {
});
app.controller('SecondController', function($scope) {
});
DEMO
I have following code to setup the routing using Angular UI Router:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Routing</title>
<script src="js/angular.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<base href="/" />
<script>
'use strict'
var myApp = angular.module('myApp', ['myApp.Controllers', 'ui.router']);
var myAppControllers = angular.module('myApp.Controllers', []);
myApp.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider.state('view1', {
url: '/view1',
controller: 'Controller1',
templateUrl: '/partials/view1.html'
}).state('view2', {
url: '/view2/:firstname/:lastname',
controller: 'Controller2',
resolve: {
names: function () {
return ['Misko', 'Voita', 'Brad'];
},
},
templateUrl: '/partials/view2.html'
});
$urlRouterProvider.otherwise('/view1');
$locationProvider.html5Mode(true);
});
myAppControllers.controller('Controller1', function ($scope, $location, $state) {
$scope.loadView2 = function () {
$state.go('view2', {
firstname: $scope.firstname,
lastname: $scope.lastname
});
}
});
myAppControllers.controller('Controller2', function ($scope, $stateParams, names) {
$scope.firstname = $stateParams.firstname;
$scope.lastname = $stateParams.lastname;
$scope.names = names;
});
</script>
</head>
<body>
<ul class="menu">
<li><a ui-sref="view1">View1</a></li>
<li><a ui-sref="view2">View2</a></li>
</ul>
</body>
</html>
I checked multiple times and I don't see any errors in console window of the chrome browser.
Can anyone help me to resolve this issue?
There's no ui-view directive in your html code. So the views have nowhere to render. You should add at least
<div ui-view></div>
to show the content of the views.