Angular JS UI-Router 不工作答案

【问题标题】：Angular JS UI-Router not workingAngular JS UI-Router 不工作
【发布时间】：2016-09-01 16:25:12
【问题描述】：

它不会在视图中显示任何内容，也不会在控制台日志上显示任何错误。也检查过区分大小写仍然无法解决问题。看到其他帖子也找不到哪里出错了。 UI-Router需要使用ng-resource吗？

    <!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 文件

    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 文件

    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>

正文.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>

【问题讨论】：

标签： javascript html angularjs angularjs-directive angular-ui-router

【解决方案1】：

我们必须在最根级别提供 ng-app="myApp"。主要在 index.html 上

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

甚至在<html>上（例如，能够调整<title>，这是<head>的一部分）

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

header.html 和 body.html （如上所示） 不起作用，因为这不会触发完全应用

【讨论】：

感谢分配伙伴它现在可以工作，但我可以知道它根本不会触发的原因吗？
修复后：1) index.html 被加载（总是） 2) 它找到了 ng-app，并且 angular 可以开始工作 3) 状态设置正确 4) 使用了 ui-view并填满。 修复之前 1) index.thml 已加载 2) ng-app 未找到 - 没有 Angular 应用程序启动...在这里停止...希望对您有所帮助 ;)
我强烈建议 - 发布新问题。真的。你会得到更多的观众......当然你应该得到帮助;）
感谢兄弟的解释，我现在明白了。我遇到了另一个问题。我的服务看起来像这样 var app=angular.module('myApp'); app.service('productservice', function($http){ this.productlists=function(){return $http.get("api.myjson.com/bins/5a403")}}); 在 api 你可以看到总共 6 个产品现在正在获取所有产品，我现在将显示如果我单击单个产品，它应该重定向到另一个页面，相应的（单个）产品应该显示我使用的状态参数正在正确获取特定的 id，但我不知道如何获取产品