angular js allowing user to go to next tab - javascript

I want to allow user to click button "next",then check a condition if it satisfies,then allow user to go to next page otherwise send a message 'you cannot view this page'.how to achieve this using angular 1??

Check out this plunker also check the ui-router docs for more info
https://plnkr.co/edit/j3XVyHTtWex9Dpgr1tF0?p=preview
html
<html>
<head>
<script src="//unpkg.com/angular#1.6.5/angular.js"></script>
<script src="//unpkg.com/#uirouter/angularjs#1.0.5/release/angular-ui-router.js"></script>
<script src="helloworld.js"></script>
<style>.active { color: red; font-weight: bold }</style>
</head>
<body ng-app="helloworld" ng-controller="Ctrl">
<ui-view></ui-view>
</body>
</html>
js
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var step1 = {
name: 'step1',
url: '/step1',
template: `<h3>hello from step 1</h3><button ng-click="move('step2')">step 2</button>`
}
var step2 = {
name: 'step2',
url: '/step2',
template: `<h3>hello from step 2</h3><button ng-click="move('step3')">step 3</button>`
}
var step3 = {
name: 'step3',
url: '/step3',
template: '<h3>hello from step 3</h3>'
}
$stateProvider.state(step1);
$stateProvider.state(step2);
$stateProvider.state(step3);
}).
controller('Ctrl', function($scope, $state) {
$scope.move = function(move) {
//check your condition here
$state.transitionTo(move);
}
$scope.move('step1')
});
edited for comment

Related

Angular UI-Router with component not working

I have a simple project that uses ui-router with component. For the 'hello' component, nothing happened if I clicked on the 'hello' link; if I clicked on the "About" link, then it showed the view because it doesn't use a component. Can someone please let me know why the 'hello' component is not working? I have tried different version of angular-ui-router.js, but didn't fix the issue. Thanks.
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"> </script>
<script src="js/hello-component.js"></script>
<script src="js/hellogalaxy-module.js"></script>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<body ng-app="hellogalaxy">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>
</html>
hellogalaxy-module.js:
var myApp = angular.module('hellogalaxy', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
component: 'hello'
};
var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
hello-component.js:
angular.module('hellogalaxy').component('hello',
{
template: '<h3>{{$ctrl.greeting}} Solar System!</h3>'
controller: function() { this.greeting = 'hello'}
})
You should load the module first and then the component, change the order as,
<script src="js/hellogalaxy-module.js"></script>
<script src="js/hello-component.js"></script>

Angular moves unexpectedly the title tag inside the body

I am trying to make a Single Page App using Angular and I want to dynamically change the page titles based on views. I tried doing it using directives as shown in the following code:
<!-- index.html !-->
<html ng-app="MyApp">
<head>
<page-title></page-title> <!-- ....................LINE 1 !-->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js">
</script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js">
</script>
<script type="text/javascript"
src="/js/index.js">
</script>
</head>
<body>
<nav-bar></nav-bar>
<div ng-view></div>
...
Below is my directive code:
app.directive('pageTitle', function() {
return {
controller: 'titleController',
template: '<title>{{ page.title }}</title>' //.............LINE 2
}
});
Titles are changing as expected. Everything is working perfectly except the fact that whatever code that should be inside the <head> tag, now moves inside the body including the title, style and script tags. This is bad for SEO. I searched for the problem and found some alternative solutions to do the same on this link but not the exact solution and explanation to this anomaly. I even tried changing LINE 1 and LINE 2 as follows:
<title><page-title></page-title></title> << LINE 1
template: '{{ page.title }}' << LINE 2
And this gets it even more unexpected. It doesn't change the title at all and instead prints out <page-title></page-title> straight on every page's title as if no directive is defined for <page-title> tag. I want some explanation on both of these anomalies in Angular. :(
Not sure how you define your page title but you could do something along these lines and define page title in the stateProvider
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
data: {
pageTitle: 'Home'
}
})
.state('about', {
url: '/about',
templateUrl: 'about.html',
data: {
pageTitle: 'About'
}
})
.state('credits', {
url: '/credits',
templateUrl: 'credits.html',
data: {
pageTitle: 'Credits'
}
});
}
]);
As for your directive
app.directive('pageTitle', ['$rootScope', '$timeout',
function($rootScope, $timeout) {
return {
link: function(scope, element) {
var listener = function(event, toState) {
var title = 'Default Title';
if (toState.data && toState.data.pageTitle) title = toState.data.pageTitle;
$timeout(function() {
element.text(title);
}, 0, false);
};
$rootScope.$on('$stateChangeSuccess', listener);
}
};
}
]);
Then your page title tags <title page-title></title>
Setting element.text with your given text will sort it out as your just defining a new tag with template.

