[英]Calling all controllers from a single angularjs file
我是 Angularjs 和 Ionic 的新手,我已經嘗試了本論壇和其他地方提供的所有解決方案。 我似乎不能有任何工作。
我想開發一個主頁設計為一組卡片(照片)的應用程序。 當點擊卡片時,我們被定向到另一個頁面。 我閱讀了 ng-view,並嘗試了幾個教程,但沒有一個對我有用。
下面是一個例子:
索引.html
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta charset="utf-8">
<script src="js/app.js"></script>
<script src="js/plugins/angular.js"></script>
<script src="js/plugins/angular-route.js"></script>
<title>AngularJS Routing example</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li><a href="#AddNewOrder"> Add New Order </a></li>
<li><a href="#ShowOrders"> Show Order </a></li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
應用程序.js
//Define an angular module for our app
angular.module('sampleApp', ['ionic', 'ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}])
.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
})
.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
和
add_order.html
<h2>Add New Order</h2>
{{ message }}
我得到的錯誤是這樣的:
> > ReferenceError: angular is not defined app.js:2:5 Error: [$injector:modulerr] Failed to instantiate module sampleApp due to:
> [$injector:nomod] Module 'sampleApp' 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.9/$injector/nomod?p0=sampleApp
> minErr/<@http://localhost:8100/js/plugins/angular.js:78:12
> module/<@http://localhost:8100/js/plugins/angular.js:1529:1
> ensure@http://localhost:8100/js/plugins/angular.js:1454:38
> module@http://localhost:8100/js/plugins/angular.js:1527:1
> loadModules/<@http://localhost:8100/js/plugins/angular.js:3622:22
> forEach@http://localhost:8100/js/plugins/angular.js:303:7
> loadModules@http://localhost:8100/js/plugins/angular.js:3616:5
> createInjector@http://localhost:8100/js/plugins/angular.js:3556:11
> bootstrap/doBootstrap@http://localhost:8100/js/plugins/angular.js:1299:20
> bootstrap@http://localhost:8100/js/plugins/angular.js:1314:1
> angularInit@http://localhost:8100/js/plugins/angular.js:1263:5
> @http://localhost:8100/js/plugins/angular.js:20555:5
> trigger@http://localhost:8100/js/plugins/angular.js:2342:7
> createEventHandler/eventHandler/<@http://localhost:8100/js/plugins/angular.js:2613:7
> forEach@http://localhost:8100/js/plugins/angular.js:310:11
> createEventHandler/eventHandler@http://localhost:8100/js/plugins/angular.js:2612:5
編輯
我從 app.js 中的模塊依賴項中刪除了“離子”。 現在第一個鏈接“添加訂單”有效,但第二個鏈接“顯示訂單”無效。
我認為您應該更改庫的順序:
<head>
<meta charset="utf-8">
<script src="js/plugins/angular.js"></script>
<script src="js/plugins/angular-route.js"></script>
<script src="js/app.js"></script>
<title>AngularJS Routing example</title>
</head>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.