AngularJS for Legacy Apps

6,282 views

Published on

Published in: Technology
2 Comments
6 Likes
Statistics
Notes
  • Hello Andy,

    It took me a while to figure it out using your fiddle but it seems the error is on my part. I updated the slide just now to correct it. Sorry about that. The slideshow was thrown together for an introduction so I guess we should have thrown that into a fiddle first.

    Pete
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I could only get this to work by using angular.element($('#my-controller')).scope rather than applying it to the parent #my-app elemt as shown in your example. I don't understand enough to know if this is a mistake in your example or simply because of the way I have bootstrapped my app. Here's a js fiddle of my working code http://jsfiddle.net/xqBGk/ Thanks! you made my night!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,282
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
32
Comments
2
Likes
6
Embeds 0
No embeds

No notes for slide

AngularJS for Legacy Apps

  1. 1. for Legacy Apps dff HTML5 coding Hooligans!
  2. 2. Why Update an Old App ... and we are always learning there are better ways to do things
  3. 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. 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. 5. Let the Journey Begin Building a “Micro App” >>
  6. 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. 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. 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. 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. 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. 11. And that is that!

×