使用angularjs + node.js进行双向绑定

时间:2015-06-15 22:55:38

标签: javascript json angularjs node.js

我正试图以这种方式使用从服务器(node.js)发送数据到客户端(前端:angularjs):

//app.js
angular.module('app').config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/courses', { templateUrl: '/partials/courses/course-list',
            controller: 'eCourseListCtrl'
        })
        .when('/courses/:id', { templateUrl: '/partials/courses/course-details',
            controller: 'eCourseDetailCtrl'
        })
});

//eCachedCourses.js
'use strict';

angular.module('app').factory('eCachedCourses', function(eCourse) {
    var courseList;

    return {
        query: function() {
            if(!courseList) {
                courseList = eCourse.query();
            }
            return courseList;
        }
    }
});

//eCourse.js
'use strict';

angular.module('app').factory('eCourse', function($resource){
        var CourseResource = $resource('/course/:id' {id:'@id'}, {
                update: {method: 'PUT', isArray:false}
        });
        return CourseResource;
})

//eCourseListCtrl.js
 'use strict';

angular.module('app').controller('eCourseListCtrl', function($scope, eCachedCourses){
        $scope.courses = eCachedCourses.query();

        $scope.sortOptions = [{value: "title", text: "Sort by Title"},
                          {value: "date", text: "Sort by Date"}];

    $scope.sortOrder = $scope.sortOptions[0].value;
});

//routes.js
'use strict';

module.exports = function(app){
    // Profs
    app.get('/courses', function(req, res) {
      app.models.course.find().exec(function(err, courses) {
        if(err) return res.json({ err: err }, 500);
        res.send(courses);
      });
    });
}

//course-list
.container.top-padding-med
    .pull-right
        form.form-inline
            .form-group
                input.form-control(ng-model="searchText", placeholder="Filter")
            .form-group.margin-left-med
                select.form-control(ng-model="sortOrder",ng-options="item.value as item.text for item in sortOptions")
    table.table.table-hover.table-striped.table-condensed
        thead
            tr
                th Title
                th Date
                th Duration
        tbody
            tr(ng-repeat="course in courses | filter:searchText | orderBy:sortOrder")
                td
                    a(href="/courses/{{course.id}}") {{course.title}}
                td {{course.dateHour}}
                td {{course.duration}}

不是那种呈现带有隐式json的html页面的方式吗?因为当我渲染它时,会显示json!怎么了?

提前致谢!

0 个答案:

没有答案