I am using Angular 1.3, creating views using ui-router and ui-view.
I have added the ui-view on index.html file, which has Menu, footer and in the middle ui-view for main content.
I have created whole application using states with $stateProvider.state('state_name')
Now I want to create a page with plain text, no html tags, just plaintext. But the problem is when I create route for that, it includes header and footer, which is correct behavior of Angular. But how can I create a view with no menu, footer included, just plain text which I will add in view file, with route. Any solution?
You can have a service that changes is bond to the main controller. The first answer to this question explains how this can be achived.
I've made a modified Plnkr example for your specific use case here
app.factory('Page', function(){
var visible = true;
return {
visible: function() { return visible; },
setVisible: function(state) { visible = state}
};
});
The factory called Page provides access to a visible variable for both the main controllers and the controllers inside the ng-views.
The aim is to change this visible variable in the controller in order to change the visibility of the main components outside of the ng-view.
function MainCtrl($scope, Page) {
$scope.Page = Page;
}
To this end we have a binding in the main controller that can access the page service.
<html ng-app="myApp" ng-controller="MainCtrl">
<body>
<h1 ng-hide="Page.visible()">Page Header</h1>
<ul>
<li>test1
<li>test2
</ul>
</html>
And in the html, we define that the ng-if is controlled by this visible variable in the MainContorllers Page.
function Test1Ctrl($scope, Page) {
Page.setVisible(false);
}
Finally, we can call the change visibility function from the other views in order to change the visibility of the headers and footers in the Main View.
Related
I have main.cshtml file
It has a head tag which includes css and js references.
I have two directives / templates.
I want to have different two title. When page1 opened (has template1) I want page's title to be Page-1.
When page2 opened (has template2) I want page's title to be Page-2.
I tried to put head tags to directive but it doesn't read title and icon-for-title.
<div style="height: 100%">
<head>
<title>{{::title}}</title>}}
<link rel="shortcut icon" href="../../../../icons/icon1.ico">
</head>
<div class="..." >
<div class="...">
<div>...............
It doesn't work neither like that or head tag is over the main div.
I tried to do with routing, in route giving title property but in config file rootScope can not be read.
So I tried to run() with module. But it didn't work too.
module.run(function($rootScope){
$rootScope.$on("$routeChangeSuccess", function(currentRoute,
previousRoute){
//Change page title, based on Route information
$rootScope.title = $route.current.title; }) ;});
Can you please help how can I have these two different title and icons. Or if it has to be two different head tag to see them, how can I create these?
I don't have a lot of information to go on for your specific use case,
but we set the title programmatically like this:
$document.prop('title', title);
You could trigger this code on $stateChangeSuccess.
In this example, you define the title in the state definition and update it when the state changes:
var module = angular.module('someModule', ['ui.router']);
module.run(function($rootScope, $stateProvider, $document) {
// use ui-router additional route data to configure the title of the state
$stateProvider.state('someState', {
url: 'someUrl',
controller: 'SomeCtrl',
templateUrl: 'some.tpl.html',
data: {
title: 'Your states title goes here'
}
});
$rootScope.$on("$stateChangeSuccess", function(event, currentState) {
//Change page title, based on title found in route definition
$document.prop('title', currentState.data.title);
});
});
This examples assumes you're using ui-router for routing.
I have an Angular page which has a login page, a register account page, and the rest of the page. Login/register looks different from the other pages, as they have no sidebar, toolbar, and so on. Totally different layout. I have an index page and an index controller, which determines which view to load currently. Something like this:
<body ng-app="myApp" ng-controller="IndexController as vm">
<div ui-view ng-if="$state.current.name === 'home'"></div>
<div ng-if="$state.current.name !== 'home'">
<!--TOOLBAR-->
<!--SIDEBAR-->
<div ui-view></div>
</div>
</body>
So basically if the current state is home, it should load the first view (with no toolbar, sidenav etc.). If the current state is not set to home, it should show the toolbar, sidebar, and so on. I thought this would work, but is there a better way to do it? I have all my states inside my app.js.
Let me know if there's a better way of separating the different views. Why I'm doing this, is because I want to keep all the includes (models, views, controllers) and other scripts on one page (my index.html which contains the above) and just change the view accordingly. Thanks.
Using the controller as syntax, i'm assuming $state isn't defined. You should add it to the controller scope (not $scope) (this.$state = $state) and call it using vm.$state.current....
Ideally you wouldn't do this though and use ui-routers nested states which solves this problem exactly.
https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views
There are a number of ways to do this. One is to fork the states so home does not inherit parent views.
$stateProvider.state('home', {})
.state('app', {}) // has parent views like menu
.state('app.foo', {}) // inherits views from app
Or used named views
<body>
<div ui-view="menu"></div>
<div ui-view="content"></div>
</body>
$stateProvider.state('app' { views: { menu: { ... } } } )
.state('app.home', { views: { 'menu#app': { /* inject empty tpl */ }, 'content#app' : { ... } } )
.state('app.foo', { views: { 'content#app' : { ... } } } );
I am trying to make Theater.JS work with Angular application.
If Div in which TheaterJS is supposed to insert dynamically typed contents is on the index page, it works perfectly fine.
But if I keep the same div on the page which is loaded using ui-view (or using ng-view for that matter), TheaterJs throws following exception
Uncaught TypeError: Cannot set property 'innerHTML' of null
I understand its happening because TheaterJs is loaded before main.html page is loaded through ui-view. But I am not sure how to handle this scenario.
Here is the plnkr demo with the example. The TheaterJS works when div is on index page but fails to work when the div is on main.html which is loaded dynamically using ui-view.
In my project, I want to use TheaterJS on a page loaded using ui-view.
By placing the script include into the <head> and moving the call to new TheaterJS() into a directive, you are able to use it in your partials.
Here is a plunker showing your working template:
http://plnkr.co/edit/JAbSmNOAZtUMkc976sh8?p=preview
Directive:
app.directive("theaterDirective", function() {
return {
link: function () {
var theater = new TheaterJS();
theater.describe("text", {speed: .7, accuracy: .7}, "#text");
theater.write("text:It now works in template partials", 600);
theater.write("text:It is no longer restricted to the Index page", 600);
theater.write(function () { theater.play(true); });
}
}
})
HTML partial:
<h1>This is main.html page content</h1>
<h1 theater-directive id="text"><noscript></noscript></h1>
PLUNKER
I'm developing an AngularJS SPA, using ng-route and ng-animate. I'm trying to display the Bootstrap Carousel on the index.html#/ using ng-show. Very simple task.
I want the Carousel to show on the index page, but not on the about page or the contact page.
I'm trying to do the logic in my indexController like so:
if ($location.path() == "/") {
$scope.isIndexPage = true;
}
And in my HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel" ng-show="isIndexPage">
But it does not work as expected: the Carousel does not display. Once the ng-show attribute is removed, the carousel displays, but on all pages.
How can I get the Carousel to display only on the index page? I've tried variations such as ng-include-ing and ng-ifing carousel.htm. Numerous Google searches such as "AngularJS SPA and Bootstrap Carousel" reveal unanswered SO questions.
Thanks in advance for any input. Here's the PLUNKER.
It's a bit strange not to put something that is specific to the home page into the template of the home page, but anyway...
Your code has 2 main problems:
you're trying to access a variable from the indexController scope from a part of the page that is not controlled by this controller. The controller only controls its view. The $scope of the controller is limited to its view.
You're initializing the isIndexPage variable only once. It never changes after.
Solution:
create a controller for the whole body of the page, and put the logic used to control the visibility of the carousel in that controller
use a function that will return true or false based on the current location
See http://plnkr.co/edit/8luxeIbyIPEKy0LkemM0?p=preview for a fork of your plunker (the additional JS code is at the end of script.js):
appname.controller('MainCtrl', function($scope, $location) {
$scope.isIndexPage = function() {
return $location.path() === '/';
}
});
and in the index.html file:
<body ng-controller="MainCtrl">
<div ng-show="isIndexPage()" ...>
In a AngularJS (1.2.7) project, using UI Router (0.2.8), I want to apply the current state as a class to the ui-view element, because that would allow me to apply animations for specific states, e.g. do transition A going from login to start and do transition B going from start to settings.
At the moment I have the $state object on the $rootScope (as mentioned here, which allows me to add a state-based class on the body using ng-class="$state.current.name". However, if I add that to the ui-view element, e.g.
<div ui-view ng-class="$state.current.name"></div>
Then the class is one step behind the actual state. So when going from "login" to "start", the class will be "login" instead of "start".
I think this is a bug, you can read more about the issue here:
https://github.com/angular-ui/ui-router/issues/866
Until it is fixed I suggest such a workaround:
<div ng-class="$state.current.name"><div ui-view></div></div>
I'm reading between the lines of what I think you're trying to do: you want to style a particular view differently depending on the state/route. Here's what I'm doing currently:
1) Set a state attribute on the HTML element:
<html lang="en" ng-app="MyApp" ng-controller="MyAppCtrl" state="{{ state }}">
<div ui-view="nav"></div>
<div ui-view="page" autoscroll="true"></div>
</html>
2) Update the state name whenever the route changes:
app.controller('MyAppCtrl', function($rootScope){
$rootScope.state = 'home';
$rootScope.$on('$stateChangeSuccess', function(event, toState) {
$rootScope.state = toState.name;
});
});
3) Using attribute selectors in the stylesheets:
[state="app.articles"] [ui-view="page"] {
section {
font-size: 1.8rem;
}
}
Instead of adding $state to $rootScope I just put a method on the controller of my root directive that returns the active state name. Then I added to the DOM like so:
<ui-view active-state="{{ctrl.getActiveState()}}"></ui-view>
Then in my CSS I can use selectors like this:
[active-state="someStateName"] { ... }
If you prefer a class it would be just as easy to do this:
<ui-view class="{{ctrl.getActiveState()}}"></ui-view>
...but you would want to replace all "." characters with "-" in your getActiveState() method.
but, i has question about that : <div ng-class="$state.current.name"><div ui-view></div></div>
$state.current.name equal user.login hou to code my css?