AngularJS for Legacy Apps

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" />

<link rel="stylesheet" href="../css/bootstrap.css" />
<link rel="stylesheet" href="../font-awesome.css" />
<script src=”oldscripts.js”>

<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}} 
... some other really cool stuff can go here ...
</div>
</div>
</div>
... more old code
</div>
</body></html>

The Javascript
No need to modify old javascript code. Just create add a new js file with the following.
app module
angular.module('myNewAwesomeApp', []);
controller
function 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 code
angular.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" />

<link rel="stylesheet" href="../css/bootstrap.css" />
<link rel="stylesheet" href="../font-awesome.css" />
<script src=”oldscripts.js”>

<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}} 
... 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>

AngularJS for Legacy Apps

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to AngularJS for Legacy Apps

Similar to AngularJS for Legacy Apps (20)

Recently uploaded

Recently uploaded (20)

AngularJS for Legacy Apps