AngularJS路由与Backbonejs路由

Question

我一直对Angualrjs感到沮丧，因为它仍然会引发错误，或者即使我完全按照教程进行操作，也无法在我的本地主机上工作。 例如，我要测试路由的本教程。

这就是我得到的，

错误：[$ injector：modulerr] http://errors.angularjs.org/1.2.6/ $ injector / modulerr？p0 = app＆p1 =％5B％24injector％3Aunpr％5D％20http％3A％2F％2Ferrors.angularjs。 org％2F1.2.6％2F％24injector％2Funpr％3Fp0％3D％2524routeProvider％0As％2F％3C％40http％3A％2F％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fangular.min.js％ 3A6％0AYb％2Fm。％24injector％3C％40http％3A％2F％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fangular.min.js％3A32％0Ac％40http％3A％2F％2Flocalhost％2Ftest ％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fangular.min.js％3A30％0Ad％40http％3A％2F％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fange.min.js％3A30％0Ae ％2F％3C％40http％3A％2F％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fangular.min.js％3A29％0Aq％40http％3A％2F％2F％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular ％2F3％2Fjs％2Fangular.min.js％3A7％0Ae％40http％3A％2F％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fangular.min.js％3A29％0AYb％40http％3A％2F ％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fangular.min.js％3A32％0AXb％2Fc％40http％3A％2F％2Flocalhost％2Ftest％2F2013％2 Fjs％2Fangular％2F3％2Fjs％2Fangular.min.js％3A17％0AXb％40http％3A％2F％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fangular.min.js％3A18％0ARc％40http％ 3A％2F％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fangular.min.js％3A17％0A％40http％3A％2F％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fangular。 min.js％3A200％0Ax.Callbacks％2Fc％40http％3A％2F％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fjquery-1.10.1.min.js％3A4％0Ax.Callbacks％2Fp。 fireWith％40http％3A％2F％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fjquery-1.10.1.min.js％3A4％0A.ready％40http％3A％2F％2F％2Flocalhost％2Ftest％2F2013％ 2Fjs％2Fangular％2F3％2Fjs％2Fjquery-1.10.1.min.js％3A4％0Aq％40http％3A％2F％2Flocalhost％2Ftest％2F2013％2Fjs％2Fangular％2F3％2Fjs％2Fjs％2Fjquery-1.10.1.min。 js％3A4％0A

... c-1）+“ =” + encodeURIComponent（“ function” == typeof arguments [c]？arguments [c] .toStrin ...

这就是我可以轻松地在Backbonejs中做到的方式！

var AppRouter = Backbone.Router.extend({
        routes: {
            '':                 'renderListContactsPage',
            'list_contacts':    'renderListContactsPage', 
            'add_new_contact':  'renderAddNewContactPage', 
            'search_contacts':  'renderSearchContactsPage', 
            'edit_contact/:id':     'renderEditContactPage',
            '!article/edit/:url/':    'renderDynamicPage',
             ':parent/:url/':    'renderDynamicPage2',
            '!:module/:branch/:method/set:setnumber/page:pagenumber/':   'renderDynamicPage3',
            '!:module/:branch/:method?set=:setnumber&page=:pagenumber': 'renderDynamicPage3'
        },

        renderAddNewContactPage: function () {
            var projectAddView = new ProjectAddView();
            projectAddView.addContactPage();

        }, 

        renderListContactsPage: function () {
            var projectListView = new ProjectListView();
            projectListView.listContactsPage();
        }, 

        renderSearchContactsPage: function () {
            var projectSearchView = new ProjectSearchView();
            projectSearchView.searchContactPage();
        }

...

我在Angular中错过了什么？ 我正在使用它的最新版本-v1.2.6 ，它们的文档太差了！

编辑：

html，

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>AngularJS</title>
        <meta charset="utf-8">
        <script src="js/jquery-1.10.1.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script src="js/angular-route.js"></script>

        <script src="js/app.js" type="text/javascript"></script>
    </head>

    <body>

        <div ng-app="app">
            <ng-view></ng-view>
        </div>

    </body>

</html>

有角度的

var app = angular.module("app", []);

app.config(function($routeProvider){
  $routeProvider.when("/",
    {
      templateUrl: "app.html",
      controller: "AppCtrl"
    }
  );
});

app.controller("AppCtrl", function($scope){
  $scope.model = {
    message: "This is my app!!!"
  }
});

Answer 1

您需要将ngRoute作为依赖项注入模块声明中。

var app = angular.module("app", []);

应该

var app = angular.module("app", ['ngRoute']);

Answer 2

var app = angular.module("app", ['ngRoute']);

app.config(['$routeProvider', function($routeProvider){
  $routeProvider.when("/",
    {
      templateUrl: "app.html",
      controller: "AppCtrl"
    }
  );
}]);

AngularJS路由与Backbonejs路由

问题描述

2 个解决方案

解决方案1
5 已采纳 2013-12-26 08:10:54

解决方案2
4 2013-12-26 08:11:10

AngularJS路由与Backbonejs路由

问题描述

2 个解决方案

解决方案1 5 已采纳 2013-12-26 08:10:54

解决方案2 4 2013-12-26 08:11:10

解决方案1
5 已采纳 2013-12-26 08:10:54

解决方案2
4 2013-12-26 08:11:10