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('/');
});
Related
I am a newbee to angular. in my web app i have a side bar loaded in a ui-view from template in the index page and there is another ui-view where i want to load template clicking links from the side bar. here are my codes and templates...please help me...
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body ng-app="testapp" ng-controller="mainCtrl">
<div class="container">
<div class="row">
<div class="col-md-4" ui-view="sidebar">
</div>
<div class="col-md-8" ui-view="content">
</div>
</div>
</div>
<!-- Javascript links and scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<script type="text/javascript">
var app = angular.module('testapp', ['ui.router']);
/*route configuration*/
app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('home');
$stateProvider.state('home',{
views:{
'sidebar':{templateUrl:'sidebar.html'},
'content':{templateUrl:'default.main.html'},
}
});
$stateProvider.state('home.page02',{
views:{
'content#home':{templateUrl:'page02.html'},
}
});
}]);
/*main controller at index page*/
app.controller('mainCtrl', ['$scope','$state', function ($scope,$state) {
$state.go('home');
}]);
</script>
</body>
</html>
<ul>
<li>home</li>
<li>page01</li>
<li>page02</li>
</ul>
<h2>Page 01 is here!</h2>
In ui-routing we can use ui-sref which takes the complete state name as its value
for example:
<li>page02</li>
and the controller should be like:
var app = angular.module('testapp', ['ui.router']);
/*route configuration*/
app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('home');
$stateProvider
.state('home',{
views:{
'sidebar':{templateUrl:'sidebar.html'},
'content':{templateUrl:'default.main.html'},
}
})
.state('home.page02',{
views:{
'content#home':{templateUrl:'page02.html'},
}
});
}]);
/*main controller at index page*/
app.controller('mainCtrl', ['$scope','$state', function ($scope,$state) {
$state.go('home');
}]);
<li>page02</li>
ui-sref must contain a state name. if you want to go to home.page02 it should be
<li>page02</li>
and no need to give every time $stateProvider.state()
Just do it like
$stateProvider
.state('home', {url: '', template: ''})
.state('home.page02', {url: '', template: ''})
And named-views usage https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views go through the link provided. It is awesome
i changed the script...
app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('home');
$stateProvider
.state('home',{
views:{
'sidebar':{templateUrl:'sidebar.html'},
'content':{templateUrl:'default.main.html'},
}
})
.state('home.page02',{
views:{
'content#':{templateUrl:'page02.html'},
}
});
}]);
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', [])
Im trying to use the Ionic Framework to create an app but i have problems to get a simple example to work. This is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- pouchdb -->
<script src="lib/pouchdb/pouchdb.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/modules/home.js"></script>
<script src="js/controller/home.js"></script>
</head>
<body ng-app="App">
<ion-nav-view></ion-nav-view>
</body>
</html>
My app.js
angular.module("App", ["ionic", "App.Home"])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app", {
url: "/app",
abstract: true,
templateUrl: "templates/home.html",
});
$urlRouterProvider.otherwise("/app/home");
})
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
My module home:
angular.module("App.Home", [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
views: {
"main": {
templateUrl: "templates/home.html",
controller: "HomeController"
}
}
});
});
As you can see here i want the home.html to use the HomeController So here is the HomeController
angular.module("App.Home")
.controller("HomeController", function() {
console.log("controller");
});
But the home controller actually never is called. The logoutput never appears. My home.html is showing:
<ion-view view-title="Home">
<ion-content>
Home
</ion-content>
</ion-view>
I mapped the controller to the template so why isnt the controller method getting called?
EDIT
if i change my home.html to the following:
<ion-view view-title="Home">
<ion-content ng-controller="HomeController">
Home
</ion-content>
</ion-view>
It works. So setting ng-controller="HomeController" works fine but
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
templateUrl: "templates/home.html",
controller: "HomeController"
});
});
or
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
views: {
"main": {
templateUrl: "templates/home.html",
controller: "HomeController"
}
}
});
Does not work. For me that makes no sense. I want to use the stateProvider to set the controller.
EDIT 2
created a plunker
Fixed!
The controller gets instantiated when it gets bound to the view.
I set the templateUrl of my abstract state to be templates\home.html
That is wrong. I just had to do:
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app", {
url: "/app",
abstract: true,
templateUrl: "",
});
$urlRouterProvider.otherwise("/app/home");
})
and to use:
angular.module("App.Home", [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
templateUrl: "templates/home.html",
controller: "HomeController"
});
});
So without to define views.
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'?