Angularjs路由VS Backbonejs路由 [英] Angularjs routing Vs Backbonejs routing
问题描述
我收到与Angualrjs沮丧，因为它不断抛出错误或失败，只是我虽然也跟着教程确切地在我的本地在所有工作。例如，这教程我想测试出来的路由。
这是我所得到的，
错误：[$喷油器：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）+=+ EN codeURIComponent（功能== typeof运算
参数[C]参数[C] .toStrin ...这是我怎么能做到这一点在Backbonejs容易！
VAR AppRouter = Backbone.Router.extend（{
路线：{
''：'renderListContactsPage'，
list_contacts'：'renderListContactsPage'，
add_new_contact'：'renderAddNewContactPage'，
search_contacts'：'renderSearchContactsPage'，
edit_contact /：身份证'：'renderEditContactPage'，
文/编辑/：URL /'：'renderDynamicPage'，
：父/：URL /'：'renderDynamicPage2'，
'：模块/：支/：方法/设置：setnumber /页：页面编号/'：'renderDynamicPage3'，
'！？模块/：支/：方法进行设置=：setnumber＆安培;页=：页面编号'：'renderDynamicPage3
}， renderAddNewContactPage：功能（）{
VAR projectAddView =新ProjectAddView（）;
projectAddView.addContactPage（）; }， renderListContactsPage：功能（）{
VAR projectListView =新ProjectListView（）;
projectListView.listContactsPage（）;
}， renderSearchContactsPage：功能（）{
VAR projectSearchView =新ProjectSearchView（）;
projectSearchView.searchContactPage（）;
}...有什么我错过了在角？我使用的是最新版本吧！ - 1.2.6 ，他们有这么差的文档
编辑：
HTML
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8＆GT;
＆LT;标题＆GT; AngularJS＆LT; /标题＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;脚本SRC =JS / jQuery的-1.10.1.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /角route.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =JS / app.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT; ＆LT;身体GT; ＆LT; DIV NG-应用=应用程序＆GT;
＆LT; NG-视图＆gt;＆LT; / NG-视图＆gt;
＆LT; / DIV＆GT; ＆LT; /身体GT;＆LT; / HTML＆GT;角，
VAR应用= angular.module（应用程序，[]）;的app.config（函数（$ routeProvider）{
$ routeProvider.when（/，
{
templateUrl：app.html
控制器：AppCtrl
}
）;
}）;app.controller（AppCtrl功能（$范围）{
$ scope.model = {
消息：这是我的应用程序！
}
}）;
解决方案您需要
ngRoute要注射在你的模块声明依赖关系。VAR应用= angular.module（应用程序，[]）;应
VAR应用= angular.module（应用程序，['ngRoute']）;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!!!" } });
解决方案You need
ngRouteto be injected as a dependency in your module declaration.var app = angular.module("app", []);should be
var app = angular.module("app", ['ngRoute']);
这篇关于Angularjs路由VS Backbonejs路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
