27 Comments

1. 

   Ganaraj on April 23, 2012 at 12:31 pm

   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….

2. 

   Igor Minar on April 23, 2012 at 4:32 pm

   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.

3. 

   Igor Minar on April 23, 2012 at 4:34 pm

   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.

4. 

   Igor Minar on April 23, 2012 at 4:35 pm

   s/redirection/rewriting

5. 

   simpulton on April 23, 2012 at 4:40 pm

   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.

6. 

   simpulton on April 24, 2012 at 3:56 pm

   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.

7. 

   Doug on June 28, 2012 at 2:56 pm

   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?

8. 

   simpulton on June 28, 2012 at 3:03 pm

   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.

9. 

   darxx on January 5, 2013 at 8:14 pm

   If it possible to put RSS to this website for screen casts?

10. 

    Ricardo on March 25, 2013 at 6:48 pm

    Could you post a jsfiddle for this? It would help out a lot. Thanks!

11. 

    simpulton on March 25, 2013 at 6:51 pm

    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.

12. 

    cbelhaffef on March 26, 2013 at 10:38 am

    greate jobs, thank’s
    May I know what is your javascript editor do you use?!

13. 

    simpulton on March 26, 2013 at 5:27 pm

    WebStorm by JetBrains… It is the heat! And John Lindquist did an awesome AngularJS plugin for it.

14. 

    ebragg on September 18, 2013 at 10:22 pm

    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

15. 

    Hardik Kaji on February 2, 2014 at 2:07 pm

    Nice tutorial regarding routing.
    Simple and sweet.

    Thanks.. 🙂

    Regards,
    Hardik Kaji | Constultant

16. 

    Kalpana on February 20, 2015 at 7:55 pm

    Tutorial is very nice.

    I have some questions. Where can i ask?

17. 

    simpulton on February 22, 2015 at 11:12 pm

    Hi Kalpana — Google Groups and Stack Overflow are excellent places to get help.

18. 

    charan on May 12, 2015 at 5:18 pm

    I was looking for button ng-click with bootstrap components similar to this , were can i find the source link .

    Thanks much in advance !!

19. 

    simpulton on May 12, 2015 at 6:10 pm

    I apologize but I am not quite sure I understand. Please elaborate.

20. 

    ??????? ?????????? on June 11, 2015 at 6:02 pm

    Hi!
    Can you tell me how to read GET parameters from URL like this http://mysite.com/view?param=someValue
    Of course using Angular Router.

    Thank you and looking forward!

21. 

    simpulton on June 11, 2015 at 6:11 pm

    Hi! You can accomplish that using $location.search(); which returns and object of your URL params.

    More details here https://docs.angularjs.org/api/ng/service/$location.

22. 

    Sempervalor on June 18, 2015 at 6:56 pm

    I follow the steps exactly and it doesn’t work? Does the version of angular matter?

23. 

    simpulton on June 18, 2015 at 9:20 pm

    Yes, it does. Check out the repo from this post Building a Website with AngularJS Pt 2 – Now With State! for a fully functional example.

24. 

    Bushra Hage on August 5, 2015 at 10:40 pm

    Great tutorial.

    But for the bootstrap icons (plus and trash), the “icon-plus” class needs to be changed to “glyphicon glyphicon-plus” in order to work.

25. 

    simpulton on August 6, 2015 at 3:25 pm

    Ah yes… this is a bit dated. Check out the newer version of this post at Building a Website with AngularJS Pt 2 – Now With State!

26. 

    devy on January 25, 2016 at 9:59 am

    Awesome video really. I recommend this a lot to understand page creation using angular js

27. 

    Mohamed Meeran Jasir on April 18, 2016 at 12:33 pm

    I understand Your Tutorial but Could Please Release The source codes for It because it is easy to play around and understand the working of Angular js

This site uses Akismet to reduce spam. Learn how your comment data is processed.