Calling controller from function and passing it a URL-encoded parameter

I am developing a CRUD interface for a Rest service. Currently, I could manage to get the list of teams in the system.
What I like to do is to show details for the when I click the show link. Currently clicking on the link calls a function (not yet implemented) that is supposed to load the details part into the ng-view. The function should pass a parameter to the ViewTeamController which will subsequently invoke the Rest service and give the result to a $scope variable.
I am not sure about how to call the ViewTeamController possibly using a URL encoded parameter from the showTeam() function. And I would also like to know how to read the URL-encoded parameter inside the ViewTeamController.
Thanks in advance.
<!doctype html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-route.min.js"></script>
<script>
var teamApp = angular.module("teamApp", ['ngRoute']);
teamApp.controller('teamController', function($scope, $http) {
$http
.get('/teams')
.success(function(response) {
$scope.teams = response;
}
);
});
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/addTeam', {
templateUrl: 'addTeam.htm',
controller: 'AddTeamController'
}).
when('/viewTeam', {
templateUrl: 'viewTeam.htm',
controller: 'ViewTeamController'
}).
otherwise({
redirectTo: '/addTeam'
});
}]);
mainApp.controller('AddTeamController', function($scope) {
});
mainApp.controller('ViewTeamController', function($scope) {
});
</script>
</head>
<body>
<div ng-app = "teamApp" ng-controller="teamController">
<a ng-click="newTeam()">new</a>
<div ng-repeat="team in teams" >
Name: {{team.name}}
<br />
Description: {{team.description}}
<br />
<a ng-click="showTeam(team.id)">show</a>
</div>
<div ng-view></div>
<script type = "text/ng-template" id = "addTeam.htm">
<h2> Add Team </h2>
To be implemented later.
</script>
<script type = "text/ng-template" id = "viewTeam.htm">
Name: {{team.name}}
Description: {{team.description}}
</script>
</div>
</body>
</html>
Your controller functions can get access to route parameters via the AngularJS $routeParams service like this:
mainApp.controller('ViewTeamController', function($scope, $routeParams) {
$scope.param = $routeParams.param; // will hold your encoded params
});
Considering you are passing the parameters as something like this in your URL,
/viewTeam/23535t4645645g4t4
Now your $scope.param will hold 23535t4645645g4t4

inline javascript within angular directive template url

I'm trying to embed the dalliance genome browser into an Angular application.
It works fine when placed on the main page.
However, because the app is large, I am trying to use a Template-expanding directive.
I read some posts about inline javascript not playing well along Angular, and the solution. In particular I added this gist to my app.
My app now looks like this plunker.
Question: The genome browser plugin does not appear :-( What's wrong?
app.js:
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.title = "Genome Browser";
}])
.directive('genomeBrowser', function() {
return {
templateUrl: 'genomeBrowser.html'
};
});
})(window.angular);
genomeBrowser.html:
<h2>Embedded page:</h2>
<script type='text/javascript-lazy' language="javascript">
new Browser(options);
</script>
<div id="svgHolder"></div>
(The options are not relevant here but can be seen in the plunker.)
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Genome browser</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="app.js"></script>
<script src="angular-loadscript.js"></script>
<script src="http://www.biodalliance.org/release-0.13/dalliance-compiled.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<h1>{{title}}</h1>
<div genome-browser></div>
</div>
</body>
</html>
You forgot to include 'ngLoadScript' as a dependency:
angular.module('docsTemplateUrlDirective', [])
should be
angular.module('docsTemplateUrlDirective', ['ngLoadScript'])
Also, there was a missing quote in your partial in console.log('debug');
To solve this, I moved all inline javascript into the directive.
app.js:
(function() {
'use strict';
angular.module('app', []);
angular.module('app').controller('mainCtrl', ['$scope', function($scope) {
$scope.title = "Genome Browser";
}]);
angular.module('app').directive('genomeBrowser', function() {
return {
templateUrl: 'genomeBrowser.html',
restrict: 'E',
controller: function($scope) {
var browser = new Browser({
pageName: 'dalliance', // Target element ID.
chr: '22',
viewStart: 30000000,
viewEnd: 30030000,
cookieKey: 'human',
coordSystem: {
speciesName: 'Human',
taxon: 9606,
auth: 'NCBI',
version: '36',
ucscName: 'hg18'
},
sources: [{
name: 'Genome',
uri: 'http://www.derkholm.net:8080/das/hg18comp/',
tier_type: 'sequence',
provides_entrypoints: true
}, {
name: 'Genes',
desc: 'Gene structures from Ensembl 54',
uri: 'http://www.derkholm.net:8080/das/hsa_54_36p/',
collapseSuperGroups: true,
provides_karyotype: true,
provides_search: true
}, {
name: 'Repeats',
uri: 'http://www.derkholm.net:8080/das/hsa_54_36p/',
stylesheet_uri: 'http://www.derkholm.net/dalliance-test/stylesheets/ens-repeats.xml'
}, {
name: 'MeDIP raw',
uri: 'http://www.derkholm.net:8080/das/medipseq_reads'
}, {
name: 'MeDIP-seq',
uri: 'http://www.ebi.ac.uk/das-srv/genomicdas/das/batman_seq_SP/'
}]
});
}
};
});
})();
genomeBrowser.html:
<div id="dalliance"></div>
I still have things to learn about how to properly control this browser my for next homework, but this answers the question.
Plunk: http://plnkr.co/edit/KSUVq8?p=preview

Configure and access AngularJS $scope by a third party application

I'm developing an AngularJS application and I would like to integrate some functions to let an other web-application interact with the application. My application should run and triggered on the same website. Iframes are not used.
The application has several tabs, and I would like to set a tab active by specifying it's id.
This has been done in an AngularJS controller, through this method:
$scope.setActiveTab = function(tabId) {
ribbon.setActiveTab(tabId);
$scope.$apply();
}
In my application, I have a ng-click attribute and this function is being called in it. But now, I do want a other application to set the active tab by calling some JavaScript function.
Therefore, I've written the following function:
$.fn.OfficeUI.EnableTab = function(element) {
angular.element($('#OfficeUI')).scope().setActiveTab('tabSendReceive');
}
However, this doesn't work, but when I past this method:
angular.element($('#OfficeUI')).scope().setActiveTab('tabSendReceive');
in the developer console of FireBug or Google Chrome, then it's working.
Any idea on what's wrong and how I should solve this?
Kind regards
As I understand you right. You need a application which allows developers (as you said Users :) to interact and configure your application by using HTML/JavaScript. Checkout this plunker demo.
A good approach is to do this with configuration files, global object, or events bindings. The following example shows you, how to let a user configure an a global config object in JavaScript & allows developers to interact with your application. For example by using $scopes.
Controller with global configuration object:
/**
* Active state holder
* #type {null|integer}
*/
var myConfig = {
menus : {
mainbar: {
active: true
},
subbar: {
active: false
},
othersubbar: {
active: false
}
}
};
var OfficeUIRibbon = angular.module('OfficeUIRibbon', [])
OfficeUIRibbon.factory('OfficeUIRibbonFactory', [function() {
return {
setActiveTabId: function (tabId) {
activeTabId = tabId;
}
}
}]);
OfficeUIRibbon.controller('OfficeUIRibbon', ['$scope', '$http', '$animate', function($scope, $http, $animate) {
//as scope set
$scope.isVisible = function (name){
if (myConfig.menus[name].active) {
return 'active';
}
}
$scope.activateMenu = function (name) {
console.log(name);
if (!myConfig.menus[name].active) {
myConfig.menus[name].active = true;
}
}
$scope.deactivateMenu = function (name) {
if (myConfig.menus[name].active) {
myConfig.menus[name].active = false;
}
}
$scope.listing = {
mainbar: {
id: 1,
label: 'mainbar'
},
subbar: {
id: 2,
label: 'subbar'
},
othersubbar: {
id: 3,
label: 'othersubbar'
}
}
}]);
HTML-Template:
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.3.10/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="OfficeUIRibbon">
<ul>
<li ng-repeat="(key,list) in listing" ng-class="isVisible(key)">
{{ list.label }}
</li>
</ul>
<button ng-click="activateMenu('mainbar');">Activate Mainmenu</button>
<button ng-click="deactivateMenu('mainbar');">Deactivate Mainmenu</button>
</body>
</html>
User configuration, should be set before angular was loaded. For example, disable mainbar on default:
myConfig.menus.mainbar.active = false;
Please see demo below that should helps you.
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {
$scope.test = function(msg) {
$scope.$apply(function() {
$scope.msg = msg
})
}
});
$(function() {
angular.element(document.querySelector('#contoller')).scope().test("Message for Angular from jQuery");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div id="contoller" ng-controller="firstCtrl">
{{msg}}
</div>
</body>
try:-
$scope.apply(function(){
angular.element($('#OfficeUI')).scope().setActiveTab('tabSendReceive');
})
You are in jquery scope you must have to use $scope.apply to reflect it to angular.

Categories

Resources