AngularJS–Part 1

This is an introduction to AngularJS and is mainly meant as a internal reference for our development team. More posts on the topic will follow.

Why AngularJS?

AngularJS is one of the most popular Open Source JavaScript frameworks. It is developed by Google and has a huge community surrounding and supporting it. We use AngularJS to migrate the MS Silverlight based client of our complex enterprise application to HTML5/CSS/JavaScript.

Several factors were deciding in the choice of the framework. Alternatives that we have considered were

We have been developing a lot of infrastructure on our own in the past. In the beginning this was a (sometimes huge) advantage but became more and more a burden over time. Thus we decided not to go this route this time and as a consequence to exclude variant one.

Base on our experience with Silverlight we also wanted to avoid a proprietary or closed source solution.

AngularJS seems to have the biggest and most active community. For pretty much any question in and around AngularJS one can find answers on StackOverflow. This is a very important point for a team where not every member is an expert. Quick accessibility of help and insight is a big plus. It is easy to find new developers that have a working knowledge of AngularJS.

AngularJS is extremely simple to start with. Let’s just do it

Let’s start with AngularJS

To start coding with angular we need nothing else then download the angular.js file (stable branch, uncompressed) from here and use a text editor like Notepad++, Vim or Sublime to name just a few.

  1. Create a new folder HelloAngular.
  2. Download the angular.js file.
  3. Copy the downloaded JavaScript file angular.js into the above folder.
  4. Using your favorite text editor create a new file step1.html in the same folder.
  5. Add the necessary html tags for a standard HTML5 web page
    image
  6. Add angular.js to the page by adding a <script> tag at the end of the <body>
    image
    Note: It is considered best practice to include your JavaScript files not in the <header> but rather at the end of the <body>
  7. Load the web page with you favorite browser to make sure everything is ok.
  8. Add an input of type text to the body and use the first AngularJS directive, the attribute ng-model. As an attribute value we choose model.firstName.
    image
  9. Add a <div> after the above <input> and use the so called mustache syntax to display the value of model.firstName inside the <div>
    image
  10. Save the file and refresh the browser. Type something into the textbox. Note that where we defined the <div> we see the mustache template {{model.firstName}} instead of the (expected) value of the model. The reason is that we did not yet bootstrap Angular and thus up to now Angular just sits there inactive on our page.
    image
  11. Add the ng-app directive to the <body> tag. When Angular sees this attribute on the page it starts to parse and compile the page upon loading.
    image
  12. Save the page the refresh you browser. Type your name into the input box. Notice that the value now gets reproduced inside the <div>.
    image

Summary

I have shown that it is extremely easy to start a new AngularJS based web application. We just need one single JavaScript file (angular.js) and a text editor. AngularJS is mostly used as a client side MVC (model view controller) framework. I have introduced the view (the html page) and a basic model (model.firstName) so far. AngularJS uses directives to provide data binding. We saw how to data bind an input box by using the ng-model directive and how to display model values by using the so called mustache syntax. Angular is bootstrapped by using the ng-app directive. We can only have one such directive per page. If AngularJS sees this directive on the page it parses the page and compiles it. It is during this stage where the directives are interpreted or executed and the data binding is established.

In my next post I will introduce controllers.

Related Articles:

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Gabriel Schenker

