Angularjs routing Vs Backbonejs routing

2019-08-16 09:29发布

站内问答 / JavaScript
527 2 6

I am getting frustrated with Angualrjs as it keeps throwing errors or just fails to work at all on my localhost despite I have followed the tutorial exactly. For instance this tutorial which I want to test out the routing.

And this is what I get,

Error: [$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%2Fangular.min.js%3A30%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Ftest%2F2013%2Fjs%2Fangular%2F3%2Fjs%2Fangular.min.js%3A29%0Aq%40http%3A%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%2Fjs%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%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%2Fjquery-1.10.1.min.js%3A4%0A

...c-1)+"="+encodeURIComponent("function"==typeof arguments[c]?arguments[c].toStrin...

This is how I could do it in Backbonejs easily!

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();
        }

...

What have I missed in Angular? I am using the latest version of it - v1.2.6 and they have such a poor documentation!

EDIT:

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>

angular,

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!!!"
  }
});

2条回答
smile是对你的礼貌
2楼-- · 2019-08-16 09:38 
var app = angular.module("app", ['ngRoute']);

app.config(['$routeProvider', function($routeProvider){
  $routeProvider.when("/",
    {
      templateUrl: "app.html",
      controller: "AppCtrl"
    }
  );
}]);
查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
3楼-- · 2019-08-16 09:57

You need ngRoute to be injected as a dependency in your module declaration.

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

should be 

var app = angular.module("app", ['ngRoute']);
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)