I got an example from here : http://scotch.io/tutorials/javascript/angular-routing-using-ui-router and I see an example about using route-ui as below:
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
// nested list with just some random string data
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
my question is : how can I use controller in other file and then call the name of that controller into .state's option ?
Here is my controller that I want to use in other file :
(function () {
'use strict';
angular.module("myCtrl", [])
.controller('myCtrl', function ($scope) {
$scope.dogs = ['name 1', 'name 2', 'name 3', 'name 4'];
})
})();
and here is my rout-ui :
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/partial-home.html',
controller: 'myCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'about/partial-about.html'
});
});
and below is my html page :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>testRoute</title>
<!-- testRoute references -->
<link href="css/index.css" rel="stylesheet" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body ng-app="routerApp">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
<div ui-view></div>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/app.js"></script>
<!--<script src="scripts/myController.js"></script>-->
</body>
</html>
Have you tried just doing controller: 'Name_of_your_Controller'?
Related
I have configured some basic state pretty much as it should but it seems the template is not injecting in <div ui-view></div>.
Here's my code.
https://plnkr.co/edit/LaMMc8JpCuq09Dav7CFW
EDIT:
My Index.html
<!DOCTYPE html>
<html ng-app="crudMasters">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script data-require="ui-router#*" data-semver="1.0.0-beta.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-beta.2/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<div ui-view></div>
</body>
</html>
script.js
var app = angular.module('crudMasters', ['ui.router']);
app.config(function($stateProvider, $urlRouteProvider){
$urlRouteProvider.otherwise('/');
$stateProvider
.state('root',{
url: '/',
templateUrl: "home.htm"
})
.state('root.master1', {
url: '/master1',
templateUrl: "master1.htm",
controller: 'master1Ctrl',
controllerAs: '$ctrl'
})
.state('root.master2', {
url: '/master2',
templateUrl: "master2.htm",
controller: 'master2Ctrl',
controllerAs: '$ctrl'
})
})
app.controller('mainCtrl', mainCtrl);
function mainCtrl(){
let ctrl = this;
}
You have many issues with your code,
(i) It's not urlRouteProvider it is $urlRouterProvider
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/");
$stateProvider
.state('root', {
url: '/',
templateUrl: "home.html",
controller: 'HomeCtrl'
})
.state('root.master1', {
url: '/master1',
templateUrl: "master1.html",
controller: 'master1Ctrl'
})
.state('root.master2', {
url: '/master2',
templateUrl: "master2.html",
controller: 'master2Ctrl'
})
})
DEMO
1) The main issue of your code is your first route,
.state('root',{
url: '/',
templateUrl: "home.htm"
})
Should be,
.state('root',{
url: '',
templateUrl: "home.htm"
})
This should has the url as '' if you are not on '/' url.
2) Also, as #Sajeetharan mentioned, $urlRouteProvider, should be $urlRouterProvider.
check this plunker now, with the same code as yours and with these two changes
Working DEMO with your code
So, make those two changes and your plunker is good to go.
This is my app.js
angular.module('data',['ui.router']).config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/app/views/showusers.html',
controller: 'Crud'
})
.state('about', {
url: '/about',
templateUrl: '/app/views/addusers.html',
})
});
CrudController.js
angular.module('values', []).controller('Crud', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
function edituser(id)
{
console.log(id);
}
});
This is index file
<!DOCTYPE html>
<head>
<title>
MEAN Stack App
</title>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="data">
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/app/controller/CrudController.js"></script>
<script src="/app/app.js"></script>
<div class="container">
<h1>MEAN Application</h1>
<h1>xsx{{firstName}}</h1>
<div ui-view>
</div>
</div>
</body>
</html>
when I define controller in app.js in site provider, it returns controller is not a function got undefind.
I am using angularjs1.5.8 version.Please help me out from this problem. I am new to this tech.. Thanks
You need to link both the App.js and Controller. In your service:
angular.module('values', ['controllerinject']) // => here you injected your controller
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/app/views/showusers.html',
controller: 'Crud'
})
$urlRouterProvider.otherwise('/home');
})
And in your controller add same angular.module('controllerinject', [])
Today i spent a whole day figuring out what was going wrong. For some reason when i click on app.main.foo and using version 0.2.13 of UI-Router this example works. But the exact same thing with version 0.2.15 i have to double click before my header and sidebar are loaded. I could simply use version 0.2.13 as this would fix my problem but is this a know issue or has somethings change since the latest version. This is my demo application :
index.html
<!DOCTYPE html>
<html ng-app="app" ng-strict-di>
<head>
<!--#version v1.4.7-->
<script src="angular.js"></script>
<!--#version v0.2.15
Header and side bar shows only after double clicking app.main.foo
<script src="angular-ui-router.js"></script>
-->
<!--Best version for this example -->
<script
src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="route.js"></script>
</head>
<body>
<ul>
<li><a ui-sref="app.login">app.login</a>
<li><a ui-sref="app.main">app.main</a>
<li><a ui-sref="app.main.foo">app.main.foo</a>
</ul>
<div ui-view=""></div>
<script type="text/ng-template" id="views/login.html">
<div>
Login view
</div>
</script>
<script type="text/ng-template" id="partials/sidebar.html">
<div>
<h3>SideBar View1</h3>
<div ui-view="sidebar"></div>
</div>
</script>
<script type="text/ng-template" id="partials/main.html">
<h3>Main View</h3>
</script>
<script type="text/ng-template" id="partials/header.html">
<h3>Header View</h3>
</script>
<script type="text/ng-template" id="views/layout.html">
<h2>Layout View</h2>
<div ui-view="header"></div>
<div ui-view="sidebar"></div>
<div ui-view="main"></div>
</script>
</body>
</html>
app.js
(function() {
'use strict';
angular
.module('app', ['ui.router'])
}());
route.js
(function() {
'use strict';
angular
.module('app')
.config(routesConfig);
routesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function routesConfig( $stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app', {
abstract: true,
url: '/',
template: '<ui-view/>'
})
.state('app.login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
controllerAs: 'login',
url: ''
})
.state('app.main', {
url: 'room',
templateUrl: 'views/layout.html'
})
.state('app.main.foo', {
url: '',
views: {
'header': {
templateUrl: 'partials/header.html'
},
'sidebar': {
templateUrl: 'partials/sidebar.html'
},
'main': {
templateUrl: 'partials/main.html'
}
}
});
}
})();
Can I do this?
<button ng-click='vm.foo()' ui-sref='state'>test</button>
Yes. ngClick will run, and then you'll transition to your state.
Demo (updated and working thanks to marioosh)
However, if you have an $event.preventDefault() in ngClick, it won't transition you to your state.
Full code example
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-router#*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller='MainController as vm'>
<ul>
<li><a ui-sref='home'>home</a></li>
<li><a ui-sref='one' ng-click='vm.test()'>one</a></li>
<li><a ui-sref='two'>two</a></li>
</ul>
<div ui-view></div>
</body>
</html>
angular
.module('app', ['ui.router'])
.config(config)
.controller('MainController', MainController)
;
function config($locationProvider, $urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
.state('one', {
url: '/one',
templateUrl: 'one.html'
})
.state('two', {
url: '/two',
templateUrl: 'two.html'
})
;
}
function MainController($scope) {
var vm = this;
vm.test = function() {
alert('test');
console.log('test');
}
}
I've created a index.html page where I am defining 2 links as:
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>My Angular App!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="js/app.js"></script>
</head>
<body>
<div id="links">
<a ui-sref="login">Login</a>
<a ui-sref="register">Register</a>
</div>
<div ui-view></div>
</body>
</html>
I my app.js file, I am defining the route as:
angular.module('test', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/register',
templateUrl: '/partials/register.html',
controller: 'registration'
});
$stateProvider.state('login',{
url: '/login',
templateUrl: '/partials/login.html',
controller: 'login'
});
$urlRouterProvider.otherwise('/');
}])
When I click on the links, defined in index.html file, it is not showing the another page as defined in app.js
You need not inject the dependencies in the config folder.
You can do it like this:
angular.module('test', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/register',
templateUrl: '/partials/register.html',
controller: 'registration'
});
$stateProvider.state('login',{
url: '/login',
templateUrl: '/partials/login.html',
controller: 'login'
});
$urlRouterProvider.otherwise('/');
});