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');
}
}
Related
I want to use routeProvider in ngRoute in angularjs to view my home.html or delete.html or add.html
app.js
var app = angular.module('MyApp', ['ngRoute']);
MyApp.config([
'$routeProvider',
function($routeProvider) {
$routeProvider
.when('/Add', {
templateUrl: 'html/add.html',
controller: 'AddController'
})
.when('/Edit', {
templateUrl: 'html/edit.html',
controller: 'EditController'
})
.when('/Delete', {
templateUrl: 'html/delete.html',
controller: 'DeleteController'
})
.when('/Home', {
templateUrl: 'html/home.html',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/Home'
});
}
]);
MyApp.controller('AddController', function($scope) {
$scope.message = "In add view"
});
MyApp.controller('DeleteController', function ($scope) {
$scope.message = "In delete view"
});
MyApp.controller('EditController', function ($scope) {
$scope.message = "In edit view"
});
MyApp.controller('HomeController', function ($scope) {
$scope.message = "In home view"
});
index.html
<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- bootstrap css -->
<link href="Content/bootstrap.min.css" rel="stylesheet"/>
<!-- Jquery js -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/internal/app.js"></script>
</head>
<body>
<div class="container">
<nav role="navigation" class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Add</li>
<li class="">Edit</li>
<li class="">Delete</li>
</ul>
</nav>
<div ng-view>
</div>
<!-- Footer -->
<h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
</div>
</body>
</html>
When I run my application, and click on any of the links, it gives me this url: http://localhost:51285/html/#!Edit
And in the body is this...
HTTP Error 403.14 - Forbidden
The Web server is configured to not list the contents of this directory.
In the sample that I am following, it doesn't have that error it just changes to the message.
you have some mistake in your code :
in your html:using Add
2.in your app.js:instead of MyApp.config or MyApp.controller use app.config and app.controller.MyApp is name of your app but you must use variable that your app stored on it.
follwing will working:
your html:
<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- bootstrap css -->
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<!-- Jquery js -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="internal/app.js"></script>
</head>
<body>
<div class="container">
<nav role="navigation" class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Add</li>
<li class="">Edit</li>
<li class="">Delete</li>
</ul>
</nav>
<div ng-view></div>
<!-- Footer -->
<h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
</div>
</body>
</html>
your app:
var app = angular.module('MyApp', ['ngRoute']);
app.config([
'$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/Add', {
templateUrl: 'html/add.html',
controller: 'AddController'
})
.when('/Edit', {
templateUrl: 'html/edit.html',
controller: 'EditController'
})
.when('/Delete', {
templateUrl: 'html/delete.html',
controller: 'DeleteController'
})
.when('/Home', {
templateUrl: 'html/home.html',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/Home'
});
}
]);
app.controller('AddController', function ($scope) {
$scope.message = "In add view";
});
app.controller('DeleteController', function ($scope) {
$scope.message = "In delete view";
});
app.controller('EditController', function ($scope) {
$scope.message = "In edit view";
});
app.controller('HomeController', function ($scope) {
$scope.message = "In home view";
});
I hope it could be ralted with configuration. Please check the link below! Angular force an undesired exclamation mark in url
My code is as shown below:
index.html
<!DOCTYPE html>
<html>
<head>
<title>quflip</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body ng-app="quflipMobWeb">
<ng-view></ng-view>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/services.js"></script>
<script src="js/controller/loginController.js"></script>
<script src="js/controller/homeController.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/driverController.js"></script>
<script src="js/controller/driversController.js"></script>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
home.html
<div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
homeController.js
angular.module('quflipMobWeb.homeController', []).
controller('homeController', function($scope) {
// console.log("home called");
});
app.js
angular.module('quflipMobWeb', [
'quflipMobWeb.services',
'quflipMobWeb.controllers',
'quflipMobWeb.login',
'quflipMobWeb.homeController',
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when("/home", { templateUrl: "template/home.html", controller: "homeController" }).
when("/login", { templateUrl: "template/login.html", controller: "loginController" }).
otherwise({ redirectTo: '/login' });
}]);
For detailed code, I have given my repository url here:
https://github.com/mrugesh008/testRepo.git
This is the website which I am following for achieving the effect
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
Your code almost works well. you can just add ng-style:
app.controller('homeController', function($scope) {
console.log("home called");
$scope.myStyle = {
width: '0px'
};
$scope.openNav = function() {
$scope.myStyle.width = '250px';
}
$scope.closeNav = function() {
$scope.myStyle.width = '0px';
}
});
Home.html
<div>
<div id="mySidenav" class="sidenav" ng-style="myStyle">
×
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" ng-click="openNav()">☰ open</span>
</div>
Demo Plunker
I have a simple controller (logincontroller) which gets initiated twice when loading login.html, however I do not know why that happens.
MyApp.js:
angular.module('PVM', [
'Authentication',
'Modal',
'ngRoute'
])
.config([
'$routeProvider', function($routeProvider) {
$routeProvider
.when('/Login', {
controller: 'LoginController',
templateUrl: 'Login.html'
})
.when('/Home', {
controller: 'ModalController',
templateUrl: 'Home.html'
})
.otherwise({
redirectTo: '/Login'
});
}
]);
LoginController.js:
angular.module("Authentication")
.controller("LoginController",
[
"$scope", "$rootScope", "$location", "AuthenticationService",
function($scope, $rootScope, $location, AuthenticationService) {
AuthenticationService.ClearCredentials();
$scope.login = function() {
var foo = "bar"; //Breakpoint hits here twice when loading login.html
};
}
]);
index.html:
<!DOCTYPE html>
<html ng-app="PVM">
<head>
<title>My Ang</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/MyCss.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div>
<div ng-view></div>
</div>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-route.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-animate.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-cookies.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="Scripts/Services/ModalService.js"></script>
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script>
<script src="Scripts/MyApp.js"></script>
</body>
</html>
Login.html:
<div class="container centeredDiv" ng-controller="LoginController">
<p>Login page</p>
</div>
Because your controller gets executed at 2 places.
From login.html - ng-controller
<div class="container centeredDiv" ng-controller="LoginController">
<p>Login page</p>
</div>
From controller associated with route - /Login
.when('/Login', {
controller: 'LoginController',
templateUrl: 'Login.html'
})
How to fix? You should remove the ng-controller attribute from login.html
You do not need the ng-controller in your template login.html because it is in your route. Simply remove it and that should do the trick.
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'
}
}
});
}
})();
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'?