Gabriel N. Schenker started his career as a physicist. Following his passion and interest in stars and the universe he chose to write his Ph.D. thesis in astrophysics. Soon after this he dedicated all his time to his second passion, writing and architecting software. Gabriel has since been working for over 12 years as an independent consultant, trainer, and mentor mainly on the .NET platform. He is currently working as chief software architect in a mid-size US company based in Austin TX providing software and services to the pharmaceutical industry as well as to many well-known hospitals and universities throughout the US and in many other countries around the world. Gabriel is passionate about software development and tries to make the life of developers easier by providing guidelines and frameworks to reduce friction in the software development process. Gabriel is married and father of four children and during his spare time likes hiking in the mountains, cooking and reading.
This entry was posted in AngularJS, introduction. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Tolga Yaramis

    Hi Gabriel.
    I think, you made the correct decision to migrate Silverlight application to Html5 world using AngularJS Framework. It is really powerfull and as you mentioned, supported by a big community.
    It would be really interesting if you share your project migration experiences in your coming articles instead of sharing basics angularjs stuff, since the same examples are existing in AngularJS API documentation or already written in all AngularJS community sites many times.
    However, what I saw so far, there is a gap in angular learning materials about developing complex, large enterprise applications.
    I guess your silverlight project is a complex LOB application and to see the the implementation of such a complex system using angular framework would be great.

    • Gabriel Schenker

      Thank you for your feedback. It is my intent to approach the topic from the perspective of a large scale migration from Silverlight to AngularJS or more general to HTML5/CSS3/JavaScript. I am fully aware that there exists plenty of introductory material on AngularJS yet this series of post is also meant as a reference series for our own development team and thus some redundancy is unavoidable. On the other hand I have my own style on approaching things, also very basic stuff. In my own career I have learned a lot when re-iterating the foundations/basics of a topic and trying to approach the topic from a different angle.

    • jphamilton

      I want to see how people are using Angular on enterprise apps, too. My next app is going to have hundreds of screens and will be a multi-year project. I haven’t been able to find anyone who is talking about writing JavaScript apps at this scale. If I decide to use Angular (or Durandal for that matter), I am wondering if I should treat each screen in the app as it’s own SPA. Or could an SPA really be scaled up to an application of this size?

      • http://www.erata.net Iulian Margarintescu

        I don’t know about hundreds of screens, as I have a few projects developed as SPAs with “only” tens of screens, but I seen no reason why it should fail for more if for ~30 screens it has remained extremely maintainable.

        We had to do a few iteration until we found that splitting sections into independent modules was the way to go. Also we started using a lot of tooling, and automating every possible step ( grunt with a lot of lint-ing, bower, testing – unit an end-to-end ). Another important thing we realised was that some use cases are special and you need to handle them as such, without trying to change everything to account for each particularity. Wait for the pattern to emerge before deciding to transform a simple directive into a generic one which is 100x times more complicated. Most of the specific cases can be solved with minimal JS code – which, if necessary, you can just throw away and rewrite whenever needed.

        I would also like to see more traction on the “enterprise” adoption of client side only apps as I have sometimes had to deal with a “oh you use node.js to build this” mentality.

        Another important point to remember is that as @Michael_Logutov:disqus said, Angular is not a silver bullet, and there are problems for which better solutions exist.

      • Tolga Yaramis

        if you split the project into feature based modules, the application can be scaled up and maintainable easily. That’s why the solution structure and naming convention play important roles in SPA development.
        One of the most importing thing in SPA development is integration and orientation between modules. Modules can also be developed as separated SPA’s as Google does. GMail, Google Calendar or Drive works independent great but the orientation and interaction between those applications are also really powerful. Each of them is like a small modules but all of them together like a enterprise level applications which are developed by different teams in Google.
        That’s why not only client side technologies enough to develop enterprise level SPA applications.
        You can check the SignalR, Breeze, MEAN Stack as well. Currently I am also working on those stuffs and try to discover them to build those interactive, scaleable SPA applications :)

  • Michael

    Please be advised, that Angular should not be perceived as general solution to all client UI problems. It’s mostly designed to be used in SPA and applying it in normal application will make you either getting lots of unnecessary complication (directives instead of couple line of codes on jquery which can be tested just as easy) or make you fight the framework. Angular have poor AMD loading support and generally I do not advise to use it blindly.

    • Gabriel Schenker

      Rest assured that we do not use AngularJS blindly or as a “one tool fits all our needs”. I have done extensive prototyping to back our decision to go the AngularJS route. Also I am just writing about our own experiences and needs, other teams may have totally different needs or boundary conditions.

  • Jon

    Thanks for the intro! I am looking forward to reading further.

    @Michael_Logutov:disqus I am curious as to what issues you have or have had with the AMD loading support. I am pretty new to the space, but the functionality from Require.js looks to be something our team will want to use in the future.

  • Alper

    I’m looking forward to see how Angular will fit in the CQRS architecture you discussed before.

  • Flavio Schenker

    Nice tutorial series dad. For me as a beginner it was very easy to understand.
    Greetings from Switzerland :)