This video tutorial covers building a simple website using AngularJS routes and partials.
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
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….
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.
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.
s/redirection/rewriting
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.
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.
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?
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.
If it possible to put RSS to this website for screen casts?
Could you post a jsfiddle for this? It would help out a lot. Thanks!
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.
greate jobs, thank’s
May I know what is your javascript editor do you use?!
WebStorm by JetBrains… It is the heat! And John Lindquist did an awesome AngularJS plugin for it.
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
Nice tutorial regarding routing.
Simple and sweet.
Thanks.. 🙂
Regards,
Hardik Kaji | Constultant
Tutorial is very nice.
I have some questions. Where can i ask?
Hi Kalpana — Google Groups and Stack Overflow are excellent places to get help.
I was looking for button ng-click with bootstrap components similar to this , were can i find the source link .
Thanks much in advance !!
I apologize but I am not quite sure I understand. Please elaborate.
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!
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.
I follow the steps exactly and it doesn’t work? Does the version of angular matter?
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.
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.
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!
Awesome video really. I recommend this a lot to understand page creation using angular js
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