This is part two 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…
You can use Modernizr to check if the browser supports HTML5 features and to see if it has javascript support.
To use Modernizr add the below code above the <head> section in the index.html:
1
2
3
4
5
6
7
|
...
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" ng-app="myApp"> <!--<![endif]-->
<head>
...
|
The in the controllers.js add something similar to the following:
1
2
3
4
5
6
7
8
9
10
11
|
var myControllers = angular.module('myApp.controllers', []);
myControllers.constant("Modernizr", Modernizr);
myControllers.controller('MainCtrl', ['$scope', 'Modernizr', function($scope, Modernizr) {
// check if browser supports HTML5 features
$scope.browser = {
supportNumberInput: Modernizr.inputtypes.number
};
...
}]);
|
See http://stackoverflow.com/questions/23769262/angular-expressions-with-modernizr-values and Detecting HTML5 Features for more in depth infomation.