Angular JS UI-Router not working

Question

It doesn't display anything on view nor any error on console log. Have checked with case sensitives too still couldn't solve the problem. Saw other posts too still couldn't find where am making mistake. Is it necessary to use ng-resource for UI-Router?

    <!DOCTYPE html>
    <html>
    <head>
    <title>Fad Street Den</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.4/angular-ui-router.js"></script>
    <body cz-shortcut-listen="true">
    <div>
    {{name}}
    <div ui-view="header"></div>
    <div ui-view="content"></div>
    </div>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="controller.js"></script>
    <script type="text/javascript" src="services.js"></script>
    </body>
    </html>

App.js file

    var app=angular.module('myApp', ['ui.router']);
    .config(function($stateProvider,$urlRouterProvider)
    {
    $stateProvider
    .state('home',
    {
    url:'/',
    views:
    {
    'header':
    {
        templateUrl:"header.html"
    },
    'content':
    {
        templateUrl:"body.html",
        controller:"productscontroller"
    }
    }
    })
    $urlRouterProvider.otherwise('/');  
    })

Controller.js File

    var app=angular.module('myApp');
    app.controller('productscontroller', 
    ['$scope','productservice',function($scope,productservice)
    {
    $scope.name="kannan";
    productservice.productlists().then(function(response)
    {
    $scope.ans=response.data;
    console.log($scope.ans);
    },function(response)
    {
    console.log(response.status);
    return response.status;
    });
    }]);

Header.html

   <body ng-app="myApp" ng-controller="productscontroller">
   <ul class="nav navbar-nav">
   <li class="active"><a ui-sref="home">Home</a></li>
   <li><a ui-sref="home">Home</a></li>
   </ul>
   </body>

Body.html

   <body ng-app="myApp" ng-controller="productscontroller">
   <div>
    <div style="height: 200px;" ng-repeat="x in ans">
    <img style="width: 100px;height: 100px;float: left;" class="img-responsive"  
         ng-src="{{x.imageURL1}}">
        <h1>{{x.color}}</h1>
        <p>{{x.brand}}</p>
        <p>{{x.gender}}</p>
    </div>
    </div>
   </body>

Radim Köhler · Accepted Answer · 2016-09-01 08:22:06Z

3

We have to provide ng-app="myApp" at the most root level possible. Mostly on the index.html

<body ng-app="myApp" ...

or even on the <html> (e.g. to be able to adjust <title> which is part of <head>)

<html ng-app="myApp" ...

the header.html and body.html (as shown above) would not work, because that would not trigger the application at all

answered Sep 1, 2016 at 8:22

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kannan T Over a year ago

Thanks allot mate Its working now but may i know the reason why it wouldn't trigger at all?

Radim Köhler Over a year ago

After the fix: 1) index.html is loaded (always) 2) it finds the ng-app, and angular can start to work 3) states are properly set 4) ui-view is used and filled. Before fix 1) index.thml is loaded 2) ng-app is not found - NO Angular app starts ... stopped here... hope it helps a bit ;)

Radim Köhler Over a year ago

I strongly suggest - issue new question. Really. You will get larger audience.. and surely the help you deserve ;)

Kannan T Over a year ago

Thanks bro for the explanation i understood now. I got an another problem. My service looks like this var app=angular.module('myApp'); app.service('productservice', function($http){ this.productlists=function(){return $http.get("api.myjson.com/bins/5a403")}}); In the api you can see total 6 products now am fetching all the products and i will display now if i click single product it should redirect to another page where respective(single) product should display i used state params am getting the particular id correctly but i dont know how to fetch the product

Collectives™ on Stack Overflow

Angular JS UI-Router not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related