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.
Related
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>
I am learning AngularJS and I have a problem with the controller.
This example below already worked, but it suddenly stoped without any changes that could cause that. I am not sure what is wrong.
The /templates/index.html file does not load.
This is my main index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todolist</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- ANGULAR JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/todolists.js"></script>
</head>
<body ng-app="app">
<div ui-view></div>
</body>
</html>
This is my app.js:
var app = angular.module('app', ['ui.router']);
app.config(function ($stateProvider) {
$stateProvider
.state('/', {
url: "/",
templateUrl: "app/templates/index.html",
controller: 'todolists',
});
});
This is my todolists controller:
var app = angular.module('app');
var controllers = {};
console.log("test");
controllers.todolists = function ($scope, $http) {
console.log("test1");
$http.get('http://localhost:8888/todolist/rest/entries/index.json').
then(function(response) {
console.log(response.data);
$scope.data = response.data;
});
};
app.controller(controllers);
console.log("test") writes to console, but console.log("test1") does not, so the controller is not accessed.
Please take a look and let me know if you have and tips about what could be wrong.
Thanks, Grega
You need to register a name for the controller is the problem. Ive registered the name 'todolistCtrl' which is the first argument needed for the controller registration method. the second argument is the function controllers.todolists.
you can then reference todolistCtrl within you State Provider.
controller
var controllers = {};
console.log("test");
controllers.todolists = function ($scope, $http) {
$http.get('http://localhost:8888/todolist/rest/entries/index.json').
then(function(response) {
console.log(response.data);
$scope.data = response.data;
});
};
angular.module('app')
.controller('todolistCtrl', controllers.todolists);
app
var app = angular.module('app', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('/', {
url: "/",
templateUrl: "index.html",
controller: 'todolistCtrl',
});
});
Plunker
Example
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
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>
I've got an incredibly simple AngularJS template, I'm trying to get routing to work but when I load the page I'm just seeing the H1 tag from my index.html.
My app is in a sub directory, /angular-route/, and I know that the partials exist, I can visit /angular-route/partials/interest.html and the page renders fine.
Have I missed something really basic here?
<html>
<head ng-app="myApp">
<title>AngularJS Routing</title>
<base href="/angular-route/" />
</head>
<body>
<h1>AngularJS Routing</h1>
<div ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
'use strict';
var myApp = angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/interest', {
templateUrl: 'partials/interest.html',
controller: 'InterestCtrl'
}).
when('/catalogue', {
templateUrl: 'partials/catalogue.html',
controller: 'CatalogueCtrl'
}).
otherwise({redirectTo: '/interest'});
}]);
myApp.controller('InterestCtrl', function($scope, $routeParams) {
console.log('InterestCtrl');
});
myApp.controller('CatalogueCtrl', function($scope, $routeParams) {
console.log('CatalogueCtrl');
});
</script>
Beside the base tag, which you will need, you've also placed the ng-app directive on wrong element (head). In your code, the Application is initialized only inside the header. Rest of the HTML is ignored by Angular.
WORKING PLUNKER
<html ng-app="myApp">
<head>
<title>AngularJS Routing</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script type="text/ng-template" id="partials/interest.html">
<h2>Inereset</h2>
</script>
<script type="text/ng-template" id="partials/catalogue.html">
<h2>Catalogue</h2>
</script>
</head>
<body>
<h1>AngularJS Routing</h1>
<ul>
<li>Interest</li>
<li>Catalogue</li>
</ul>
<div ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
'use strict';
var myApp = angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/interest', {
templateUrl: 'partials/interest.html',
controller: 'InterestCtrl'
}).
when('/catalogue', {
templateUrl: 'partials/catalogue.html',
controller: 'CatalogueCtrl'
}).
otherwise({redirectTo: '/interest'});
}]);
myApp.controller('InterestCtrl', function($scope, $routeParams) {
console.log('InterestCtrl');
});
myApp.controller('CatalogueCtrl', function($scope, $routeParams) {
console.log('CatalogueCtrl');
});
</script>
</body>
</html
Following configuration worked for me!
Let's say we want to access our app using http://localhost:8000/app/
Then have your base tag with the following highlighted