AngularJS - 模板不起作用

标签 angularjs templating restangular mean-stack route-provider

我正在使用 Restangular 通过 MEAN 堆栈创建一个简单的 API。

这是我的代码:

index.html

<!DOCTYPE html>

<html data-ng-app="scotchTodo">
<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

    <title>Node/Angular Todo App</title>

    <!-- SCROLLS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
    <style>
        html{
            overflow-y:scroll;
        }
        body{
            padding-top:50px; 
        }
    </style>    

    <!-- SPELLS -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/restangular/1.4.0/restangular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

    <script src="app.js"></script>
</head>
<body>
    <div data-ng-view>

    </div>
</body>
</html>

app.js

var scotchTodo = angular.module('scotchTodo', ['restangular','ngRoute']);

//config
scotchTodo.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider
    .when('/',{
        templateUrl: 'list.html',
        controller: 'ListController'
    })
    .when('api/todos/:todo_id',{
        templateUrl: 'edit.html',
        controller: 'EditController'
    });

    $locationProvider.html5Mode(true);

}]);


//controllers
scotchTodo.controller('ListController', ['$scope', 'Restangular',
    function($scope, Restangular) {

        //GET ALL
        var baseTodo = Restangular.all('api/todos');
        baseTodo.getList().then(function(todos) {
            $scope.todos = todos;
        });

        //POST -> Save new
        $scope.save = function() {
            var baseTodo = Restangular.all('api/todos');
            var newTodo = {'text': $scope.text};
            baseTodo.post(newTodo).then(function(todos) {
                $scope.todos = todos;
                $scope.text = '';
            });
        };

        //DELETE
        $scope.delete = function(id) {
            var baseTodo = Restangular.one('api/todos', id);
            baseTodo.remove().then(function(todos) {
                $scope.todos = todos;
            });
        };

    }]);

scotchTodo.controller('EditController', ['$scope', 'Restangular','$routeParams',
    function($scope, Restangular, $routeParams) {   

        var baseTodo = Restangular.one('api/todos', id);

        baseTodo.getList().then(function(todo) {
            $scope.todo = todo[0];
            window.test = "dev";
        });

        //PUT -> Edit
        $scope.update = function(id){
            var baseTodo = Restangular.one('api/todos', id);
            baseTodo.text = "Edited";
            baseTodo.put().then(function(todos) {
                $scope.todos = todos;
            });
        };

    }]);

列表.html

<div>
    <div data-ng-repeat="todo in todos">
        {{todo.text}}<a href="api/todos/{{todo._id}}">Edit</a><button data-ng-click="delete(todo._id)">X</button>
    </div>
    <input type="text" data-ng-model="text"/>
    <button data-ng-click="save()">Add</button>
</div>

编辑.html

<div>
    <input type="text" data-ng-model="text" value="{{todo.text}}" />
    <button data-ng-click="update(todo._id)">Save</button>
</div>

服务器.js

// setup ========================
var express = require('express');
var app = express();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');

//configuration =================
mongoose.connect('mongodb://127.0.0.1:27017/sl', function(err, db) {
    if (!err) {
        console.log("We are connected to " + db);
    }
});

app.use(express.static(__dirname + '/public'));
app.use(bodyParser());

// application -------------------------------------------------------------
app.get('/', function(req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});

//listen ========================
app.listen(8080);
console.log('App started on the port 8080');

//define model ==================
var Todo = mongoose.model('Todo', {
    text: String
});

// routes ======================================================================

// api ---------------------------------------------------------------------

//get one todo
app.get('/api/todos/:todo_id', function(req, res) {

    // use mongoose to get all todos in the database
    Todo.find({
        _id: req.params.todo_id
    },function(err, todos) {

        // if there is an error retrieving, send the error. nothing after res.send(err) will execute
        if (err){
            res.send(err);
        }

        res.json(todos); // return all todos in JSON format
    });
});

// get all todos
app.get('/api/todos', function(req, res) {

    // use mongoose to get all todos in the database
    Todo.find(function(err, todos) {

        // if there is an error retrieving, send the error. nothing after res.send(err) will execute
        if (err){
            res.send(err);
        }

        res.json(todos); // return all todos in JSON format
    });
});

