Hot Proton


1 Comment

Solution to AngularJS Router Config not working

Hi All, I was trying to do routing in Angular JS and on several occasions faced problems with views not getting displayed. Many people on stackoverflow also suggested to host the application in a webserver though that is a good idea but in order to make this work we do not need to host this in a webserver. just add a reference to angular-route.js and specify ngRoute in your angular module.

javascript – AngularJS router config is not working – Stack Overflow
view – My SPA does not load in AngularJS using Routing – Stack Overflow
angularjs – Angular routing not working in Chrome – Stack Overflow

Finally managed to find a solution for this.

You can check my    Plunkr or follow the solution here.

My solution consists of four files  and you can extend your solution using this as reference

index.html, main.js, view1.html, view2.html

<html ng-app="myApp">

<head lang= "en" >
    <meta charset="utf-8">
    <title>Angular Routing Views Partials</title>
</head>

<body>
  <h3>AngularJS Routing Views Demo</h3>
    <div class="container">
        <div ng-view></div>
    </div>

    <script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular-route.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>

</html>

dont forget to include angularjs-route.js

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

myDemoApp.config(function($routeProvider) {
    $routeProvider
    .when('/view1',
    {
        controller: 'simpleController',
        templateUrl: 'view1.html'
    })
    .when('/view2',
    {
        controller: 'simpleController',
        templateUrl: 'view2.html'
    })
    .otherwise({ redirectTo: '/view1'});
});

myDemoApp.controller('simpleController', function($scope) {
$scope.customers = [
{name : 'John Smith ', city : 'LosAngeles'},
{name : 'John Doe ', city : 'NewYork'},
{name : 'Jane Doe ', city : 'SanFrancisco'}];

});

Dont forget to specify ‘ngRoute’ as specified on line number 1

<div class="container">

<a href="#/view1">View 1</a>
<a href="#/view2">View 2</a>

<h3>View1 : Display Results in List</h3>
<ul>
    <li ng-repeat = "cust in customers | filter : filter.name | orderBy: 'cust.name' ">  {{cust.name}} - {{cust.city}} </li>
</ul>

</div>
<div class="container">

<a href="#/view1">View 1</a>
<a href="#/view2">View 2</a>

<h3>View2 : Display Results in Table</h3>
    <table border=1 >
        <th>Name</th>
        <th>City</th>
        <tr ng-repeat = "cust in customers | filter : filter.name | orderBy: 'cust.name' ">
            <TD>{{cust.name}}</TD>
            <TD>{{cust.city}}</TD>
        </tr>
    </table>

</div>

References
javascript – AngularJS router config is not working – Stack Overflow

Hope this helps 🙂

Advertisements


Leave a comment

My Angular JS Story so far

How did i stumble upon Angular well here is my story and i will keeping adding to it as this will be my one log for all things angular.

MVC the big buzz word caught my attention and myself being a .Net Developer for almost 4 years now ASP.NET MVC had already caught my attention but never tried it as it was evolving rapidly before i could start with MVC4 this year Microsoft rolled out MVC5 with VS 2013 and they are pushing updates so rapidly that a developer has not even had time to grasp the previous release so how can i use a particular version of MVC for a long term project if its so rapidly evolving.

Now while i searched the term MVC to better understand what this design pattern is i came to know that there are similar javascript frameworks or libraries that do this and the term was “SPA” the term SPA in a normal world feels so relaxing but it meant Single Page Application

link4 16  Top Javascript MVC Frameworks
link4 16  John Papa’s SPA Links

Backbone, Knockout, Ember,Durandal this and that check the link above.

I started comparing various frameworks  to find  what will suit my taste and started asking the people around me at work if they had heard about SPA and Javascript MVC frameworks to my surprise a few of them have been working on Angular and Knockout i was really happy that i can get some assistance from them should i hit a question. I also followed various comparison links to understand what would suit my taste.

AngularJS vs Knockout – Introduction (1 of 8)
KnockoutJS vs AngularJS | Next Big Thing
Backbonejs vs Angularjs : Demystifying the myths | Next Big Thing
Compare Durandal to Angular, Not Knockout to Angular | John Papa
Backbone or Angular or Ember? Here is my choice and why » { 100PercentJS }

Visual Studio gets updated for every new version of ASP.NET , MVC , C# version release and .NET Framework conflicts messes up system and later Service Packs are released.

I finally settled with Angular as it caught my interest and it had everything i was looking for my next big venture into learning something new. AngularJS is a single javascript file and all you need is a good code editor  like Notepad++ or Sublime Text and you can get started with developing or there is jsFiddle  if you want to try something on the fly.

So now where do i start and what do i do , my approach was search something on youtube and get started.

I hit a jackpot with this
AngularJS Fundamentals In 60-ish Minutes – YouTube
AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf

These two things are the perfect start to AngularJS as Dan shares the same feeling as i do and he has taken a lot of effort into best kick starting things with Angular JS for any one who is new to it. Dan you are simply amazing this video was the perfect start to my Angular venture and the best 70 Minutes 50 seconds spent as a developer.

Well there is more to come and more roads to explore with Angular and will keep you posted on my journey ahead and hope to contribute something back to the community.

Next thing on my list is to watch this best practice video

AngularJS MTV Meetup: Best Practices (2012/12/11) – YouTube
Angular.js : Advanced Design Patterns and Best Practices

Few other things that i want  to try with Angular is


BootStrap
UnderscoreJS
BreezeJS
Toastr