Fast static website creation and deployment
Over the past few years, I’ve been building static websites from starter CSS frameworks such as Bootstrap and Foundation,
AngularJS with TextArea and Scroll To
This is part four of my look into AngularJS.
- AngularJS Intro and Setup
- AngularJS and Modernizr
- AngularJS and jQueryUI DatePicker
- AngularJS with TextArea and Scroll To
- AngularJS and Javascript Tips
- Coming soon…
Using textarea For Multiline Input
In AngularJS this is how you would use textarea in HTML.
1 |
<textarea name="multilinetext" ng-model="multitext" ng-change="changeTextArea()" rows="3" cols="40" wrap="off"></textarea>
|
For more information on attributes that are available, read the textarea article on the Mozilla Developer Network.
To display the text from the textarea that has multiple lines in the view, you can do something like the following:
1 |
<p style="white-space: pre;">{{ MyMultiLineText}}</p>
|
For more about this see the discussion: angularjs newline filter with no other html.
Scroll To Element
In AngularJS, when trying to do <a href="#">back to top</a>, it does not work properly. What happens is the whole website is reloaded instead of just going to the top of the page. This is where scroll to a particular element using id="name" attribute in the HTML page comes in.1
First, in the directives.js add the following code that would animate the scrolling to a particular element in the webpage:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var myDir = angular.module('myApp.directives', []);
myDir.directive('scrollToItem', function() {
return {
restrict: 'A',
scope: {
scrollTo: "@"
},
link: function(scope, $elm,attr) {
$elm.on('click', function() {
$('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
});
}
}});
|
What does restrict: 'A' mean? It means it only matches the attribute name.
In the next line, the
scope: {...} means:
=&0=&
AngularJS and jQueryUI DatePicker
This is part three of my look into AngularJS.
- AngularJS Intro and Setup
- AngularJS and Modernizr
- AngularJS and jQueryUI DatePicker
- AngularJS with TextArea and Scroll To
- AngularJS and Javascript Tips
- Coming soon…
Instead of using HTML5 date input type which is not supported by Internet Explorer and Firefox, I decided to use the AngularJS version of jQueryUI DatePicker called angular-ui-date.1, 2
Adding angular-ui-date
To begin, edit bower.json and add the following line:
1
2
|
...
"angular-ui-date": "latest"
|
Then run bower install to install angular-ui-date.
Next edit js/app.js to include the following before ngRoute:
1
2
3
4
|
...
'ui.date',
'ngRoute',
...
|
In the index.html add the following inside the <head> section:
1
2
3
4
5
|
<head>
...
<link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css"/>
...
</head>
|
While still editing the index.html add the following to the script section: jQuery before angular.js. Otherwise, it would use a lite version of jQuery called jQLite.3
1
2
3
4
5
|
...
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
...
|
Using angular-ui-date
Inside the HTML template:
1 |
<input ui-date="dateOptions" ui-date-format="yy-mm-dd" ng-model="date" ng-change="changeDate()"/>
|
In the controller.js:
1
2
3
4
5
|
$scope.dateOptions = { // pass jQueryUI DatePicker options through
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd',
}
|
The options for angular-ui-date are the same as jQueryUI DatePicker. For further information see jQueryUI Datepicker for AngularJS.
AngularJS Intro and Setup
This is part one of my look into AngularJS.
- AngularJS Intro and Setup
- AngularJS and Modernizr
- AngularJS and jQueryUI DatePicker
- AngularJS with TextArea and Scroll To
- AngularJS and Javascript Tips
- Coming soon…
Introduction
AngularJS is a open source, cross platform, javascript framework. It is used to develop single page applications (SPA). A SPA is when resources are loaded and added dynamically as needed and the page is not reloaded. The first version (1.0) of AngularJS was released in 2012 and was in development since 2009. It follows the model view controller (MVC) idea.1
The main point with AngularJS is you have directives: ng-app, ng-model (binding between the view, html, and the scope, i.e. controller), etc. and expressions: {{ phone.name }} will be replaced by the value of the expression.
The current version of AngularJS, as of writing, is 1.2.24 static-levitation (2014-09-09) which can be found here: https://github.com/angular/angular.js.
Setup
To get an idea of AngularJS try out the tutorial found https://docs.angularjs.org/tutorial. Another resource is