Question

很难掌握AngularJs ..你会如何在AngularJS中构建像这个简单的文本域和动画？我一直在研究使用指令，但这并不是我的意思。我一直试图从我在网上学到的东西中找到这个但是没有太多运气

HTML：

<div class="materialContainer">

  <div class="title">LOGIN</div>

  <div class="input">
     <label for="name">Username</label>
     <input type="text" name="name" id="name">
     <span class="spin"></span>
  </div>

  <div class="input">
     <label for="pass">Password</label>
     <input type="password" name="pass" id="pass">
     <span class="spin"></span>
  </div>

  <div class="button login">
     <button><span>GO</span> <i class="fa fa-check"></i></button>
  </div>

  <a href="" class="pass-forgot">Forgot your password?</a>

  <div class="title">REGISTER</div>

  <div class="input">
     <label for="regname">Username</label>
     <input type="text" name="regname" id="regname">
     <span class="spin"></span>
  </div>

  <div class="input">
     <label for="regpass">Password</label>
     <input type="password" name="regpass" id="regpass">
     <span class="spin"></span>
  </div>

  <div class="input">
     <label for="reregpass">Repeat Password</label>
     <input type="password" name="reregpass" id="reregpass">
     <span class="spin"></span>
  </div>

  <div class="button">
     <button><span>NEXT</span></button>
  </div>

只需使用codepen链接（http://codepen.io/yusufbkr/pen/RPBQqg），stackoverflow就不会让我输入剩下的代码......

谢谢！任何帮助都会令人难以置信

Answer 1

我只是在学习Angular。据我所知，您正在考虑更换DOM交互部分的指令。我怀疑你也需要ui-router来处理小部件结果（我听说它是行业标准，而不是内置的ngRouter）。

我部分写出来以确保我理解它，所以我希望其他更有知识的人会来找你回答任何有关它的问题（或指出我在哪里误会了什么。）

因此，您可以将网页带入Angular世界，例如，将<html></html>标记转换为<html ng-app="yourApp"></html>。每个视图上相同的不变的html都在index.html文件中。把盒子的html放在另一个html文件中，比如box.html。在您要显示框的地方的index.html文件中，添加<div ui-view></div>。 ui-view连接到ui-router。在关闭body标签之前，在index.html的底部，放入
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app/app.js"></script>。

在app.js中，你输入类似的东西，

    angular.module('yourApp', [
     'yourApp.box',
     'ui.router'
    ])
    .config(function($stateProvider, $urlRouterProvider, $httpProvider) {
      $urlRouterProvider
        .otherwise('/signin/child');

      $stateProvider
        .state('box', {
          url: '/signin',
          templateUrl: 'app/box/box.html',
          controller: 'BoxController'
        })
        .state('box.child', {
          url: '/child',
          template: '<span>{{ definedProperty }}</span>'
        });
      })
    });

从顶部开始，命名为angular，调用其模块函数，并为其指定参数（'theNameYouChose'，['dependencies'，'required']）

在配置位中，您告诉它有关依赖项配置的需求。 $ stateProvider和$ urlRouterProvider是ui-router的东西，而且我认为$ httpProvider是一个仍然必要的有角度的东西。

在urlRouterProvider中，您提供了网站所使用的默认地址：在这种情况下，它恰好是模板中的模板，来自登录状态的/ signin，以及来自登录到signin的详细信息的/ child p>

在各州，您要为将成为应用程序一部分的网址提供名称和属性：例如，如果有人转到index.html / signin，则会召唤“登录”状态。

模板中的模板可能就是您如何获得所需的盒子可变性。在box.html中，您将拥有另一个<div ui-view></div>，这就是'signin.child'中描述的各种内容被放入的地方。

box.html也是你放置专门创建的html标签的地方，你将使用该指令制作的标签。我将通过以下内容进行讨论。

父模板'signin'谈论BoxController。假设你在box.js中构建了它。它看起来像这样：

    angular.module('yourApp.box', [])

    .controller('BoxController', function ($scope) {
      $scope.definedProperty = 'reRegPass',
      $scope.arrayOfObjects = [{prop: 'red'},{prop: 'blue'}]
    })

    .directive('specificBox', function(){
      return {
        restrict: 'EA',
        templateUrl: 'app/box/box-guts.html',
        replace: true,
        scope: {
          source: '='
        },
        link: function(scope, element, attribute) {
          element.on('click', function() {
            alert('Functionality in specificBox is working');
          }
        }
      }
    });

第一行再次召唤角度模块，然后命名它：注意我们已经将这个'yourApp.box'列为app.js中的一个要求。然后我们有了控制器命名功能，以及$ scope范围内特定属性的外观。

该指令正在使用指令可以采用的两种形式中更有用的指令。它们可以返回函数（带有.link中的签名），也可以返回描述新HTML实体的对象。这个名为specificBox，Angular将其转换为<specific-box></specific-box>。由于restrict属性，此对象（技术上称为'指令定义对象'）可以转换为HTML标记...'E'用于元素。 'A'代表属性。我不知道可以作为一个元素的东西也可以是一个属性，但是这两个选项都有效，所以我会继续使用它。（也许对于你的各种登录框，你想要一个只有'A'的指令来制作新类型的属性。）

您将这些经过特制的标签放入box.html，而box-guts.html中的所有内容都将介于这些标签之间......事实上，由于替换所以替换这些标签：true。

.link属性是你放置一个能对该元素做一些有趣事情的函数的地方;如果点击则将其变为红色，无论如何。我有一个警报示例。使用jQuery Lite进行事件。

.scope属性很奇怪。我相信，如果不使用，特定盒子的东西将具有与盒子相同的控制器（即BoxController），具有盒子的范围和依赖性。但在这里，我们正在制作一个孤立的范围。 box-guts不依赖于任何东西或者可以访问之前构建的任何内容。它将如何获得有趣的可变数据呢？范围对象中的每个属性都成为特定框的属性。

'='表示您将从某处传递对象，并且它们将具有双向数据绑定（在box-guts中进行的更改将反映在应用程序的对象集合中）。其他选项是'@'，单向数据绑定，这意味着你正在传递一个字符串或者其他东西，如果它在DOM中发生了变化，你就不必反思你的应用了;或'＆amp;'从应用程序中的其他位置的控制器为其提供功能。

所以最终，在box.html中，你会有像

这样的东西

    <div class="box-holder">

      <div ui-view></div>

      <specific-box source="thing" ng-repeat="thing in arrayOfObjects"></specific-box>

    </div>

就像我上面所说，提出问题，也许我们可以解决这个问题。

我如何在AngularJS中创建类似的东西

1 个答案: