<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="XYZController">
{{menuState.show1}}
<div>
<ul ng-show='menuState.show1'>
<li ng-click='stun()'>Stun</li>
<li ng-click='disintegrate()'>Disintegrate</li>
<li ng-click='erase()'>Erase from history</li>
</ul>
<button ng-click='toggleMenu()'>Toggle Menu</button>
</div>
<script type="text/javascript">
var show2 =false;
var app=angular.module("myApp",[]);
app.controller("XYZController",function($scope){
$scope.menuState.show1=show2;
});
</script>
</body>
</html>
In this code It is supposed to Hide the all ng-click elements. BUt it is still showing all.I think my controller is not being linked.Please some one help me out
$scope.menuState is undefined.
Try this:
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="XYZController">
{{menuState.show1}}
<div>
<ul ng-show='menuState.show1'>
<li ng-click='stun()'>Stun</li>
<li ng-click='disintegrate()'>Disintegrate</li>
<li ng-click='erase()'>Erase from history</li>
</ul>
<button ng-click='toggleMenu()'>Toggle Menu</button>
</div>
<script type="text/javascript">
var show2 =false;
var app=angular.module("myApp",[]);
app.controller("XYZController",function($scope){
$scope.menuState = {}
$scope.menuState.show1=show2;
});
</script>
</body>
</html>
Related
I'm using angularJs and new to it. I'm facing problem in $routeProvider.
Thanks in advance if someone may help me :)
I'm not getting any error in console, but ngView is also not updating
index.html
<!DOCTYPE html>
<html lang="en">
<head data-ng-app="myApp">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Project</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/main.css" rel="stylesheet" type="text/css">
<!-- AngularJS script -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script src="js/jquery.min.js"></script>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand" href="/">Demo Work</a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
Dashboard
</li>
<li>
Charts
<ul class="nav nav-second-level">
<li>Flot Charts</li>
<li>Morris.js Charts</li>
</ul>
</li>
<li>
Tables
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div data-ng-view>
</div>
</div>
<!-- /#page-wrapper -->
</div>
</body>
</html>
dashboard.html
<div>
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
tables.html
It has also some code same as dashboard.html
app.js
var demoProject = angular.module('myApp',['ngRoute']);
demoProject.config(function($routeProvider) {
$routeProvider
.when('/',{
templateUrl : 'page/dashboard.html',
controller : 'contactController'
})
.when('/tables',{
templateUrl: 'page/tables.html',
controller: 'tablesController'
});
});
demoProject.controller('contactController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
demoProject.controller('tablesController',function($scope){
console.log("Tables controller");
});
You need to load the app.js after loading angular route
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
i am trying to use $http GET requests but it is not working and i don't know what is wrong with it and am not also getting any errors in the console ,this is the whole code that am using
<!doctype html>
<html lang="en" ng-app="twitchApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TwichTv</title><!-- End of Title -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container contentContainer">
<div class="contentWrapper">
<div class="innerContent">
<!-- Nav tabs -->
<ul class="nav nav-tabs statusBar" role="tablist">
<li role="presentation" id="all" class="active">All</li>
<li role="presentation" id="online">Online</li>
<li role="presentation" id="offline">Offline</li>
</ul>
<!-- Tab panes -->
<div ng-controller="allUsersController" class="tab-content result">
<div role="tabpanel" class="tab-pane active" id="allTab">
<div class="well">
<div class="userLogo">
<img ng-src="{{ image }}">
</div>
<h3 class="username">{{ userName }}</h3>
<p><span class="info">{{ channelStatusInfo }}</span></p>
<div class="pull-right">
<span class="statusIcons"><i id="icon" class="fa fa-user green"></i></span>
</div>
</div>
</div>
<div ng-controller="onlineUsersController" role="tabpanel" class="tab-pane" id="onlineTab">
<div class="well"></div>
</div>
<div ng-controller="offlineUsersController" role="tabpanel" class="tab-pane" id="offlineTab">
<div class="well"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and javascript
var streamers = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "brandonlehr", "MedryBW"];
var streamurl = "https://api.twitch.tv/kraken/streams/";
var userurl = "https://api.twitch.tv/kraken/users/";
var online = "green glyphicon glyphicon-user";
var offline = "glyphicon glyphicon-user";
var twitchApp = angular.module("twitchApp", []);
twitchApp.controller("allUsersController",[ '$scope', '$http', allUsersController]);
function allUsersController($scope, $http) {
streamers.forEach(function(streamer){
var userUrl = "https://api.twitch.tv/kraken/users/" + streamer;
var req = {
method : 'GET',
url: userUrl
};
$http(req).then(function(result) {
var streamUrl = "https://api.twitch.tv/kraken/streams/" + streamer;
$http({
method: 'GET',
url: streamUrl
}).then(function(data){
$scope.userName = result.name;
if(result.logo === null) {
$scope.image = "http://fit.ie/fitnew/wp-content/uploads/2014/11/no-profile-image.jpg";
}
// check if streamer is streaming
if(data.stream === null) {
$('#icon').removeClass('green');
} else {
var ii = data.stream;
for(var item in ii) {
$scope.channelStatusInfo = ii.channel.status;
}
}
});
});// the main then callback
});// the forEach loop
}
so can anyone help with why it is not working
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="xploresoftware.css">
</head>
<body ng-app="myapp">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="Images/Drawing.png">
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="subject">
<li>Electrical Engineering</li>
<li> Computer Science</li>
<li> Mechanical Engineering</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" style="margin-top:55px" >
<div ng-view=""> </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="angularview.js"></script>
</body>
</html>
This is my angularview.js file
(function(){
var app=angular.module('myapp',['ngRoute']);
app.config([function($routeProvider){
$routeProvider.when('/',{
templateUrl:'home.html'
})
.when('/ece',{
templateUrl:"ece.html"
})
.when('/cs',{
templateUrl:"cs.html"
})
.when('/mech',{
templateUrl:"mech.html"
})
.otherwise({
redirectTo:"/"
});
}]);
})();
The error caught:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myapp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463
This error appears to caused by a missing dependency. I see that you need to include de ngRoute dependency in your app module.
Change your first line to:
var app=angular.module('myapp',['ngRoute']);
Try changing this line too
app.config(['$routeProvide', function($routeProvider){ ... }])
EDIT:
Take a look at this JSFiddle
https://jsfiddle.net/relferreira/dzx8w38t/2/
HTML:
<div data-ng-app="app">
<div data-ng-controller="MainController as main">
{{main.test}}
</div>
<ul class="nav navbar-nav" id="subject">
<li>Electrical Engineering</li>
<li> Computer Science</li>
<li> Mechanical Engineering</li>
</ul>
<div ng-view> </div>
</div>
JS:
angular.module('app', ['ngRoute']);
angular.module('app')
.config(config)
.controller('MainController', mainController);
config.$inject = ['$routeProvider'];
function config($routeProvider){
$routeProvider.when('/',{
template:'<h1>home</h1>'
})
.when('/ece',{
template:"<h1>ece</h1>"
})
.when('/cs',{
template:"<h1>cs</h1>"
})
.when('/mech',{
template:"<h1>mech</h1>"
})
.otherwise({
redirectTo:"/"
});
}
mainController.$inject = ['$scope'];
function mainController($scope){
var vm = this;
vm.test = 'test'
}
I am getting an error of ngRoute not found while I added angular-route.js i can't understand why this is happening
<!DOCTYPE html>
<html ng-app="Userapp">
<head>
<title>Alltotal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/lib/angular.js"></script>
<scipt src="js/lib/angular-route.js"></scipt>
<script src="js/app.js"></script>
<script src="js/controller/register.js"></script>
<script src="js/controller/show.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!--navigation-->
<div class="col-lg-12">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Register</li>
<li role="presentation">Show users</li>
</ul>
</div>
</div>
<!--view-->
<div class="row">
<div class="col-lg-12">
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
And my javascipt is I think it is totally correct but not working when run
var app = angular.module("Userapp", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {templateUrl : 'partials/form.html',
controller: 'formctrl'});
});
That's a typo! Must be script:
<scipt src="js/lib/angular-route.js"></scipt>
I need to load/start revealjs slides via angularjs route provider, following is the code.
It works however revealjs slide size is abnormally very small, any clue why ?
1) index.html
<!doctype html>
<html ng-app="ngApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.js"></script>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
</head>
<body>
<button type="button" onclick="startRevealjs()">start revealjs slides</button>
</div>
<script>
function startRevealjs()
{
var res=document.getElementById("revealjsId");
res.click();
}
angular.module('ngApp', ['ngRoute', 'ngAnimate'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/revealjs', {
templateUrl: 'revealjs.html'
});
//for html5 compatibility
$locationProvider.html5Mode(true);
}])
</script>
<form action="" method="post">
<div ng-view> </div>
</form>
</body>
</html>
2) revealjs.html
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>slide 1</h1>
</section>
<section>
<h1>slide 2</h1>
</section>
<section>
<h1>slide 3</h1>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
Reveal.initialize({});
</script>
</body>
Note: I have recently started working on above tech.