如何正确设置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文件

回答

相关问题