我正在尝试以 Angular 加载我的第一个 View 。但我以模块化的方式做了一个项目来学习良好的编码风格。
我将展示如何创建一个目录来创建模块
或者在此处查看完整图像...
我把这个写在我的index.html页面上
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/foundation.css" />
<script src="lib/angular.js" type="text/javascript"></script>
<script src="lib/angular-ui-router.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body >
<div ng-app="firstApp">
<div ui-view="app"></div>
</div>
</body>
</html>
在app.js中
var app= angular.module('firstApp',['ui.router']);
在 Controller firstcontroller.js文件中我写了这个
(function() {
'use strict';
angular
.module('firstApp')
.controller('firstcont', firstcont);
firstcont.$inject = ['$scope'];
function firstcont($scope) {
$scope.clickEvent=function(){
alert('---')
}
}
})();
在router.js文件上我写了这个
(function() {
'use strict';
angular.module('firstApp.firstdir').config(Routes);
Routes.$inject = ['$stateProvider', '$urlRouterProvider'];
function Routes($stateProvider, $urlRouterProvider) {
// Default
$urlRouterProvider.otherwise('/app');
// Application
$stateProvider
.state('app', {
url: '/app',
views:{
app: { templateUrl: 'firstdir/templates/firstpage.html' }
},
controller:"firstcont"
});
}
})();
在module.js文件中我写了这个
(function() {
'use strict',
angular.module('firstApp.firstdir', [
'ui.router',
]);
})();
在 template.html 上我写了这个
<div ng-controller="firstcont">
<h1>First page</h1>
<button ng-click="clickEvent()"> go to second page</button>
</div>
我不知道为什么它不显示第一个 View 。实际上，我无法制作plunker，因为没有办法制作目录？
angular.js:78 Uncaught Error: [$injector:modulerr] Failed to instantiate module firstApp due to:
Error: [$injector:modulerr] Failed to instantiate module firstApp.firstdir due to:
Error: [$injector:nomod] Module 'firstApp.firstdir' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.21/$injector/nomod?p0=firstApp.firstdir
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:78:12
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1668:17
at ensure (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1592:38)
at module (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1666:14)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3852:22
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3853:40
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=firstApp.firstdir&…%3A%2FUsers%2Fnksharma%2FDesktop%2FAngularjs%2Flib%2Fangular.js%3A3846%3A5)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:78:12
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3880:15
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3853:40
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
at createInjector (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3786:11)
at doBootstrap (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1435:20)
at bootstrap (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1450:12)
http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=firstApp&p1=Error%…3A%2FUsers%2Fnksharma%2FDesktop%2FAngularjs%2Flib%2Fangular.js%3A1450%3A12)
最佳答案
首先包含 js 文件(模块声明始终先出现，然后是子模块)
<!-- The order here is very important -->
<script src="js/module.js" type="text/javascript"></script>
<script src="js/router.js" type="text/javascript"></script>
<script src="js/firstcontroller.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
将您的“firstcont”声明为firstApp.firstDir Controller :
var firstDir = angular.module('firstApp.firstdir');
...
firstDir.controller('firstcont', firstcont);
将你的子模块作为你的firstApp模块的依赖:
//Remember firstApp.firstdir must be already declared :)
var app= angular.module('firstApp',['firstApp.firstdir', 'ui.router']);
更新: 这是代码示例 http://goo.gl/xxvIvB (在预览中单击运行)
关于javascript - 如何导入模块并以 Angular 显示在 View 上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27940472/