Trying to write a ui.router in typescript for the first time. as of now my code looks like this:
class Configuration {
constructor(private $stateProvider: ng.ui.IStateProvider,
private $urlRouterProvider: ng.ui.IUrlRouterProvider) {
this.init();
}
private init(): void {
this.$stateProvider.state("main", Configuration.defaultState());
this.$stateProvider.state("login", Configuration.login());
this.$urlRouterProvider.otherwise('/main');
}
private static defaultState(): ng.ui.IState {
return {
url: "/main"
, template: "<h1>hello</h1>"
}
}
private static login(): ng.ui.IState {
return {
url: "/login"
, template: "login"
}
}
}
angular.module('smm')
.config(($stateProvider: ng.ui.IStateProvider,
$urlRouterProvider: ng.ui.IUrlRouterProvider) => {
return new Configuration($stateProvider, $urlRouterProvider)
});
As much as the compile code looks all right, the router does not seem to work, I have no error in the console nor any route is executed. I guess the problem is silly but I can't seem to find it. Any idea?
For me is your code working as is. There is a working plunker with your code as is.
This is the index.html
<html ng-app="smm" >
<head>
<title>my app</title>
<style>ul { padding-left: 0; } li { list-style: none; }</style>
<script data-require="angular.js#*"
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
></script>
<script data-require="ui-router#*"
src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"
></script>
<script src="script.js"></script>
<script src="Config.js"></script>
</head>
<body>
<ul>
<li>/login
<li>/main
</ul>
<div ui-view=""></div>
</body>
</html>
This is script.js:
var app = angular
.module('smm', [
'ui.router'
])
And content of the Config.js could be found here
Check the working example here
Note, with
<html ng-app="smm" ng-strict-di>
...
we would need:
angular.module('smm')
.config(['$stateProvider', '$urlRouterProvider',
($stateProvider, $urlRouterProvider) => {
return new Configuration($stateProvider, $urlRouterProvider)
}]);
Check that forked version here, and playground snippets here
Related
I'm trying to make a single page application with a Spring back end and an AngularJS front end. I've followed tutorials and looked up similar questions but ngRoute just doesn't seem to work with a Spring back end (I got it to work with a NodeJS back end).
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Spring Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="../static/index.js"></script>
</head>
<body ng-app="index" ng-controller="indexController">
test
<div ng-view=""></div>
</body>
</html>
test.html
<div>
Template loaded
</div>
index.js
'use strict';
const indexModule = angular.module('index', ['ngRoute']);
indexModule.controller("indexController", function indexController($scope) {
});
indexModule.config(function($routeProvider) {
$routeProvider.when('/test', {templateUrl: 'test.html'});
});
SringDemoController.java
package com.springdemo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
#Controller
public class SpringDemoController {
#RequestMapping({ "/" })
public String getIndexTemplate() {
return "index";
}
}
I get this error when I click the link and the URL changes to http://localhost:8080/test
Here is the solution.
The Index page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test title</title>
</head>
<body ng-app="TestApp">
<div>
<h1>The Index</h1>
<ul>
<li>
<a ng-href="#!/test"> Temp One</a>
</li>
</ul>
<div ng-view=""></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
<script src="js/config.js"></script>
<script src="js/controller/main.js"></script>
<script src="js/controller/test.js"></script>
</body>
</html>
The Router config (its called config.js)
'use strict'
angular.module('TestApp' , ["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when('/' , {
templateUrl : "view/main.html",
controller : 'MainController',
controllerAs : 'main'
})
.when('/test' , {
templateUrl : "view/test.html",
controller : 'TestController',
controllerAs : 'test'
})
.otherwise({
redirectTo: '/'
});
});
And the server-side controller for the route :
package com.testApp;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
#Controller
public class ServerController {
#RequestMapping(value = "/test")
public String getTestTemp() {
return "static/test";
}
}
UPDATE :
actually, the method inside the ServerController is not needed. It can be written as follows
package com.testApp;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
#RestController
#RequestMapping(value = "/test")
public class ServerController {
}
So if you write any REST method in this controller, the endpoint from both client and server side will be /test/{the Name of your endPoint }
Here is the Project Structure
If you add more templates, make sure you create the routeon the client side and also the server side
My folder structure is:
-ngTest
--Scripts(all js files)
--index.html
--main.js
--partialView.html
index.html code is as follows:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<meta charset="utf-8" />
</head>
<body>
<p>Hello world</p>
<div ng-view></div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js is :
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
})
}).controller('newCtrl', function () {
console.log('finally');
});
partialView.html:
<div>
<p> From view</p>
</div>
What am I missing in this code?
If you want to load partialView.html as default you have to route to "/", not to "/home".
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
})
}).controller('newCtrl', function () {
console.log('finally');
});
"/html" will be accessed if you link to it in your html file, for example with:
<a href=#/html>Link<a>
Your code looks good but missing something:
You need an anchor that make you go to /home, you can add it in the index file as follow:
Red
Then click the home anchor to make your partial view appear.
Or
In the router configuration modify the home to make it only "/", so the code will be as the following:
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
}).controller('newCtrl', function () {
console.log('finally');});
One last thing, if you're using angular latest 1.6.0, you have to add the following code:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');}]);
I don't manage to route using ui-router. It does work for me with ng-route, so I must have missed something basic. There is no error but I don't get any view.
The following code does not work (except for the otherwise statement):
angular.module("employeesApp", ["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('employeeList', {
url: "/employees",
templateUrl: "components/employee_list/employeeListView.html",
});
$urlRouterProvider.otherwise("/employees");
});
The following code does work:
angular.module("employeesApp", ["ngRoute"])
.config(function ($routeProvider) {
var employeeListRoute = {
templateUrl: "components/employee_list/employeeListView.html"
};
var otherwiseRoute = employeeListRoute;
$routeProvider
.when("/employeeList", employeeListRoute)
.otherwise(otherwiseRoute);
Here is my index.html (omitted not relevant elements):
<!DOCTYPE html>
<html lang="en" ng-app="employeesApp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="app.route.js"></script>
<script src="components/employee_list/employeeListCtrl.js"></script>
</head>
<body>
<div>
<ng-view />
</div>
</body>
</html>
What am I doing wrong when trying to use ui-router?
As #AminMeyghani already said, you should be using ui-view instead of ng-view directive to get router know that relative view should be loaded inside ui-view directive
<div>
<ui-view></ui-view>
</div>
Demo here
simple angular ui example not working. There are no errors in console.
Here is the example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
</head>
<script>
window.onload = function ()
{
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller('MainCtrl', function ($scope) {
});
myApp.config(function ($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/first");
// ui router states
$stateProvider
.state('first', {
url: "/first",
views: {
header: {
template: '<h1>First header</h1>',
controller: function ($scope) {
}
},
content: {
template: '<p>First content</>',
controller: function ($scope) {
}
},
footer: {
template: '<div>First footer</div>',
controller: function ($scope) {
}
}
}
});
});
}
</script>
<body ng-controller="MainCtrl">
<ul>
<li>First</li>
<li>Second</li>
</ul>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<!-- Bootstrap core JavaScript + Angular Js
================================================== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
</body>
</html>
I have included all the resources using external cdn. The template content written in angular is not displayed. I am I doing it correctly?
Here is the plunker: Plunker
You have not mentioned app name anywhere in the view.
<html lang="en" ng-app="myApp">
Here is the working Plunker
Remove window.onload. Make sure the angular and ui-router scripts are loaded before your script. And add the missing ng-app="myApp" to the html element.
Plunkr: http://plnkr.co/edit/XaR3KD2hJ1jOVZ2mWi5H?p=preview
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>