I'm using AngularJS for a store app(using Laravel for back-end as API). But now I want to implement a blog on the same app. For example I'm in the store(this has one layout), I click on the Blog link in the menu and it redirects me to another page that has a totally different layout. Is this possible?
Here is my index.html:
<div class="row">
<!-- Menu -->
<div class="col-sm-2">
<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<a class="navbar-brand" href="/#/"><i class="ion-ios7-pulse-strong"></i> Ugurt</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li ng-if="isAuthenticated()">Post</li>
<li ng-if="isAuthenticated()">Blog</li>
</ul>
<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right">
<li>Login</li>
<li>Sign up</li>
</ul>
<ul ng-if="isAuthenticated()" class="nav navbar-nav pull-right">
<li>Logout</li>
</ul>
</div>
</div>
</div>
<!-- Different Partial Files -->
<div class="col-sm-10">
<div ui-view></div>
</div>
</div>
Here is my stateProvider config(a portion):
angular.module('Ugurt', ['ngResource', 'ngMessages', 'ngAnimate', 'toastr', 'ui.router', 'satellizer', 'checklist-model', 'ngCart', 'textAngular'])
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$stateProvider
.state('home', {
url: '/',
controller: 'HomeCtrl',
templateUrl: 'partials/home.html'
})
.state('store', {
url: '/store',
controller: 'StoreCtrl',
templateUrl: 'partials/store.html'
})
Every link I click on shows a different partial file because of the ui-view attribute. But when I click on the Blog link, I want it to lead to a different file that a completely different layout and menu. I want to put the both in the same app because the register and login is going to be the same for both parts. And when one user is logged in in the store, if he goes to the Blog part, I still want him to be logged in without doing anything.
Any ideas?
If you have ui-router like structure, you have route names, so you just need to create new route with different layout and redirect to new route.
Well there are already a way to do that, using a proper router like ui-router.
For example:
You have two main states, store and blog. What you can do is configure those two states in te $stateProvider under app.config.
For example:
myApp.config(function ($stateProvider){
$stateProvider.state('store', {
url: '/store',
templateUrl: 'store-layout.html'
});
// and then, when it requires to have substate of store you must inherit this state from store state
// also you'll have to specify a new ui-view inside store-layout.html to be the outlet of the nested states
$stateProvider.state('store.categories', {
url: '/store/categories',
templateUrl: 'store-categories.html'
});
$stateProvider.state('blog', {
url: '/blog',
templateUrl: 'blog-layout.html'
});
$stateProvider.otherwise('/store');
});
Related
I'm using ui.router for routing in my Angular app. This is a very simple app which have only 3 views: Home , FAQ and Contact.
I have define 3 different states for each page and define their template url, but no navigation is working at all.
No view template is loaded into my index.html.
I am attaching the following code
var app = angular.module('app', ['ui.router'])
app.config(['$stateProvider,$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider.state('home',{
url:'/home',
templateUrl:'Home.html'
}).state('contact',{
url:'/contact',
templateUrl:'Contact.html'
}).state('faq',{
url:'/faq',
templateUrl:'FAQ.html'
})
}]);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router </a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="faq">FAQ</a></li>
<li><a ui-sref="contact">Contact</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
and my views are very simple one, for example Home.html
<div>
Home Page!
</div>
You forgot to close your dependencies quotes:
Just change
app.config(['$stateProvider,$urlRouterProvider',
To
app.config(['$stateProvider','$urlRouterProvider',
Plunker
Even I faced the same problem in the beginning. I solved it by running
the application on a local server.
You can use brackets editor which has an inbuilt server.
I am creating an Bootstrap/Angular app and using $routeProvider to render the views, and want to have tabs within one of those views. However, the active tab Bootstrap functionality isn't toggling. Here's what my index.html, app.routes.js, and main.html look like:
Index.html
<!doctype html>
<head>...</head>
<body ng-app="app">
<nav>...</nav>
<div ng-view=""></div>
...
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="assets/js/custom.js"></script>
</body>
app.routes.js
var app = angular.module('app');
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'components/main/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
...
main.html
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab3</a></li>
<li><a data-toggle="tab" href="#tab4">Tab4</a></li>
</ul>
<div class="container">
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
...
</div>
<div id="tab2" class="tab-pane fade">
...
</div>
<div id="tab3" class="tab-pane fade">
...
</div>
<div id="tab4" class="tab-pane fade">
...
</div>
</div>
</div>
How can I run my Javascript within the main.html route and more specifically get the Bootstrap active tab script working?
The problem is that AngularJS doesn't play well with Bootstrap's default JS. Upon another developer's recommendation, I replaced Bootstrap's JS with ui-bootstrap. Following the documentation there on tabs, I got my app working! Here's a good resource on the issue.
If using bootstrap try angular-bootstrap it wraps bootstraps components in angular directives to create a tab component you'll be using their tab component directive here is a plunker:
http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/
documentation http://angular-ui.github.io/bootstrap/#/tabs
Good luck
I have a small controller and some basic data. Here is my code. I am not sure why when I click the link, my messages won't show. In the console, I get no errors at all. I consoled the variables, and they show up. For some reason, it doesn't work in the view. I am not sure what I am missing.
index.html -- navigation menu
<ul class="nav navbar-nav" ng-controller="menu">
<li class="active"><a href ng-click="showMessage('Home')">Home</a></li>
<li><a href ng-click="showMessage('Work')">Work</a></li>
<li><a href ng-click="showMessage('Contact')">Contact</a></li>
</ul>
<div class="container" ng-controller="menu">
<h1> {{ message }} </h1>
</div><!-- /.container -->
Controller
angular.module('website', [])
.controller('menu', function($scope) {
// show the message on click
$scope.showMessage = function(messages) {
$scope.message = messages;
console.log($scope.message);
return $scope.message;
};
});
If you define two times the ng-controller, both will have separated scope.
You need to put all usages of controller in a block:
<div ng-controller="menu">
<ul class="nav navbar-nav">
<li class="active"><a href ng-click="showMessage('Home')">Home</a></li>
<li><a href ng-click="showMessage('Work')">Work</a></li>
<li><a href ng-click="showMessage('Contact')">Contact</a></li>
</ul>
<div class="container">
<h1> {{ message }} </h1>
</div>
</div>
You have 2 separate instances of the menu controller and they do not share the same scope
When you update one of the scopes, the other has no knowledge of it. You can use a service to share data across controllers or change structure you are using implementing separate controller instances
I want to load a page on click of the menu item of my menu but the state gets reflected into my URL of browser and the content of that page doesn't gets loaded, as far as I have studied the tutorial states are declared like that only , my code is not showing me any error also.
here is my route.js file
app.config(function config($stateProvider)
{
$stateProvider.state("index",{
url:"",
controller:"MainCtrl",
templateUrl:"templates/home/home.html"
}),
$stateProvider.state("development",{
controller:"EmployeeCtrl",
templateUrl:"templates/employee/employee.html"
});
})
This is my list in the home page on whose href I have declared states my index state is working perfectly fine.
<ul class="nav navbar-nav">
<li class="active">Development</li>
<li>Design</li>
<li>Exercise</li>
<li>Humor</li>
</ul>
Here is the code for the page employee.html whose content I want to display when development state is fulfilled.
<div>
<input type="text" ng-model="searchText">
<table>
<tr ng-repeat="emp in employee.data | filter:searchText"></tr>
<td>{{emp.firstname}}</td>
<td>{{emp.lastname}}</td>
</table>
</div>
State should be differentiated on base of their URL's, so you need to add url parameter in your state, that should be url: '/development', for development state, so that when URL changes in browser will detect by the $stateProvider and then load specified controller & template by the state definition.
Code
$stateProvider.state("development",{
url: '/development',
controller:"EmployeeCtrl",
templateUrl:"templates/employee/employee.html"
});
You should also use ui-sref directive to make sure your href has been created properly. You only need to specify stateName only in ui-sref it will render the value from state url like for ui-sref="development" it would be href="#/development"
Use ui-sref for state routing. Do:
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="development">Development</a></li>
<li><a ui-sref="design">Design</a></li>
<li><a ui-sref="exercise">Exercise</a></li>
<li><a ui-sref="humor">Humor</a></li>
</ul>
I am using angular UI-Router and bootstrap collapse panels to build a sidebar for a style guide. My sidebar as is "works" but I'm getting a
Error: Cannot transition to abstract state 'parent'
when clicking the child states. In my real solution there are many parents with child groupings and the parents truly are abstract (i.e. they don't represent a physical page or state). I know I can't link directly to the parent states, and I don't believe I am, I just need to set their ui-sref in the parent panel so that I can get the parent to stay open by setting the ui-sref-active attribute.
I have an example running on plunker: http://plnkr.co/edit/bnvGcaOvzW4que8g3vh7?p=preview
code for reference:
angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: "/",
templateUrl: "layout.html"
})
.state('parent', {
abstract: true,
url: '/parent',
templateUrl: "layout.html"
})
.state('parent.child', {
url: "/child",
templateUrl: "child.html"
})
});
layout.html
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<a ui-sref="home">Home</a>
<div class="panel-group" id="sidebar">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#sidebar" data-target="#parent"
class="collapsed">Parent</a>
</h4>
</div>
<div id="parent" ui-sref="parent" class="panel-collapse collapse" ui-sref-active="in">
<div class="list-group">
<a ui-sref="parent.child" ui-sref-active="active" class="list-group-item">Child</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-9">
<div ui-view></div>
</div>
</div>
</div>
Short Answer:
Just remove ui-sref="parent" from your code. This particular ui-sref attribute is not required in order for ui-sref-active to work as you expect.
Long Answer:
ui-sref-active works by finding all child elements with a ui-sref and adding these elements to a states array attached to the element. On $stateChangeSuccess, each element loops through this array and if a state is found that matches the array, then the class is applied.
As an example:
<ul>
<li ui-sref-active="open">
<a ui-sref="app.home">Link</a>
<ul>
<li>
<a ui-sref="app.home.this"></a>
</li>
<li>
<a ui-sref="app.home.that"></a>
</li>
<li>
<a ui-sref="app.home.whatever"></a>
</li>
<li>
<a ui-sref="temp"></a>
</li>
</ul>
</li>
</ul>
In the above example, assume app is an abstract. All 4 of those links will trigger the open class on the parent element, as they are contained within. It doesn't matter that they are not all part of the app.home structure.