如何正確設置AngularJS文件

我熟悉設置angularjs項目的標準方式，我正在嘗試爲不同的控制器和基於頁面的指令設置單獨的文件。請參閱下面的更好的解釋。如何正確設置AngularJS文件

www/
    app.js 
    index.html 
    login/
     loginDirective.js 
     loginPage.html

這是我apps.js文件

// Ionic Starter App 

// angular.module is a global place for creating, registering and retrieving Angular modules 
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) 
// the 2nd parameter is an array of 'requires' 

(function() { 
    'use strict'; 
    angular.module('app', ['ionic']); 

})(); 


var app=angular.module('app'); 

app.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
     // for form inputs) 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

     // Don't remove this line unless you know what you are doing. It stops the viewport 
     // from snapping when text inputs are focused. Ionic handles this internally for 
     // a much nicer keyboard experience. 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
})

這是我loginDirective.js

(function() { 
    'use strict'; 

    var app=angular.module('app'); 

app.config(function($stateProvider) { 

$stateProvider 

.state('login', { 
    url: '/login', 
    template: '<loginDirective></loginDirective>' 
}) 
}) 
    app.directive('loginDirective', loginDirective); 

function loginDirective() { 
    var directive = { 
     restrict : 'EA', 
     templateUrl : 'loginPage.html', 
     controller : loginController, 
     controllerAs : 'lg', 
     bindToController : true 
}; 

return directive; 

} 

function loginController() { 
var lg = this; 
lg.test = 'this is a test'; 

console.log('RETURN = %s', 'test'); 

} 

})();

這是我的index.html

<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    <script src="login/loginDirective.js"></script> 
    </head> 
    <body ng-app="app" animation="slide-left-right-ios7"> 
<div> 
    <div> 
      <ion-nav-bar class="bar-dark"> 
     <ion-nav-title>Sample APP</ion-nav-title> 
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button> 
     </ion-nav-bar> 
<ion-nav-view ></ion-nav-view> 
</div>s 
</div> 
    </body></html>

最後但並非最至少loginPage.html

<html> 
<head> 
</head> 
<body> 
<div login-directive></div> 
<ion-view view-title="Login" name="login-view" class="scroll-bg" hide-nav-bar="true"> 
    <ion-content class="padding"> 
    <div align="center" class="imagecontent"> 
    <div style="text-align: center"> 
    <img ng-src="img/[email protected]" width="250px"> 
    </div> 
    </div> 
     <div class="list list-inset"> 
      <label class="item item-input"> 
       <input type="text" placeholder="Username" style="color: #ffffff" ng-model="data.username"> 
      </label> 
      <label class="item item-input"> 
       <input type="password" placeholder="Password" style="color: #ffffff" ng-model="data.password"> 
      </label> 
     </div > 
     <div class="" > 
     <div class=""> 
     <button class=" button button-block button-dark" ng-click="login(data)">LOG IN</button> 
     </div> 
     </div> 

    </ion-content> 
    <div style="position: absolute; bottom: 10%; width: 100%"> 
     <div style="text-align: center"> 
     <img ng-src="img/FNC_Logo.png" width="150px"> 
     </div> 
     </div> 
    <ion-footer-bar align-title="right" class="footer-bg"> 
     <div class="col text-right" ng-click="doSomething()"> 
    <button class="button footerbtn-bg" ></button> 
    </div> 
</ion-footer-bar> 
</ion-view> 
</body> 
</html>

我做得不對，導致我的loginPage.html不能顯示出來？

來源

2016-03-17 Dwill

我可能是錯的，因爲我用AngularJS個新手，但如果我是你，我首先會努力改變：

templateUrl : 'loginPage.html'

到：

templateUrl : 'login/loginPage.html'

我來到了這樣的結論，因爲您在index.html中包含了loginPage.js文件，因此它會嘗試在www目錄或其調用的目錄中查找loginPage.html。我今天遇到類似你的情況，但有圖像。

來源

2016-03-17 23:41:24 ShiiRochi

由於它們位於同一文件夾中，因此無需登錄。謝謝 – Dwill

幽州定義有問題：

$stateProvider 

.state('login', { 
    url: '/login', 
    //This should be kebab-case 
    template: '<login-directive></login-directive>' 
    //NOT camelCase 
    //template: '<loginDirective></loginDirective>' 
}) 
})

但我不知道爲什麼你使用的指令爲狀態時，你可以用一個控制器定義狀態：

.state('login', { 
    url: '/login', 
    templateUrl : 'loginPage.html', 
    controller : loginController, 
    controllerAs : 'lg' 
});

來源

2016-03-17 23:55:22 georgeawg

嘗試移動<div login-directive></div>進入離子視圖。

另外檢查控制檯，看看是否實際輸出console.log('RETURN = %s', 'test');。至少你會知道這個狀態是否有效。

就像@georgeawg說的那樣，通過使用僞指令作爲模板來簡化這個過程。爲什麼你在這個例子中做到了這一點，超越了我。另外，你的$ state配置應該在你的app.js文件中。

來源

2016-03-18 08:59:44 Ladmerc

如何正確設置AngularJS文件

回答

相關問題