AngularJS for Legacy Apps
Download as PPT, PDF7 likes7,316 views
This document provides instructions for integrating AngularJS into an existing legacy HTML application. It describes how to add an Angular "micro-app" by specifying a container div with Angular directives like ng-app and ng-controller. The Angular code, including a module, controller, and function calls from the legacy code, can be kept separate. Template views can also be added using ng-view and routing configuration. The process is described as relatively simple and allowing incremental integration of Angular without rewriting the entire application.
![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();](https://image.slidesharecdn.com/angular-for-legacy-apps-130722045546-phpapp01/85/AngularJS-for-Legacy-Apps-7-320.jpg)
![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) >](https://image.slidesharecdn.com/angular-for-legacy-apps-130722045546-phpapp01/85/AngularJS-for-Legacy-Apps-9-320.jpg)
AngularJS for Legacy Apps
- 1. for Legacy Apps dff HTML5 coding Hooligans!
- 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.
- 5. Let the Journey Begin Building a “Micro App” >>
- 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>
- 11. And that is that!