SHARE

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:
+ Source files on GitHub – https://github.com/iamshaunjp/angular-js-playlist
+ Atom text editor – https://atom.io/

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

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5Y

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

https://www.youtube.com/playlist?list

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

https://www.youtube.com/playlist?list

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

For more front-end development tutorials & to black-belt your coding skills, head over to http://thenetninja.co.uk

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

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

30 COMMENTS

  1. For some reason, this isn't working for me, even though I followed step by step. I'm not sure if it's because of a version issue, or something else.

  2. Awesome tutorials..!!!
    I have a small doubt..if we click on particular menu item..like home or ListNinjas (as in this tutorial)..how can we highlight..selected menu item..so we know that..that we are in that page..?
    if any one could suggest better way using angular..!! much appreciated..
    Thanks in advance 🙂

  3. i am having trouble about creating new project folder to link with my index project file . I don't know why its not working to link the angular.route.js to my index file.

  4. I have a question. I am trying to attach a seperate css and script files to my 'view', AND I TRIED THIS:

    (similar to your 'view')

    <link href="style.css" rel="stylesheet">
    <script src="script.js"></script>

    <div>
    Here's page 1! Blah blah blah
    </div>

    It's not working

    help

  5. myNinjaApp.config(['$routeProvider',function($routeProvider){
    $routeProvider
    .when('/home',{
    templateUrl:'home1.html'
    }).
    when('/list',{
    templateUrl:'list.html',
    controller:'NinjaController'
    }).otherwise({
    redirectTo: '/home'
    });
    }]);

    nothing error but not show hom1.hmtl
    if that problam arrise for angular different version ?

  6. I'm getting "Cannot GET /directory". /Home works fine… but no luck with the directory. Anyone else run into this?

    var myNinjaApp = angular.module('myNinjaApp', ['ngRoute']);

    myNinjaApp.config(['$routeProvider', function($routeProvider){

    $routeProvider
    .when('/home', {
    templateUrl: '/views/home.html'
    })
    .when('/directory.html', {
    templateUrl: '/views/directory.html',
    controller: 'NinjaController'
    }).otherwise({
    redirectTo: '/home'
    });

    }]);

  7. I'm totally bummed. Everything worked perfect up until this lesson #16 – Views and Routes
    I added <script src="app/lib/angular-route.min.js"></script> to index.html
    My code in app.js (which I have redone 5 times)var myNinjaApp = angular.module('myNinjaApp', ['ngRoute']);

    myNinjaApp.config(['$routeProvider', function($routeProvider){

    $routeProvider
    .when('/home', {
    templateUrl: 'views/home.html'
    })
    .when('/directory', {
    templateUrl: 'views/directory.html',
    controller: 'NinjaController'
    }).otherwise({
    redirectTo: '/home'
    });

    }]);

    But it breaks and I get:
    Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.9/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route
    Any help ??? thx

  8. please help when ı press link <a>tag url change but view just show home page not other page this is my code

    myApp.config(['$routeProvider',function($routeProvider){
    $routeProvider.
    when('/home', {
    templateUrl: 'viewshome.html'
    }).
    when('/list', {
    templateUrl: 'views/list.html',
    controller: 'oneCtrl'
    }).
    otherwise({
    templateUrl: 'views/home.html'

    });

    }]);

  9. hey hi, i have used ngroute for different templates rendering, whenever i refresh it doesn't go to the home template it just shows me the same template i was on before refresing, is there any solution for that, thanks???

  10. Hello, I've got a quick question. I did everything like in the tutorial, but now when i go to directory.html the CSS is not working. Does anybody know why is that?

  11. Actually quick question! I've noticed that they controller isn't being included even though I have 'controller:"MyControllerName"'. As in when I remove it from the body of my index I can no longer access it.

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here