My app.js file
angular.module('bandApp', ['ngRoute', 'RouteControllers']);
angular.module('bandApp').config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'templates/home.html',
controller: 'HomeController'
});
});
For controller:
var myCtrl = angular.module('RouteControllers', []);
.controller('jtronController', function($scope) {
var jumbotronImage = {
bandRef: "/images/band.jpg"
};
$scope.jumbotronImage = bandRef;
});
For HTML
<!Doctype html>
<html ng-app="bandApp">
<head>
<meta charset="utf-8">
<title>Singing</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
<!--script type="text/javascript" src="bower_components/a0-angular-storage/dist/angular-storage.min.js"></script>-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#/">myBand</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
</ul>
</div>
</nav>
<div ng-view>
<!--adds a jumbotron-->
<div ng-controller="jtronController">
<!--adds a jumbotron
<div class="container-full-bg" >-->
<img ng-src="{{jumbotronImage.bandRef}}" />
</div>
</div>
</div>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</body>
</html>
Below is the list of error (I renamed 'theBand' to 'bandRef' as shown in Controller.js code but not sure why is still popping up:
ReferenceError: theBand is not defined
at new (controller.js:11)
at Object.invoke (angular.js:4839)
at Q.instance (angular.js:10692)
at p (angular.js:9569)
at g (angular.js:8878)
at p (angular.js:9632)
at g (angular.js:8878)
at angular.js:8743
at angular.js:9134
at d (angular.js:8921)
Correct the variable reference $scope.jumbotronImage = bandRef should be like below. It means you are assigning jumbotronImage reference to jumbotronImage scope variable to expose jumbotronImage value on view to make {{jumbotronImage.bandRef}} working.
var jumbotronImage = {
bandRef: "/images/band.jpg"
};
$scope.jumbotronImage = jumbotronImage;
You need to do:
$scope.jumbotronImage = jumbotronImage.bandRef;
And then on the HTML:
<img ng-src="{{jumbotronImage}}" />
OR the other way would be:
$scope.jumbotronImage = jumbotronImage;
Then in the HTML:
<img ng-src="{{jumbotronImage.bandRef}}" />
you are given wrong reference $scope.jumbotronImage = bandRef; there is no variable like bandRef. refer this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
var myCtrl = angular.module('RouteControllers', []);
.controller('jtronController', function($scope) {
var jumbotronImage = {
bandRef: "/images/band.jpg"
};
$scope.jumbotronImage = jumbotronImage; // this is correct way
});
$scope.jumbotronImage = function(){
bandRef: "/images/band.jpg"
};
Try it once its working fine.
Related
I am creating an app in AngularJS, where I am grabbing the data from the backend to display on the view. But, for some reason, I am getting the data in my console but not in my view. I will be so thankful if any one can help me solve this. Thanks in advance.
Here is my code. -Services
app.factory('user', ['$http', function($http) {
var userInfo = {
getUserInfo: function () {
return $http.get('https://************/*****/**/***********')
}
};
return userInfo;
}]);
home page(view)
<div class="users" ng-repeat="user in users | filter:userSearch" >
<a href="#/users/{{ user.id }}">
<img ng-src="{{user.img}}"/>
<span class="name">{{user.first}} </span>
<span class="name">{{user.last}} </span>
<p class="title">{{user.title}} </p>
<span class="date">{{user.date}} </span>
</a>
HomeController
var isConfirmed = false;
app.controller('HomeController', function($scope, user, $http) {
if (!isConfirmed) {
user.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
isConfirmed = $scope.userInfo;
console.log($scope.userInfo);
}, function (error) {
console.log(error)
});
}
});
App.js
var app = angular.module("Portal", ['ngRoute']);
app.controller('MyCtrl', function($scope) {
$scope.inactive = true;
$scope.confirmedAction = function() {
isConfirmed.splice($scope.person.id, 1);
location.href = '#/users';
}
});
index.html
<!doctype html>
<html ng-app="Portal">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="header">
<div class="container">
<h3>Portal</h3>
</div>
</div>
<div class="main">
<div class="container">
<div ng-view>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/UserController.js"></script>
<!-- Services -->
<script src="js/services/users.js"></script>
</body>
</html>
change your ng-repeat="user in users" to ng-repeat="user in userInfo"
as your assigning and consoling only $scope.userInfo in your controller
The property you assign data has to be same as of binded to view.
As per your HTML data should be in users. So do it like : $scope.users = response.data;.
or if you assign data to userInfo, then bind it on html. like :
<div class="users" ng-repeat="user in userInfo | filter:userSearch" >
I am trying to implement a modal popup in angularjs using ngmodal. The code runs ,there is no error returned on the browser console but nothing happens when the modal is clicked. Below is my attempt and code
Index.html file
<html ng-appp="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
<script src="ngDialog.js"></script>
<link src="ngDialog.css"></link>
<script src="ngDialog.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Click here
</div>
</script>
</div>
</body>
</html>
app.js file
var myApp = angular.module('myApp',['ngDialog']);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope, ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({ template: 'templateId' });
};
}
function tt($scope)
{
$scope.test = function()
{
console.log("AaA");
}
}
Source of tutorial http://jsfiddle.net/mb6o4yd1/6/
Kindly assist
HTML Page.
You didnt put ng-app
<!DOCTYPE html>
<html lang="en">
<head>
<script src="Scripts/angular.js"></script>
<script src="Scripts/ngDialog.js"></script>
<script src="Scripts/app.js"></script>
<link href="Content/ngDialog.css" rel="stylesheet" />
<link href="Content/ngDialog-theme-default.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
</div>
<script type="text/ng-template" id="templateId">
<div ng-controller="tt" class="ngdialog-message">
<button ng-click="test()">Click here </button>
</div>
</script>
</div>
Here is your app.js
var myApp = angular.module('myApp', ['ngDialog']);
myApp.controller('MyCtrl', function ($scope,ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({
template: 'templateId'
});
};
});
myApp.controller('tt', function ($scope) {
$scope.test = function () {
alert('It works');
}
});
Let me know still you find any problem.(I have added ngDialog-theme-default.css )
I am learning Angularjs and Nodejs by developing a project.
I have followed this tutorial and organised my folder structure and route configurations.
Problem:
I have added a method called isActive to update ng-class based on tab click. But when I click the tab it is not calling the isActive method.
My guess is, I have done something wrong in appRoutes.js but not sure how to fix this. I am able to reach the MainController but not the methods in it.
I have another question, I need to make the Home tab active when I enter the application or when I clicked on home tab or when I click on application header too.
Below is the html and the js codes.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>ets</title>
<link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/ets.css">
</head>
<body ng-app="etsApp">
<div id="mainDiv">
<div>
<section id="header_section" class="main-title"></section>
<section id="nav_section"></section>
</div>
<section id="body_section">
<div ng-view="ng-view"></div>
</section>
<section id="footer_section" class="footer-style"></section>
</div>
<script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#header_section').load('views/partials/header.html');
$('#nav_section').load('views/partials/navigation_main.html');
$('#footer_section').load('views/partials/footer.html');
});
</script>
</body>
</html>
navigation_main.html
<div>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li ng-class="{active : isActive('/home')}" id="nav_home">
Home
</li>
<li ng-class="{active : isActive('/expensereporting')}" id="nav_exprep">
Expense Reporting
</li>
<li ng-class="{active : isActive('/remainders')}">
Todo Remainder's
</li>
<li ng-class="{active : isActive('/pdfoperations')}">
PDF Operation's
</li>
<li ng-class="{active : isActive('/imageoperations')}">
Image Operation's
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login/Register</li>
</ul>
</nav>
</div>
header.html
<div>
<header id="header" style="margin-left: 50px;">
<a href="/" style="text-decoration: none; color: black;">
<strong>eTools Store</strong>
</a>
</header>
</div>
appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.when('/home', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
});
$locationProvider.html5Mode(true);
}]);
app.js
angular.module('etsApp', ['ngRoute', 'appRoutes', 'HomeCtrl', 'MainCtrl']);
MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {
console.log('Main Controller');
$scope.isActive = function(destination) {
console.log($location.path());
return destination === $location.path();
}
});
Your navigation_main.html is outside of controller scope. That's the main reason. Try to create separate controller for you navigation like this
.controller('NavCtrl', function($scope) {
isActive = function(destination) { /*...*/ }
}
Put it into file js/nav.js and add to your html
<script type="text/javascript" src="js/nav.js"></script>
And then add this controller to your navigation_main.html code
<div ng-controller="NavCtrl">
About problem not reaching isActive method:
Try to reorganize:
<script type="text/javascript" src="js/controllers/MainCtrl.js"> </script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
into:
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
May be you forget to add .otherwise
.when('/', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.when('/home', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.otherwise({
redirectTo: '/'
});
Update :
Try this -
In navigation_main.html
<li ng-class="{'active' : path}" >
Image Operation's
</li>
MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {
console.log('Main Controller');
$scope.itemClicked= function(destination) {
$scope.path = destination;
}
});
You can try angular ui-router for your routing and for adding an active class when a state is active. You only need to add ui-sref-active="YourActiveClassHere". Angular UI-Router
Try to change the order of this,
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
To this,
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
Try to add ng-click=isActive('/home'), in your a tag.
<li ng-class="{active : activeClass == 'home'}" id="nav_home">
<a href="/home" ng-click=isActive('/home')>Home</a>
</li>
In your MainCtrl add this line,
$scope.activeClass = '';
$scope.isActive = function(destination) {
$scope.activeClass = destination;
}
My goal is to spin a servo for a certain amount of seconds on a HTML button click. I am using an Arduino Yun as my microcontroller.
When I type in the URL directly the servo spins as it should. When I click on these buttons using the Angular.js GET request nothing happens. Even a regular form submit button works.
Is there something missing from my code?
Is there an easier way to accomplish this?
Here is my front-end code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body>
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
</script>
If I just type in the URL in my browser with the setting value of 1 or 2 the servo works fine.
Please see working demo
var app = angular.module('app', []);
app.controller('ArduinoCtrl', function($scope, $http) {
$scope.response = {};
$scope.progress = false;
$scope.setServo = function(setting) {
$scope.progress = true;
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url).then(sucess, error).then(function() {
$scope.progress = false;
});
function sucess(response) {
angular.copy(response, $scope.response)
}
function error(response) {
angular.copy(response, $scope.response)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
<p ng-show="progress">Please wait</p>
<div ng-hide="progress">
<hr/>
<p>Response</p>
<pre>{{response | json}}</pre>
</div>
</div>
</div>
You need to add the ng-app directive and add your controller to a module:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body ng-app="myApp">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
angular.module("myApp", []).controller("ArduinoCtrl", ArduinoCtrl);
</script>
I've followed this basic AngularJS tutorial : https://www.youtube.com/watch?v=WuiHuZq_cg4&list=PL173F1A311439C05D
Everything went well until I added the clearCompleted() method. it does not seem to be working:
HTML:
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="todo.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{getTotalTodos()}} </h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form class="form-horizontal">
<input type="text" ng-model="formTodoText" ng-model-instant>
<button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
</form>
<button class="btn-large" ng-click="clearCompletedTodos()">
Clear Completed
</button>
</div>
</body>
</html>
JS:
function TodoCtrl($scope) {
$scope.todos = [
{text: 'Learn Anagular', done:false},
{text: 'Build an app', done:false}
];
$scope.getTotalTodos = function() {
return $scope.todos.length;
};
$scope.addTodo = function() {
$scope.todos.push({text: $scope.formTodoText, done: false});
$scope.formTodoText = '';
};
$scope.clearCompletedTodos = function() {
$scope.todos = _.filter($scope.todos, function(todo) {
return !todo.done;
});
};
}
the "completed todos" are not getting removed .
Here is what I have done and it works for me:
Please notice that the follow lines has been changed (http:// added)
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
to the follow
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
I met the same problem, actually, write it like below, it works fine:
$scope.clearCompleted = function(){
$scope.todos = $scope.todos.filter(function(todo){
return !todo.done;
})
};
Actually none of those worked for me; I used this one.
var t = [];
angular.forEach($scope.todos, function (i)
{
if (!i.done)
t.push({text: i.text, done: i.done});
});
$scope.todos = t;