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'},
}
});
}]);
Related
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', [])
I'm trying to build a very simple app using angular UI-Router.
My index.html file:
<!DOCTYPE html>
<html ng-app="elara">
<head>
<script type="text/javascript" src="/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/ctrl/indexCtrl.js"></script>
<script type="text/javascript" src="/js/ctrl/registerCtrl.js"></script>
</head>
<body>
<ng-view> </ng-view>
</body>
</html>
app.js file
angular.module('elara', ['ui.router'])
.run(
['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.For example,
// <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
// to active whenever 'contacts.list' or one of its decendents is active.
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/tmpl/index.html',
controller: 'indexCtrl'
})
.state('register', {
url: '/register',
templateUrl: '/tmpl/register/register.tmpl.html',
controller: 'registerCtrl'
})
}
]);
The indexCtrl.js file
app = angular.module('elara', []);
app.controller('indexCtrl', ['$scope', function($scope){
$scope.message = "index"
}])
and registerCtrl.js is same. Just controller name and message is different.
in my x.tmpl.html files i just want to write message variable.
{{message}}
Problem is, when I navigate to url / or #/register I am always getting empty page. message variable is not in the page or my template htmls are not loaded.
Also there are not errors in the console.
The target for states is ui-view
// <ng-view> </ng-view>
<div ui-view=""></div>
In case, we use named views : {'myName': { ... } } we provide the name like this
<div ui-view="myName"></div>
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 am new to angularjs ,i make a sample app with custom directives now i add routing as well but it doesn't working.When i start project nothing is displayed in browser.
here is my index.html:
<html ng-app="myApp">
<head>
<title>Reddit New World News (Task)</title>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="angular/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="myApp.js"></script>
<script src="myAppCtrl.js"></script>
<script src="routes.js"></script>
<script src="headerDirective.js"></script>
<script src="searchDirective.js"></script>
<script src="myDataDirective.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
myAppCtrl:
// TODO: Wrap in anonymous function
(function () {
var myApp = angular.module('myApp', ['ui.router']);
// TODO: min-safe with bracket notation
myApp.controller('myAppCtrl', ['$scope', '$http', function($scope, $http) {
$scope.sortType = '';
$scope.sortReverse = true;
// TODO: Keep lines short - it's easier to read
$http.get("https://www.reddit.com/r/worldnews/new.json")
.success(function (response) {
$scope.stories = response.data.children;
});
}]);
myApp.controller('aboutController',function(){
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
myApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
})();
headerDirective.html:
<div class="top-header"></div>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="header">
<h1>Reddit</h1>
</div>
<div class="header-right">
<h2>World's Latest News</h2>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
</div>
routes.js:
angular.module('myAppCtrl')
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index.html');
// See route.webapp.js for allowed routes
$stateProvider
.state('app', {
templateUrl: '/templates/app.html',
controller: 'myAppCtrl',
abstract: true
})
.state('app.home', {
url: '/home',
templateUrl: '/templates/index.html',
controller: 'myAppCtrl'
})
.state('app.about', {
url: '/about',
templateUrl: '/templates/about.html',
controller: 'aboutController'
})
.state('app.contact', {
url: '/contact',
templateUrl: '/templates/contact.html',
controller: 'contcatController'
});
$locationProvider.html5Mode(true);
}
]);
})();
any guide thanks.
First there is a problem with your config block :
myApp.config(...)
not
angular.module('myAppCtrl').config(...);
Else you're redeclaring a new module. That doesn't make sense. You mix up controllers and module, that's two different things.
Then you have to change some things in your HTML file :
If you're using UI-Router it's :
<div ui-view></div>
not like ngRouter :
<div ng-view></div>
Then you're using $locationProvider.html5Mode(true);
So you have to configure your server to emulate paging, see doc.
Finally you have to add the base href of your angular application in the <head> tag like that :
<base href="/">
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('/');
});