Building a Website with AngularJS – Routes and Partials

This video tutorial covers building a simple website using AngularJS routes and partials.


Download YouTube Video | Convert YouTube to MP3

The code is so simple, I did not see the point in creating a jsFiddle for it but if someone would like one, let me know.

If you have any technical questions check out the awesome mailing list here:

https://groups.google.com/forum/?fromgroups#!forum/angular

Building a Website with AngularJS – Routes and Partials

16 Responses

  1. This is awesome work! More and more pls :)
    Some more complex applications where the partials are loaded into different sections of the same page would be great….

    Ganaraj April 23, 2012 at 12:31 pm #
  2. Hi there!

    Nice screencast, but I have 3 important corrections:

    1/ don’t implement route changes via ng-click, instead just create proper links `about` – this is not only closer to the original spirit of the web, but also enables important features in the browser like open in a new tab, bookmark link, copy link.

    2/ our `otherwise` route definition is incorrect. you should use redirectTo or controller+template but not both

    3/ please don’t use minified anything during development. you’ll get better error messages and will be able to debug your app better with non-minified js. when you are ready to deploy the app, then switch to minified js.

    Igor Minar April 23, 2012 at 4:32 pm #
  3. ahhh… the code snippet was supposed to be <a href=”#/about”>about</a>.

    And before you ask, yes you can also use non-hash urls if you turn on the html5 mode for the location service and configure your server to do url redirection.

    Igor Minar April 23, 2012 at 4:34 pm #
  4. s/redirection/rewriting

    Igor Minar April 23, 2012 at 4:35 pm #
  5. Thanks Igor for the feedback! I am going to be doing a few screencasts around this idea so I will incorporate your feedback into my next screencast.

    simpulton April 23, 2012 at 4:40 pm #
  6. Thanks for the kind words Ganaraj!
    You can accomplish this functionality by creating a directive and using the templateUrl.

    That is a great idea for another screencast though.

    simpulton April 24, 2012 at 3:56 pm #
  7. This was sooooo very helpful but also raised more then a few questions in my mind that maybe you can address.

    I’m building a website and it has a similar type of structure to what your presentation does. There is a top menu bar that allows a content pane to be loaded into the ng-view directive.

    Here is where I’m running into complexity / undesireables. The sub pages are very complex and have a lot of angular / javascript / business logic in them. Putting all the controllers into one file seems wasteful because then essentially all logic for all pages is loaded in one load and upfront. If you include the controller / script in the subpages when ng-view loads (which it does correctly) you cannot use Chrome / Firefox to see the additionally loaded scripts. Which makes for harder development.

    Ideas / Suggestions?

    Doug June 28, 2012 at 2:56 pm #
  8. I recommend using a JavaScript loader [require.js, script.js, etc] to keep your code modular while loading only what you need at runtime.

    If you view the source of angularjs.org they are doing some VERY clever things with script.js.

    It is a bit of an advanced topic but something I would like to cover eventually.

    simpulton June 28, 2012 at 3:03 pm #
  9. If it possible to put RSS to this website for screen casts?

    darxx January 5, 2013 at 8:14 pm #
  10. Could you post a jsfiddle for this? It would help out a lot. Thanks!

    Ricardo March 25, 2013 at 6:48 pm #
  11. I recommend downloading the source off of github. Routes in a fiddle get weird. Also… I made some changes from the video based on feedback and an API change.

    simpulton March 25, 2013 at 6:51 pm #
  12. greate jobs, thank’s
    May I know what is your javascript editor do you use?!

    cbelhaffef March 26, 2013 at 10:38 am #
  13. WebStorm by JetBrains… It is the heat! And John Lindquist did an awesome AngularJS plugin for it.

    simpulton March 26, 2013 at 5:27 pm #
  14. Thanks for the tutorial. Might you update to the latest Route implementation for 1.2 updates when they go stable?

    https://github.com/angular/angular.js/commit/5599b55b04788c2e327d7551a4a699d75516dd21

    ebragg September 18, 2013 at 10:22 pm #
  15. Nice tutorial regarding routing.
    Simple and sweet.

    Thanks.. :-)

    Regards,
    Hardik Kaji | Constultant

    Hardik Kaji February 2, 2014 at 2:07 pm #
Trackbacks/Pingbacks
  1. Building a Website with AngularJS Pt 2 - Now With State! | One Hungry MindOne Hungry Mind - June 18, 2013

    [...] state across routes. This created a great opportunity for me to revisit the post I did a year ago Building a Website with AngularJS – Routes and Partials and not only expand upon the idea but address a few rookie mistakes I made during that dark dark [...]

Leave a Reply