Question

请帮助我...我是angular.js的新手，并且使用ng-view处理一个简单的应用程序。

现在的想法是在部署在bluemix上的应用程序中运行ng-view。该代码在plunker中工作正常。如果我通过DevOps服务中的常用编辑代码运行并打开应用程序，则ng-view不会显示视图。

这是我的index.html：

<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="UTF-8">
    <title>Example - example-$route-service-production</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap
    /3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0
    /jquery.min.js"></script>
    <script src="http://code.angularjs.org/1.5.8/angular-route.js"></script>
    <script src="http://code.angularjs.org/1.5.8/angular.js"></script>
    <script src="js/scripts.js"></script>

    <script type="text/javascript">
    angular.element(document.getElementsByTagName('head')).
    append(angular.element('<base href="' + window.location.pathname + 
    '" />'));
    </script>

</head>

<body>

    <ul class="nav">
        <li><a href="#/CustomerList"> List Customers </a></li>
        <li><a href="#/CustomerForm"> Add/Edit Customer </a></li>
    </ul>

    <div ng-view></div>

</body>

</html>

这是我的script.js：

var customerApp = angular.module('app', ['ngRoute']);
customerApp.config(['$routeProvider','$locationProvider',
function($routeProvider) {
        $routeProvider.
        when('/CustomerForm',{
            templateUrl: 'customer-form.html',
            controller: "customerCtrl"
        }).
        when('/CustomerList',{
            templateUrl: 'customer-list.html',
            controller: "customerLstCtrl"
        }).
        otherwise({
            redirectTo: 'customer-form'             
        });
    }]);

customerApp.controller('customerCtrl', ['$scope', function($scope) {

$scope.heading = 'Add / Edit Customer';

}]);

customerApp.controller('customerLstCtrl', ['$scope', function($scope) {

$scope.heading = 'Customer List';

}]);

这两个观点是customer-list.html：

<h1>{{heading}}</h1>

和customer-form.html：

<h1>{{heading}}</h1>

<div>
    <form>
        <label>Name</label>
        <input type="text" ng-model="customer.name" /></br>
        <lablel>Email</lablel>
        <input type="text" ng-model="customer.email"/></br>
        <label>Telephone</label>
        <input type="text" ng-model="customer.phone"/></br>
        <label>Address</label>
        <label>Street</label>
        <input type="text" ng-model="customer.street" /></br>
        <label>City</label>
        <input type="text" ng-model="customer.city"/></br>
        <label>State</label>
        <input type="text" ng-model="customer.state"/></br>
        <label>Zip</label>
        <input type="text" ng-model="customer.zip"/></br>
    </form>

    </p>{{customer}}</p>
</div>

我的应用程序的结构是

 - public
 - - js
 - - - app.js
 - - - lib
 - - - - angular-route.min.js
 - - - - angular.min.js
 - - stylesheet
 - - - style.css
 - - customer-form.html
 - - customer-list.html
 - - index.html

我编写了一个示例应用，但是ng-view无效。所以试过这个应用。它是用CDN角度在plunker和在plunker工作正常。

我在我的应用程序中尝试使用CDN-angular但是没有显示ng-view。然后我改变了angular.min.js w.r.t的来源。我的应用程序的结构，没有成功。

有人知道为什么我的观点在这里没有正确显示吗？

嗨，这是我的app.js：

/*eslint-env node*/

//--------------------------------------------------------------------------   
----
// node.js starter application for Bluemix
//--------------------------------------------------------------------------
----

// This application uses express as its web server
// for more info, see: http://expressjs.com
var express = require('express');

// cfenv provides access to your Cloud Foundry environment
// for more info, see: https://www.npmjs.com/package/cfenv
var cfenv = require('cfenv');

// create a new express server
var app = express();

// serve the files out of ./public as our main files
app.use(express.static(__dirname + '/app'));

// get the app environment from Cloud Foundry
var appEnv = cfenv.getAppEnv();

// start server on the specified port and binding host
app.listen(appEnv.port, '0.0.0.0', function() {
// print a message when the server starts listening
console.log("server starting on " + appEnv.url);
});

为什么我的Angular ng-view没有在bluemix中显示任何内容？

0 个答案: