2. Why Update an Old App
... and we are always learning there are better ways to do things
3. 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
4. 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.
6. 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>
7. 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();
8. 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 >
9. 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) >
10. 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>
