如何正确设置AngularJS文件

How to properly setup AngularJS files

本文关键字：文件 AngularJS 设置 何正确      更新时间：2023-09-26

我熟悉设置angularjs项目的标准方法，我正在尝试做的是根据页面为不同的控制器和指令设置单独的文件。有关更好的解释，请参见下文。

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

这是我的应用程序.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();
    }
  });
})

这是我的登录指令.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');
}
})();

这是我的索引.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>

最后但并非最不重要的登录页面.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/logos@2x.png" 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>

我做了什么错误，导致我的登录页面.html不显示？

我可能是错的，因为我是 AngularJS 的新手，但如果我是你，我首先会尝试改变：

templateUrl : 'loginPage.html'

到：

templateUrl : 'login/loginPage.html'

我得出了这样的结论，因为您在index.html中包含loginPage.js文件，因此它会尝试在www目录中查找loginPage.html或在调用它的目录中。我今天遇到了像你这样的案例，但有图像。

您的状态定义有问题：

$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'
 });

尝试将<div login-directive></div>移动到离子视图中。

还要检查控制台以查看是否实际输出console.log('RETURN = %s', 'test');。至少你会知道状态是否处于活动状态。

就像@georgeawg说的，使用指令作为模板使这过于复杂。你为什么在这个例子中这样做是我无法理解的。此外，您的$state配置应位于您的 app.js 文件中。

相关文章：