从移动NG-包括ngRoute [英] moving from ng-include to ngRoute
本文介绍了从移动NG-包括ngRoute的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我新的角度，最近了解它的基本功能。
在我当前的项目，我开发一个单页的应用程序。截至目前，我的HTML / JS设置是按如下：
HTML
＆LT;身体GT;
＆LT; NG-包括SRC ='的src /包括/ /home.html的'＆GT;＆LT; / NG-包括＆GT;
＆LT;！ - home.html的是静态数据的HTML模板 - ＆GT;
＆LT; /身体GT;
app.js：
使用严格的; VAR应用= angular.module（'MyApp的'，['家']）; 角
.module（家，[]）
.directive（'HOMEDIR'，函数（）{
返回{
更换：真实，
限制：'E'，
templateUrl：'SRC /包括/ home.html做为
};
}）;
这code为工作正常，但我想向大家介绍的路由有一翻更好的控制，而不是使用 NG-包括。
所以，现在，我的HTML看起来是一样的，而我其实不知道做什么，在它更改，同时使用的路由。
我app.js现在看起来是这样的：
使用严格的;VAR应用= angular.module（'MyApp的'，['家']）;//尝试引入路由：角
.module（'家'，['ngResource'，'ngRoute']）
的.config（['$ routeProvider'，'$ locationProvider']，
功能（$ routeProvider，$ locationProvider）{
$ routeProvider。
什么时候（'/'， {
templateUrl：'SRC /包括/ home.html做为'，
控制器：'homeCtrl
}）。
当（'/抽屉'，{
redirectTo：'SRC /包括/ home.html做为＃抽屉，
控制器：'drawerCtrl
}）
。除此以外（{
redirectTo：'/'
}）; //使用HTML5 API历史
$ locationProvider.html5Mode（真）;
}
）;app.controller（'homeCtrl'，函数（$范围）{
$ scope.message =一些信息;
的console.log（homeCtrl称为）;
}）;app.controller（'drawerCtrl'，函数（$范围）{
$ scope.message =一些其他的消息;
的console.log（drawerCtrl称为）;
}）;
不过，我得到一个错误：
错误：错误：modulerr
模块错误
按照以下错误的链接：
当一个模块发生故障时，由于一些例外加载出现此错误。
为什么不装？我在想什么？我应该改变的HTML？
更新：
后，包括角route.min.js ，我收到错误：
错误：全是未定义
beginsWith @文件：/// D：/projects/svn/trunk/src/libs/angular.js：8729：1
LocationHtml5Url/this.$$parse@file：/// D：/projects/svn/trunk/src/libs/angular.js：8772：9
$ LocationProvider / $这个GET＆LT; @file：/// D：/projects/svn/trunk/src/libs/angular.js：9269：5
调用@文件：/// D：/projects/svn/trunk/src/libs/angular.js：3762：7
createInjector / InstanceCache控制喷油$＆LT; @file：/// D：/projects/svn/trunk/src/libs/angular.js：3604：13
@的getService文件：/// D：/projects/svn/trunk/src/libs/angular.js：3725：11
调用@文件：/// D：/projects/svn/trunk/src/libs/angular.js：3752：1
createInjector / InstanceCache控制喷油$＆LT; @file：/// D：/projects/svn/trunk/src/libs/angular.js：3604：13
@的getService文件：/// D：/projects/svn/trunk/src/libs/angular.js：3725：11
调用@文件：/// D：/projects/svn/trunk/src/libs/angular.js：3752：1
registerDirective /＆LT; /＆LT; @file：/// D：/projects/svn/trunk/src/libs/angular.js：5316：21
@的forEach文件：/// D：/projects/svn/trunk/src/libs/angular.js：322：7
registerDirective /＆LT; @file：/// D：/projects/svn/trunk/src/libs/angular.js：5314：13
调用@文件：/// D：/projects/svn/trunk/src/libs/angular.js：3762：7
createInjector / InstanceCache控制喷油$＆LT; @file：/// D：/projects/svn/trunk/src/libs/angular.js：3604：13
@的getService文件：/// D：/projects/svn/trunk/src/libs/angular.js：3725：11
addDirective @文件：/// D：/projects/svn/trunk/src/libs/angular.js：6363：28
collectDirectives @文件：/// D：/projects/svn/trunk/src/libs/angular.js：5801：1
compileNodes @文件：/// D：/projects/svn/trunk/src/libs/angular.js：5666：1
compileNodes @文件：/// D：/projects/svn/trunk/src/libs/angular.js：5682：1
compileNodes @文件：/// D：/projects/svn/trunk/src/libs/angular.js：5682：1
编译@文件：/// D：/projects/svn/trunk/src/libs/angular.js：5603：1
引导/ doBootstrap /＆LT; /＆LT; @file：/// D：/projects/svn/trunk/src/libs/angular.js：1343：11
$RootScopeProvider/this.$get</Scope.prototype.$eval@file:///D:/projects/svn/trunk/src/libs/angular.js:12077:9
$RootScopeProvider/this.$get</Scope.prototype.$apply@file:///D:/projects/svn/trunk/src/libs/angular.js:12175:11
引导/ doBootstrap /＆LT; @file：/// D：/projects/svn/trunk/src/libs/angular.js：1341：9
调用@文件：/// D：/projects/svn/trunk/src/libs/angular.js：3762：7
引导/ doBootstrap @文件：/// D：/projects/svn/trunk/src/libs/angular.js：1340：8
引导@文件：/// D：/projects/svn/trunk/src/libs/angular.js：1353：5
angularInit @文件：/// D：/projects/svn/trunk/src/libs/angular.js 1301：37
@file：/// D：/projects/svn/trunk/src/libs/angular.js：21050：5
jQuery.Callbacks/fire@file：/// D：/projects/svn/trunk/src/libs/jquery-1.9.1.min.js：1037：1
jQuery.Callbacks/self.fireWith@file：/// D：/projects/svn/trunk/src/libs/jquery-1.9.1.min.js：1148：7
。就绪@文件：/// D：/projects/svn/trunk/src/libs/jquery-1.9.1.min.js：433：38
完成@文件：/// D：/projects/svn/trunk/src/libs/jquery-1.9.1.min.js：103：4文件：/// D：/projects/svn/trunk/src/libs/angular.js
9511线
编辑：
下面是我的HTML进口：
＆LT; HEAD＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT; ＆LT;！ - 外部库 - ＆GT; ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =SRC / CSS / FONT-真棒-4.2.0 / CSS / FONT-awesome.min.css＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =SRC / CSS / headers.css＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =SRC / CSS / drawer.css＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =SRC / CSS / custom.css＆GT; ＆LT;脚本类型=文/ JavaScript的SRC =SRC /库/ jQuery的-1.9.1.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =SRC /库/ bootstrap.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =SRC /库/ angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =SRC /库/角resource.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =SRC /库/角-UI-router.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =SRC /库/角sanitize.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =SRC /库/角拉对refresh.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =SRC /库/ nprogress.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =SRC /库/ NG-modal.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =SRC /库/角route.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本类型=文/ JavaScript的SRC =SRC / JS / jssor-滑块插件/ jssor.core.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =SRC / JS / jssor-滑块插件/ jssor.utils.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =SRC / JS / jssor-滑块插件/ jssor.slider.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本类型=文/ JavaScript的SRC =SRC / JS / app.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本＆GT;
文件撰写（'＆LT;基本href =+ document.location +'/＆GT;'）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
解决方案
配置部分不正确。而不是
的.config（['$ routeProvider'，'$ locationProvider']，功能（$ routeProvider，$ locationProvider）{...}）;
应该是
的.config（['$ routeProvider'，'$ locationProvider'，函数（$ routeProvider，$ locationProvider）{...}]）;
请注意，该函数的定义属于数组对象。
另一个错误是在 redirectTo 的抽屉路线的财产，目前它没有任何意义。你可能想这个代替：
。当（'/抽屉'，{
templateUrl：'SRC /包括/ drawer.html'，
控制器：'drawerCtrl
}）
I am new to Angular and learned the basics about it recently.
In my current project, I am developing a single page application. As of now, my HTML/JS setup is as per below:
HTML:
<body>
<ng-include src='"src/includes/home.html"'></ng-include>
<!-- home.html is the HTML template with static data -->
</body>
app.js:
'use strict';
var app = angular.module('MyApp',['home']);
angular
.module('home', [])
.directive('homeDir', function(){
return {
replace: true,
restrict: 'E',
templateUrl: 'src/includes/home.html'
};
});
This code is working fine but I would like to introduce routing to have better control over the pages, instead of using ng-include.
So now, my HTML looks the same and I actually dont know what to change in it while using routing.
My app.js now looks like this:
'use strict';
var app = angular.module('MyApp',['home']);
// trying to introduce routing:
angular
.module('home', ['ngResource', 'ngRoute'])
.config(['$routeProvider', '$locationProvider'],
function($routeProvider, $locationProvider){
$routeProvider.
when('/', {
templateUrl: 'src/includes/home.html',
controller: 'homeCtrl'
}).
when('/drawer', {
redirectTo: 'src/includes/home.html#drawer',
controller: 'drawerCtrl'
})
.otherwise({
redirectTo: '/'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
}
);
app.controller('homeCtrl', function($scope){
$scope.message = "some message";
console.log("homeCtrl called");
});
app.controller('drawerCtrl', function($scope){
$scope.message = "some other message";
console.log("drawerCtrl called");
});
However, I am getting an error:
Error: error:modulerr
Module Error
As per the link following the error:
This error occurs when a module fails to load due to some exception.
Why is it not loading? What am I missing? What should I change the HTML to?
UPDATE:
After including angular-route.min.js, I am getting the error:
Error: whole is undefined
beginsWith@file:///D:/projects/svn/trunk/src/libs/angular.js:8729:1
LocationHtml5Url/this.$$parse@file:///D:/projects/svn/trunk/src/libs/angular.js:8772:9
$LocationProvider/this.$get<@file:///D:/projects/svn/trunk/src/libs/angular.js:9269:5
invoke@file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
createInjector/instanceCache.$injector<@file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService@file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
invoke@file:///D:/projects/svn/trunk/src/libs/angular.js:3752:1
createInjector/instanceCache.$injector<@file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService@file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
invoke@file:///D:/projects/svn/trunk/src/libs/angular.js:3752:1
registerDirective/</<@file:///D:/projects/svn/trunk/src/libs/angular.js:5316:21
forEach@file:///D:/projects/svn/trunk/src/libs/angular.js:322:7
registerDirective/<@file:///D:/projects/svn/trunk/src/libs/angular.js:5314:13
invoke@file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
createInjector/instanceCache.$injector<@file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService@file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
addDirective@file:///D:/projects/svn/trunk/src/libs/angular.js:6363:28
collectDirectives@file:///D:/projects/svn/trunk/src/libs/angular.js:5801:1
compileNodes@file:///D:/projects/svn/trunk/src/libs/angular.js:5666:1
compileNodes@file:///D:/projects/svn/trunk/src/libs/angular.js:5682:1
compileNodes@file:///D:/projects/svn/trunk/src/libs/angular.js:5682:1
compile@file:///D:/projects/svn/trunk/src/libs/angular.js:5603:1
bootstrap/doBootstrap/</<@file:///D:/projects/svn/trunk/src/libs/angular.js:1343:11
$RootScopeProvider/this.$get</Scope.prototype.$eval@file:///D:/projects/svn/trunk/src/libs/angular.js:12077:9
$RootScopeProvider/this.$get</Scope.prototype.$apply@file:///D:/projects/svn/trunk/src/libs/angular.js:12175:11
bootstrap/doBootstrap/<@file:///D:/projects/svn/trunk/src/libs/angular.js:1341:9
invoke@file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
bootstrap/doBootstrap@file:///D:/projects/svn/trunk/src/libs/angular.js:1340:8
bootstrap@file:///D:/projects/svn/trunk/src/libs/angular.js:1353:5
angularInit@file:///D:/projects/svn/trunk/src/libs/angular.js:1301:37
@file:///D:/projects/svn/trunk/src/libs/angular.js:21050:5
jQuery.Callbacks/fire@file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:1037:1
jQuery.Callbacks/self.fireWith@file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:1148:7
.ready@file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:433:38
completed@file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:103:4
file:///D:/projects/svn/trunk/src/libs/angular.js
Line 9511
Edit:
Here are my HTML imports:
<head>
<title></title>
<!-- External libraries -->
<link rel="stylesheet" type="text/css" href="src/css/font-awesome-4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="src/css/headers.css">
<link rel="stylesheet" type="text/css" href="src/css/drawer.css">
<link rel="stylesheet" type="text/css" href="src/css/custom.css">
<script type="text/javascript" src="src/libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="src/libs/bootstrap.min.js"></script>
<script type="text/javascript" src="src/libs/angular.js"></script>
<script type="text/javascript" src="src/libs/angular-resource.js"></script>
<script type="text/javascript" src="src/libs/angular-ui-router.js"></script>
<script type="text/javascript" src="src/libs/angular-sanitize.min.js"></script>
<script type="text/javascript" src="src/libs/angular-pull-to-refresh.js"></script>
<script type="text/javascript" src="src/libs/nprogress.js"></script>
<script type="text/javascript" src="src/libs/ng-modal.js"></script>
<script type="text/javascript" src="src/libs/angular-route.min.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.core.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.utils.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.slider.js"></script>
<script type="text/javascript" src="src/js/app.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
</head>
解决方案
Config section is incorrect. Instead of
.config(['$routeProvider', '$locationProvider'], function($routeProvider, $locationProvider) { ... });
it should be
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { ... }]);
Note, that function definition belongs to array object.
Another mistake is in redirectTo property of the drawer route, currently it doesn't make sense. You want probably this instead:
.when('/drawer', {
templateUrl: 'src/includes/drawer.html',
controller: 'drawerCtrl'
})
这篇关于从移动NG-包括ngRoute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
