I have these code samples that i am currently working on trying to learn angular js it worked well before but now it is not working at all
can some one please help me to make it right
//INDEX.HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.titlex}}</h1>
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
<p>{{main.searchInput}}</p>
</div>
</body>
</html>
//app.js
angular.module('app',[]);
//main.ctrl.js
angular.module('app').controller("MainController",function(){
var vm = this;
vm.titlex = 'AngularJS Tutorial Example';
vm.searcInput ='';
});
Here is working solution with vm approach
angular.module('app',[]);
angular.module('app').controller('MainController',function($scope){
vm = this;
vm.titlex = 'AngularJS Tutorial Example';
vm.searchInput ='Initial Demo text'; //corrected variable spelling and added it to vm
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.titlex}}</h1>
<!-- you can directly acceess model as above -->
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
<p>{{main.searchInput}}</p>
</div>
</body>
Replace your controller code by this one :
angular.module('app').controller("MainController", function ($scope) {
$scope.titlex = 'AngularJS Tutorial Example';
$scope.searchInput = '';
});
I haven't changed any code but your code looks like working fine..
//app.js
angular.module('app',[]);
//main.ctrl.js
angular.module('app').controller("MainController",function(){
var vm = this;
vm.titlex = 'AngularJS Tutorial Example';
vm.searcInput ='';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.titlex}}</h1>
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
<p>{{main.searchInput}}</p>
</div>
</body>
</html>
please refer updated below code snippet -
angular.module('app',[]);
angular.module('app').controller('MainController',['$scope',function($scope){ //added scope here
$scope.titlex = 'AngularJS Tutorial Example';
$scope.searchInput ='Initial Demo text'; //corrected variable spelling and added it to scope
}]);
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{titlex}}</h1>
<!-- you can directly acceess model as above -->
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="searchInput">
</div>
<p>{{searchInput}}</p>
</div>
</body>
</html>
Hope this helps!!
Related
I need to put some functions on the header of my site, but the functions just not working...
I'm building my site with AngularJs and Javascript. Next my index.html:
<!DOCTYPE html>
<html ng-app="adminApp">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/css/admin.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<head>
<base href="/">
</head>
<body>
<div ng-include="'app/components/include/header.html'"></div>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.62/vfs_fonts.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/components/test/test.js"></script>
<script src="app/components/include/header.js"></script>
<script src="app/factories/admin-factory.js"></script>
<script src="app/routes/admin-route.js"></script>
</body>
</html>
As you can see, i'm calling the header file on the ng-include div.
And the my header.html file:
<section class="admin-header">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<a id="admin-logo"><img src="/logo.png" /></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 hide" id="login" align="center">
<button type="button" class="btn btn-user" id="jump-btn">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</button>
</div>
</div>
</section>
<div class="menu-out">
<button type="button" class="btn btn-logout" id="logout">Log out</button>
</div>
So, at this point, everything works fine: the header appears on every page. But if i need a function on the logout button, how can i do it?
I've tried creating a home.js file like next one:
(function(){
var head = {
templateUrl: '/app/components/include/header.html',
controller: headCtrl
};
angular
.module('adminApp')
.component('adminHead', head);
headCtrl.$inject = ["$http", "$scope"];
function headCtrl($http, $scope){
$scope.getOut = function(){
alert('Log out');
}
}
})();
And then, added the function on the button with ng-click:
<div class="menu-out">
<button type="button" class="btn btn-logout" id="logout" ng-click="getOut()">Log out</button>
</div>
But the function is not working.
Someone knows why is not working and help me with and example if it's possible, please? If i add the function on the html between script tags works, but i need to find if it's possible with the $scope.
Hope you can help me. Thanx in advance
Declare a controller:
angular
.module('adminApp')
.controller('adminHeadCtrl', headCtrl);
headCtrl.$inject = ["$http", "$scope"];
function headCtrl($http, $scope){
$scope.getOut = function(){
alert('Log out');
}
}
Instantiate the controller with the ng-controller directive:
<div class="menu-out" ng-controller="adminHeadCtrl">
<button type="button" ng-click="getOut()" id="logout">Log out</button>
</div>
For more information, see
AngularJS Developer Guide - Controllers
I have written code for simple AngularJS JavaScript but not working properly.
Only root scope is updating but not the other two why I want to update FirstCtrl and SecondCtrl to be updated when I update Root Scope, But this is not working the way I expected.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>AngularJS</title>
</head>
<body>
<div ng-app="">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message}}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message}}</h1>
</div>
</div>
<script type = "text/javascript" src="main.js"></script>
</body>
</html>
main.js contains:
function FirstCtrl($scope){
}
function SecondCtrl($scope){
}
var app = angular.module('myApp', []);
app.controller('FirstCtrl', function($scope) {
});
app.controller('SecondCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
<input type="text" ng-model="message">
<h1>{{message}}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="message1">
<h1>{{ message1}}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="message2">
<h1>{{ message2}}</h1>
</div>
</div>
Define controller in module. It will create different scope for different controller.
scope properties must be be in controller you must have an app in first and declare controller in your app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>AngularJS</title>
</head>
<body>
<div ng-app="myApp">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message}}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message}}</h1>
</div>
</div>
<script type = "text/javascript" src="main.js"></script>
</body>
</html>
main.js :
var app=angular.module("myApp",[]);
app.controller("FirstCtrl",function($scope){
});
app.controller("SecondCtrl",function($scope){
});
We can do like this:
angular.module('myApp'[])
.controller('FirstCtrl',FirstCtrl)
.controller('SecondCtrl',SecondCtrl);
function FirstCtrl($scope){
}
function SecondCtrl($scope){
}
In index.html
Give reference main.js and give name of application
<body ng-app="myApp">
HTML
<!DOCTYPE html>
<html ng-app="dropApp">
<head>
<meta charset="utf-8" />
<title>DropBox</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>
<body ng-controller="mainctrl">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<div class="jumbotron">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<a id="btn-login" ng-click="login()" ng-model="logbut" ng-show="logbut" class="btn btn-success">Login </a>
<div ng-include="template"></div>
</div>
</div>
</div>
<div class="credits text-center">
<p>
Amey Totawar
</p>
</div>
<script src="angularsrc.js"></script>
</body>
</html>
Javascript File
var dropApp = angular.module("dropApp",[]);
var path = require('path');
dropApp.controller("mainctrl", function($scope) {
$scope.logbut = true;
$scope.login = function() {
$scope.logbut = false;
$scope.template = {
name: 'login.html',
url: path.join(__dirname,'views','login.html')
};
}
});
Getting Error:
GET http://localhost:8600/angularsrc.js net::ERR_ABORTED and hence angular module not found.
I tried including min.jquery earlier.
I also tried changing angularsrc.js location, but nothing is working.
Please help!!
<!DOCTYPE html>
<html ng-app="dropApp">
<head>
<meta charset="utf-8" />
<title>DropBox</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="angularsrc.js"></script>
</head>
<body ng-controller="mainctrl">
<div class="jumbotron">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<a id="btn-login" ng-click="login()" ng-model="logbut" ng-show="logbut" class="btn btn-success">Login </a>
<div ng-include="template"></div>
</div>
</div>
</div>
<div class="credits text-center">
<p>
Amey Totawar
</p>
</div>
</body>
</html>
and your js is same
var dropApp = angular.module("dropApp", []);
var path = require('path');
dropApp.controller("mainctrl", function ($scope) {
$scope.logbut = true;
$scope.login = function () {
$scope.logbut = false;
$scope.template = {
name: 'login.html',
url: path.join(__dirname, 'views', 'login.html')
};
}
});
This is what you exactly looking for
Your references should be inside head like
<html ng-app="dropApp">
<head>
<meta charset="utf-8" />
<title>DropBox</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="angularsrc.js"></script>
</head>
<body ng-controller="mainctrl">
{{your code or logic goes here}}
</body>
</html>
I am using angular to add some functionality to convert date in another framework (OutSystems). Unfortunately, the framework is calling jquery .load() to do Ajax refresh. This essentially is causing angular binding to break. I do not have any directives or controller. Please find code below. On launching page first tme you should see datetime of Feb 18, 2016 9:51:29 AM but after clicking button and calling.load() it just shows {{ 1455807089244 | date:'medium': 'EST' }}. I tried to use $compiler but it's still doesn't bind. Any help/hint is appreciated.
Note: This a "Test example" to demonstrate the problem.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', ['ngRoute']);
function reload() {
$('#div1').load('/index.html #divInner');
}
</script>
</head>
<body>
<div id="div1">
<div id="divInner">
<label id="L1">Hello {{ 1455807089244 | date:'medium': 'EST' }} </label>
<br />
</div>
</div>
<input id="Button1" type="button" value="button"
onclick="reload();" />
</body>
</html>
I think cracked this one... FYI, I have been working on this for days
<!DOCTYPE html>
<html ng-app="app" ng-controller="MainController">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', ['ngRoute']);
app.controller("MainController", function ($scope, $compile) {
$.fn.reload = function (url, selector) {
$(selector).load(url, function () {
var elem = angular.element($(selector));
elem.replaceWith($compile(elem)($scope));
$scope.$apply();
});
};
});
</script>
</head>
<body >
<div id="div1">
<div id="divInner">
<label id="L1">Hello {{ 1455807089244 | date:'medium': 'EST' }} </label>
<br />
</div>
</div>
<input id="Button1" type="button" value="button"
onclick="$().reload('/index.html #divInner', '#div1') " />
</body>
</html>
I am learning angular js
I am doing small tasks..
but I am getting this error Display the name of the product inside
the tag.
can you tell me how to fix it
providing my code below
html
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div class="product row">
<h3>
{{store.product.name}}
<em class="pull-right"></em>
</h3>
</div>
</body>
</html>
js
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController',function(){
this.product = gem;
});
})();
You should use the $scope:
app.controller('StoreController',function($scope){
$scope.product = gem;
});
{{product.name}}
Please try the following snippet.
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController',function($scope){
$scope.product = gem;
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController">
<div class="product row">
<h3>
{{product.name}}
<em class="pull-right"></em>
</h3>
</div>
</body>
</html>