// create todo and send back all todos after creation
app.post('/api/todos', function(req, res) {

    // create a todo, information comes from AJAX request from Angular
    Todo.create({
        text: req.body.text,
        done: false
    }, function(err, todo) {
        if (err){
            res.send(err);
        }

        // get and return all the todos after you create another
        Todo.find(function(err, todos) {
            if (err)
                res.send(err);
            res.json(todos);
        });
    });

});

// update todo and send back all todos after creation
app.put('/api/todos/:todo_id', function(req, res) {

    // create a todo, information comes from AJAX request from Angular
    Todo.update({
        _id: req.params.todo_id
    }, {
        text:req.body.text
    }, function(err, todo) {
        if (err){
            res.send(err);
        }

        // get and return all the todos after you create another
        Todo.find(function(err, todos) {
            if (err)
                res.send(err);
            res.json(todos);
        });
    });

});


// delete a todo
app.delete('/api/todos/:todo_id', function(req, res) {
    Todo.remove({
        _id: req.params.todo_id
    }, function(err, todo) {
        if (err){
            res.send(err);
        }

        // get and return all the todos after you create another
        Todo.find(function(err, todos) {
            if (err){
                res.send(err);
            }
            res.json(todos);
        });
    });
});

我的应用程序的第一页加载得非常好。这是屏幕截图。

list.html

但是当我单击任一编辑链接时，它应该加载 edit.html 模板。但它在控制台中显示一个空白页面，没有错误。这是屏幕截图。 edit.html

我无法弄清楚出了什么问题。请帮忙。请问是否还需要其他代码。我几乎添加了我所做的一切。我知道这很烦人并且不推荐，但我不确定我的代码的哪一部分导致了这个问题。

编辑1:

我最远的猜测是 edit.html 的 url 可能无法正确解析。但我不知道如何测试!任何帮助将不胜感激。

编辑2:目录结构

Directory Structure

解决方案:由@ashu提供

问题出在index.html 中的这一行

<script src="app.js"></script>

应该是:

<script src="/app.js"></script>

但是，我不清楚为什么!无论哪种方式，页面都包含 app.js。很奇怪。

最佳答案

您的 Angular 和 Express 路线相同。

.when('api/todos/:todo_id',{
    templateUrl: 'edit.html',
    controller: 'EditController'
});

以及 express 

app.get('/api/todos/:todo_id', function(req, res) {

因此，存在歧义。您可以从 Angular 网址中删除“api”部分。

.when('/todos/:todo_id', {
     templateUrl: 'edit.html',
     controller: 'EditController'
 })

在服务器中，您可以添加一个包罗万象的路由来处理所有非 api url。为此，您可以在定义 api 路由后将 app.get('/', function(req,res) {..}) 调用移至底部。 

// < Define APi Routes here >

//catch all route for serving the html template
app.get('/*', function(req, res ) {
      res.sendfile('./public/index.html')
});

此外，在您的 app.js EditController 中，您忘记初始化 id 的值。 

var id = $routeParams.todo_id;

关于AngularJS - 模板不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23855074/

上一篇：angularjs - 在 UI 路由器中用子 url 覆盖父 url (Angular)

下一篇：templates - 如何在Geany中添加自定义模板？

相关文章：

angularjs - 如何从底部开始滚动列表？

javascript - Angularjs - 显示当前日期并将其保存在表格中

javascript - 一次性绑定(bind)在自定义 AngularJS 指令中不起作用

html - node.js - 将焊接与 express 一起使用？

javascript - 客户端模板和部分 View 和表达

javascript - 在 Restangular 中使用完整的 URL

javascript - 如何在 Angular Controller 中检索从 Node 服务器发送的 ejs 数据？

jsf-2 - 覆盖 <ui :define>

javascript - AngularJS(矩形): wrap service method into timeout

javascript - Angular 用户界面路由器解决不解决链式 promise

©2024 IT工具网  联系我们