Menu
In a hybrid application you run both versions of Angular at the same time. That means that you need at least one module each from both AngularJS and Angular. You will import UpgradeModule inside the NgModule, and then use it for bootstrapping the AngularJS module.
Guide to using TypeScript in AngularJS applications. Supporting older AngularJS applications doesn't mean you can't take advantage of modern tools like TypeScript. Not every file in your application needs to be written in TypeScript at once, you just can rename all your JavaScript files to have a . ts extension.
Steps to integrate:
build folder)ui.directives or ui.filters depending on what you are planning to use).Most of the outlined steps are just about including JS/CSS dependencies. The only "tricky" part is to declare dependencies on a ui.* module, you can do it like this:
var myApp = angular.module('myApp',['ui.directives']);
Once all the dependencies are included and a module configured you are ready to go. For example, using the ui-date directive is as simple as (notice the ui-date):
<input name="dateField" ng-model="date" ui-date>
Here is the complete jsFiddle showing how to use the ui-date directive: http://jsfiddle.net/r7UJ2/11/
You might also want to have a look at the sources of the http://angular-ui.github.com/ where there are live examples off all the directives.
As of 3rd of May 2013, here are the steps:
include
<script src="angular.min.js"></script>
<script src="ui-bootstrap-tpls-0.3.0.min.js"></script>
register ui
angular.module('myFancyApp', ['ui.bootstrap']);
make sure myFancyApp is the same as in your <html ng-app="myFancyApp">
Let the magic commence.
I think what is missing is plugins - you've got to add the jquery plugin scripts and css for some angular-ui directives to work. For example the codemirror directive needs:
<script src="http://codemirror.net/lib/codemirror.js" type="text/javascript"></script>
<script src="http://codemirror.net/lib/util/runmode.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css" type="text/css" />
It's a surprise to me that angular-ui.github.com doesn't mention needing to include plugins.
Hi I wrote an article specifically on how to do this for for PHP syntax highlighting. The article is here: http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/
The core of things is getting the configuration right:
var myApp = angular.module('myApp', ['ui']);
myApp.value('ui.config', {
codemirror: {
mode: 'text/x-php',
lineNumbers: true,
matchBrackets: true
}
});
function codeCtrl($scope) {
$scope.code = '<?php echo "Hello World"; ?>';
}
For something like the following HTML snippet:
<div ng-app="myApp">
<div ng-controller="codeCtrl">
<textarea ui-codemirror ng-model="code"></textarea>
</div>
</div>
You can see the whole jsfiddle of the set up here: http://jsfiddle.net/jrobertfox/RHLfG/2/
pkozlowski.opensource is right, there are a lot more files that you need to include than it seems from the AngularUI documentation (if you can call it documentation...)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With