CODEWITHSUNDEEP
javascriptangularjs
Saurabh Palatkar
Saurabh Palatkar

Reputation: 3384

Angular/Angular routing not working

This is the duplicate question but I am not able to understand what exactly I am doing wrong in my code. It's a very basic angular app but the routing not working and also not invoking the controller. I am not finding anything wrong in the code.

EDIT: Here is the Plunker

app.js:

var appRoot = angular.module('smapp', ['ngRoute']);
appRoot.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/Home', { templateUrl: '/views/home.html', controller: 'OmdbCtrl' })
        .when('/', { templateUrl: '/views/home.html', controller: 'OmdbCtrl' })
        .otherwise({ redirectTo: '/' });
}
]);

controller:

appRoot.controller('OmdbCtrl', ['$scope', 'OmdbFactory', function ($scope, OmdbFactory) {
    $scope.test = 'working';
}]);

Index.html:

<!doctype html>
<html ng-app>
<head>
    <title>My Angular App</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
    <div class="container-fluid">hi
        <ng-view class="view-slide-in"  ng-cloak=""></ng-view>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.11/angular.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.11/angular-route.min.js"></script>
    <script src="./js/app.js"></script>
    <script src="./js/factory.js"></script>
    <script src="./js/OmdbCtrl.js"></script>
</body>
</html>

home.html

<div class="row">
    <div class="col-lg-12"><h4>{{test}}</h4></div>
</div>

Upvotes: 0

Views: 3044

Answers (3)

Siraj Hussain
Siraj Hussain

Reputation: 874

I could found two errors in above code. 1- You need to add your app name 

<html ng-app="smapp">

2- In Your OmdbCtrl your are injecting OmdbFactory, There must be a problem in your factory. As you did not added factory code above. I just removed service from controller and its working pretty fine and i was table to resolve {{ test }}

appRoot.controller('OmdbCtrl', ['$scope', function ($scope) {
    $scope.test = 'working';
}]);

You must need to recheck your service, or you send send the code.

Upvotes: 0

BHUVNESH KUMAR
BHUVNESH KUMAR

Reputation: 401

Routing is in your app not working because you are just opening index.html directly from the browser. To fix this you will need to serve your code from a webserver and access it on localhost. If you have Node.Js setup then you can use express to run server.

You have to run your code in following way

Step 1:-

First add ng-app="smapp" to index.html

Than

Create directory as following:-

 *Public
   *views
      *home.html
   *js
      *app.js
      *factory.js
      *OmdbCtrl.js
   *index.html
 *server.js

Step 2: -

Put following code in inside "server.js"

var express = require('express');
var path = require('path');
var app = express();

app.use(express.static(path.join(__dirname, 'public')));

// catch 404 and forward to error handler
app.use(function(req, res, next) {

  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});

app.listen(3000);
console.log("server is listening at port 3000");
module.exports = app;

Step 3:-

Run your application from server.js path as,

* npm install

Than

* node server.js

Step 4: -

It will Open your application in browser by default.If not,than you can also open it manually as following way,

******http://localhost:3000**

Note :-

Screenshot of appication: -

enter image description here

Upvotes: 3

Saurabh Palatkar
Saurabh Palatkar

Reputation: 3384

Ok, this was very silly mistake I did.

Just changed following:

<html ng-app>

to:

<html ng-app="smapp">

Upvotes: 0

Related Questions