angularjs for legacy apps
TRANSCRIPT
for Legacy Apps
dff
HTML5 coding Hooligans!
Why Update an Old App
... and we are always learning there are better ways to do things
The Decision to “Angularize” Your App
To stay in your comfort zone is so ... comfortable.
There are always challenges in adding something entirely new to existing code. Fear of breaking something or simple internal resistance to change can shut down plans to modernize an app. You need strong arguments to make the case. Fortunately AngularJS provides plenty. Here are some of my top reasons for using it:
does not affect existing code, unless you want it to can be completely isolated from existing code can be controlled from existing code (have your cake and eat it too) saves (a lot of) development time provides a reliable path forward helps clean up spaghetti code make it easier to ramp-up new developers
Did you know you can use AngularJS without drinking the kool-aid?
Just take what you want and leave the rest.
That is the beauty of AngularJS. You can integrate in small steps and see immediate benefits without betting the farm.
Have no use for routes, services or filters. No problem! Don't want to use
Angular templates. That's OK too! You can add them anytime later if you want.
Let the Journey Begin
Building a “Micro App” >>
Adding a “Micro-App” to Legacy HTML Code
You can specify any div as the container for your AngularJS app. To hide it from prying eyes, just use the ng-show directive (you can also use CSS or jQuery to hide/show it).
<html><link rel="stylesheet" href="oldstyles.css" /><!-- new styles for twitter bootstrap ---><link rel="stylesheet" href="../css/bootstrap.css" /><link rel="stylesheet" href="../font-awesome.css" /><script src=”oldscripts.js”><!-- new library for bootstrap angular ---><script type="text/javascript" src="../js/bootstrap.js"></script><script type="text/javascript" src="../js/angular.js"></script>
<body><div class=”wrapper”>
.... old code<div ng-app="myNewAwesomeApp">
<div ng-controller=”myNewAwesomeAppController” id=”my-new-awesome-app-container”> <div ng-show=”comeOutToPlay() == 1”>{{myfirstvariable}} <!-- this is a variable set in your controller -->
... some other really cool stuff can go here ... </div>
</div></div>... more old code
</div></body></html>
The JavascriptNo need to modify old javascript code. Just create add a new js file with the following.
app moduleangular.module('myNewAwesomeApp', []);
controllerfunction myNewAwesomeAppController($scope) { // this is the controller specified in the HTML as ng-controller
$scope.myfirstvariable = 1; // this is the variable that shows up in the HTML where you have {{myfirstvariable}}
$scope.incrementMyFirstVariable= function() { // this is a function we will call from the legacy code $scope.myfirstvariable ++; $scope.$apply(); // this will update the HTML for you. Sit back and relax }
$scope.comeOutToPlay= function() { return true; // this will hake your new awesome app appear in the browser. } }
Call your new controller from legacy codeangular.element($("#my-new-awesome-app-container")).scope().incrementMyFirstVariable();
Too Easy?
AngularJS templates make it easier.
Adding partials views with the ng-view tag is the easiest way to insert a template. <html><link rel="stylesheet" href="oldstyles.css" />
<!-- new styles for twitter bootstrap ---><link rel="stylesheet" href="../css/bootstrap.css" /><link rel="stylesheet" href="../font-awesome.css" />
<script src=”oldscripts.js”>
<!-- new library for bootstrap angular ---><script type="text/javascript" src="../js/bootstrap.js"></script><script type="text/javascript" src="../js/angular.js"></script>
<body><div class=”wrapper”>.... old code<div ng-view></div>... more old code</div></body></html>
Now we can setup a route >
Create a Route
Originally we created a module like this: angular.module('myNewAwesomeApp', []);
Now we can change it to this:
angular.module('myNewAwesomeApp', [], function($routeProvider, $locationProvider) {
$routeProvider.when('/myawesomenewapp', {
templateUrl: "../partials/myawesomeapp.html",
controller: myNewAwesomeAppController
}));
// Add this so your URLs will be myoldapp.com/#/myawesomenewapp rather than myoldapp/myawesomeapp
$locationProvider.html5Mode(true);
});
Create a new HTML “partial” file (almost done) >
The Partial HTML Template
Create a new static HTML file and put it in a publicly accessible folder.
For this example, I created a file named “myawesomeapp.html” and put it in a folder called “partials'.
Here is the content of the file:
<div>
{{myfirstvariable}} <!-- this is a variable set in your controller -->
... some other really cool stuff can go here ...
</div>
Activate this view using an ordinary link pointing to the path “#/myawesomenewapp” setup in your route .
<a href=”#/myawesomenewapp”>See the Aweseome New Micro App</a>
And that is that!