AngularJS Tutorial #16 - Views and Routes

Hey all, in this AngularJS tutorial, I'll be showing you how we can section off our content into Angular 'views', and then use ngRoute (AngularJS's routing module) to configure our routes for the application. Views are essentially the 'states' or the 'pages' of our application, and are requested by Angular when a user goes to a specific route, or URL.

Hey gang, in this AngularJS tutorial, I'll be introducing you to filters and how we can use them to change the way our data is displayed to a user. Filters can be used in conjunction with ng-repeat, or directly on the expression itself. We use Angular filters to do things like ordering a list of items alphabetically, or by type, or to display numbers as a currency.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== JavaScript for Beginners Playlist ==========

============ CSS for Beginners Playlist =============

============== The Net Ninja =====================

================== Social Links ==================

[jheelmonty]

For the newcomers in AngularJS. While using AngularJS 1.6v a bit of syntax is changed. You need to write this:
"#!/home" in the header href for home and same like this for directory.

instead of this:
"#/home" in the header href

[bimalgrg]

In header, ,
<a href="#!/home">Home</a>
instead of
<a href="#/home">Home</a>

[andreasengstler]

Great tutorial thank you a lot!
I only had to change the config this way (using version 1.7.9)
{
instead of
app.config(['routeProvider', function($routeProvider) {
and as already known #!/ for the hyper references.

[moeidsaleemkhan]

One of the best AngularJS tutorials (y) Great work!

[oscardbg]

this solve my issue: First, remove the / (forward slash) at the beginning of templateUrl string, did that in 1.5 and 1.7 version. Second, only in 1.7 add ! in href links like so #!/home, #!/directory because in 1.5 works perfectly without it. Finally you must run it in a web server, i used live server extension in vs code

[lesniall]

Awesome tutorials I needed to make a small app in a hurry and you have saved my life <3 Still building but so far so freckin awesome. Keep it up

[bereketlibanos]

you are a life saver. Precise and clear explanation.

[NeilRieck]

best example of view + route that I've ever seen

[andreiaquino]

Thank you net ninja!!
btw, in my machine, this routing works:
<a href="#!/home"> and <a href="#!/directory">


I'm a fan :)

[kylelauritzenable]

very clear, easy to understand. Thank you!

[fredhn]

Great explanation! Worked as it was supposed to.

[KG-fjex]

you mean insert this <a> tag in the header section of the index.HTML file

[parthi]

Still who are all having the problem like display empty pages in chrome browser even if you changed #!/home" something like that.

first we need to install http-server using npm in a terminal or cmd or bash

(Note: Otherwise it will not recognize the views directory )

npm install http-server –g


-g = globally


And then move to your project directory by cd

cd <your-project directory>


Finally Run the server

http-server




It will display like below, then we can visit either one to display the data

Starting up http-server, serving ./ Available on:




I hope this might help you guys and girls. let me know does it work or not, thanks

[kyoontol]

hey bro. I want to ask. i am trying to use arrow function in controller, why get error? what I know is the difference between the arrow function and the normal function, namely the arrow function does not have this. does the dependency in the controller function no have this?
the error is like this:
TypeError: Function.prototype.bind.apply (...) is not a constructor

I want to know this answer, because it will affect the way my code is written in the future, so I beg you to answer it. thank you

and I want to know about one thing. What do you use to make the angles read without errors? whereas you didn't specify a route to the file (style.css, app.js, etc.), you are using expressjs? like your video about nodejs. because when I don't specify a route, I get errors like: file not found. thank you

[WarnasurAs]

I was here at the correct moment. Nice

[nortonnnantikill]

thank you very much, its well explained Sir :)

[lolochan]

It's not working with me.. in the header it says "cannot resolve file"
I tried everything

[eliahugarcialozano]

For whom it is still relevant:
You have to ensure all AngularJS libraries are using the same versions.
So angular-router.min.js should have the same version as angular.min.js

[leandrodossantos]

Awesome tutorial man!!!
Thanks for taking the time to make that for free!!!
:)

[tpikeporchlight]

I definitely like your tutorials. Have watched a ton. For some reason I wasn't able to get my controller function to fire before it was needed and had to wrap it up like this

(function(app) { app.controller( ... } (myNinjaApp);
otherwise Angular would complain about no controller.

Similar things are happening with the config but this trick isn't working for that. Any hints?

Oh and I do have this section making angular process the code first
<html lang="en" ng-app="myNinjaApp">