CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directiveangular-ui-router
Kannan T
Kannan T

Reputation: 1749

Angular JS UI-Router not working

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>

Upvotes: 2

Views: 255

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

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

Upvotes: 3

Related Questions