I have been learning AngularJs and currently have an application that uses Apache Tiles. Prior to adding AngularJs to the application, I had a working piece of code inside my footer tile that calculated the current year that looks like this:
footer.html
<script type="text/javascript">
var year = new Date().getFullYear();
</script>
<tr ng-Controller="AppController">
<td>Created <script>document.write(year)</script>
</td>
</tr>
controller.js
var controllers = {};
controllers.AppController = ['$scope', function ($scope) {
$scope.currentYear = new Date().getFullYear();
}];
proxy.controller(controllers);
app.js
var proxy = angular.module('proxy',['ngRoute'])
.config(function($routeProvider) {
$routeProvider.when('/index',{
templateUrl: 'search.jsp',
controller: 'AppController'
});
});
The footer now only shows "Created" on the index.html page. Is there a way with angular that I can successfully calculate the year? Why does the JS in this file stop working when AngularJs is added to the application?
Since you're using AngularJS, you can write the code like this:
<script type="text/javascript">
angular.module('app', []).controller('YearController', ['$scope', function ($scope) {
$scope.currentYear = new Date().getFullYear();
}]);
</script>
<table ng-app="app">
<tr ng-controller="YearController">
<td>
Created {{currentYear}}
</td>
</tr>
</table>
Edit: This is how it would look like if it was in it's own separate HTML and JavaScript files.
index.html:
<!DOCTYPE html >
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
<div ng-include="'footer.html'"></div>
</body>
</html>
footer.html:
<table>
<tr ng-controller="YearController">
<td>
Created {{currentYear}}
</td>
</tr>
</table>
app.js (better to have it's own separate file):
var app = angular.module('app', []);
var controllers = {};
controllers.YearController = ['$scope', function ($scope) {
$scope.currentYear = new Date().getFullYear();
}];
app.controller(controllers);
Related
I am working with angular JS and JSP. i need to retrieve the session attribute variable from the JSP to my controller. My code is below
JSP
<html lang="en" ng-app="myApp">
<body>
<div data-ng-controller="myCtrl as vm" style="height:100%">
<md-content layout="row" style="height:100%">
<div class="widget">
<h2>Header</h2>
<div ui-view></div>
</div>
</md-content>
</div>
<script type="text/javascript" src="/root/script/script.js"></script>
<%
String policy = session.getAttribute("POLICY_CHANGE");
%>
</body>
</html>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
// i want to get the JSP variable here
});
Set session value to hidden input.
<div data-ng-controller="myCtrl as vm">
<input type="hidden" id="sessionData" />
</div>
<script>
var data = '<%=request.getSession().getAttribute("POLICY_CHANGE")%>';
document.getElementById("sessionData").value = data;
</script>
and get value
app.controller('myCtrl', function($scope, $document) {
$scope.data = $document[0].getElementById("sessionData").value;
console.log($scope.data);
});
You can output the variable using expression language as a data attribute, like this:
<div data-my-variable="${myVariable}" id="myDiv"></div>
And if you are using Jquery, you can use the attr function:
var output = $("#myDiv").attr("data-my-variable");
Try (I've never tried this - just and idea... please post if it is working):
<script>
angular.module('jspVariablesService', [])
.value("valueName",${yourVariable});
</script>
in <head></head> or at the beginning of body and then import jspVariableService in
var app = angular.module('myApp', ["jspVariableService"]);
and use it in controller:
app.controller('myCtrl', ["$scope", "valueName" function($scope,valueName) {
//use your value!
});
I am trying to create an interactive experience using angular js. I was wondering if I could create properties, assign objects then instantiate them in a script tag in the 'index.html'?
for example
var app = angular.module('myApp');
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Barry Bounce';
$scope.barry = {
test1: function() {
return "My name is slim shady"
}
}
}]);
index.html is as follows
<!doctype html>
<html>
<head>
<title>Barry bounce</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="main" ng-controller="MainController">
<script> document.write(barry.test1)</script>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
Then instantiate the {{ Barry }} with all the properties in a script tag in the index.html.
Is there a better way to approach this e.g using directive or factories
P.S I am new to angular js any guidance would be appreciated.
There is no need for instantiating in HTML.It will automatically instantiate once declared in controller. And to Get that value in index.html you can use ng-model for binding.
var app = angular.module('myApp');
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Barry Bounce';
$scope.barry = [
{test1:'"My name is slim shady"'},
];
}
}]);
<!doctype html>
<html>
<head>
HTML
<title>Barry bounce</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="main" ng-controller="MainController">
<span ng-model="barry.test1"> </span
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
I am beginning in the world of AngularJS.
I have created a small app which should pull data from an API with some dummy values. The API works and gives the following JSON(typing /api/employees/):
[{"Id":1,"FirstName":"George","LastName":"Lucas"},{"Id":2,"FirstName":"Peter","LastName":"Jackson"},{"Id":3,"FirstName":"Christopher","LastName":"Nolan"}]
To consume this I have created the following:
(function () {
'use strict';
config.$inject = ['$routeProvider', '$locationProvider'];
angular.module('empApp', [
'ngRoute', 'employeesServices'
]).config(config);
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/test', {
templateUrl: '/Views/test.html',
controller: 'TestCtrl'
})
.when('/', {
templateUrl: '/Views/list.html',
cntroller:'EmployeeListController'
})
.otherwise({
redirectTo: '/'
});
//$locationProvider.html5Mode(true);
}
angular.module('empApp')
.controller('TestCtrl', TestCtrl);
// Test Contoller - ngView
TestCtrl.$inject = ['$scope'];
function TestCtrl($scope) {
$scope.model = {
message: "This is my app!!!"
};
};
// Employee List Controller
EmployeeListController.$inject = ['$scope', 'Employee'];
function EmployeeListController($scope, Employee) {
$scope.employees = Employee.query();
};
// Employees Service
angular
.module('employeesServices', ['ngResource'])
.factory('Employee', Employee);
Employee.$inject = ['$resource'];
function Employee($resource) {
return $resource('/api/employees/:id');
};})();
I haven't seprated the code into separate files at this time but do intend to. Please also give any advice re naming conventions etc any help is appreciated
I have the following partial html file:
<div>
<h1>List Employees</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees">
<td>
edit
delete
</td>
<td>{{emp.FirstName}}</td>
<td>{{emp.LastName}}</td>
</tr>
</tbody>
</table>
<p>
Add New Employee
</p></div>
the index.html file contains:
<!DOCTYPE html>
<html ng-app="empApp">
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-resource/angular-resource.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Hello Angular JS</h1>
What is 2+2 ?
<br /><br />
Answer = {{2+2}}
<br /><br />
<ng-view></ng-view>
</body>
</html>
Angular works as the expression confirms a 4. But I get no data from the API.
Please help!!
I noticed you have a typo in the routes definition( cntroller:'EmployeeListController').
(and I don't have enough reputation for comments)
Exact. Probably your EmployeeListController was never instantiated by wrong declaration "cntroller" and your employees variable have undefined value.
Well after a lot of reading and web pages I realised that I had not defined the controller as available to the module so my code should read:
angular.module('empApp')
.controller('TestCtrl', TestCtrl)
.controller('EmployeeListController', EmployeeListController);
Thanks for looking!
i am new to angularjs and i tried practicing some examples. In the below stated example I am trying to initialize a value and setting it in scope. it is working fine, if i initialize the controller and scope values as given in the commented lines . but instead of those commented lines of code, if i try to set a controller and initialize scope value , like a regular javascript constructor function, then my example is not working.. Please anyone kindly explain why it is not working ?
<html>
<head>
<title>My Practices</title>
<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript">
/*var myApp = angular.module('myApp', []);
myApp.controller('HelloController', ['$scope', function($scope){
$scope.value = "World";
}]);*/
var HelloController = function ($scope) {
$scope.value = 'World';
}
</script>
</head>
<body ng-app>
<div ng-controller="HelloController">
<input type="text" ng-model="value" placeholder="enter your name">
<div>Hi {{value}} !! </div> </div>
</body>
</html>
I have two angular apps on my page. First one is bootstrapped using the "ng-app" directive that is on the main body. Second app is initialized manually using angular.bootstrap method.
First app that is automatically bootstrapped
<body ng-cloak ng-app="app">
<section id="mainbody">
<div class="container radar-main-container">
#RenderBody()
</div>
</section>
Below is the app.js for the main app
var commonModule = angular.module('common', ['ui.router']);
var appMainModule = angular.module('app', ['common']);
Second app that is manually bootstrapping
#section footerScript {
angular.bootstrap(document.getElementById('signup'), ['signupApp']);
}
Html
<div id="signup" ng-app="signupApp" ng-controller="SignupController">
<div ui-view></div>
</div>
Controllers created in the second module:
signupModule.controller("SignupController", ['$scope', '$location',
function($scope, $location, $window) {
}
signupModule.controller("PackageInfoController", ['$scope', '$location',
function($scope, $location) {
}
When I run this code I get the error "SignupController" is not a function got undefined and it takes me to this link Error
Maybe this helps you out, since it works perfectly fine.
HTML template
<!DOCTYPE html>
<html>
<head>
...
<script src="app.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="AppCtrl">
main
</div>
<div id="signup" ng-controller="SignupCtrl">
signup
</div>
<script>
// #section footerScript
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('signup'), ['signup','common']);
});
</body>
</html>
app.js
var common = angular.module('common', []);
var app = angular.module('app', ['common']);
app.controller('AppCtrl', function($scope) {});
var signup = angular.module('signup', ['common']);
signup.controller('SignupCtrl', function($scope) {});
First of all,Your apps must not be nested (one inside another).You applications must be out it and not on body tag.
The second thing is,that you can use ng-app in you html file only one time.