angular.jsの工場でhtml要素を作成する

-1

プリローダーまたは読み込みアニメーションの生成に役立つCSSがあります。私が欠いているのは、htmlコードだけです。私の考えは、プリローダーを生成するために必要なhtmlコードを作成することができるファクトリを作成することです。あなたは私に事例を教えてもらえますか？angular.jsの工場でhtml要素を作成する

ありがとうございます。

出典

2017-02-22 yavg

私はあなたが指示されたいと思います。 –

どうですか？なぜ？？？ – yavg

オンラインチュートリアル。ディレクティブは、再利用可能なhtmlのロジックをカプセル化します。 –

これは、効果的にコードをテンプレートにbootstrap <nav-bar>を吐き出す<menu-bar>コンポーネントを作成AngularJS 1.5のComponents を用いて達成することができます。

//-- app.module.js --// 
 
var app = angular.module('app', []); 
 

 
//-- app.menu-bar.component.js --// 
 
app.component('menuBar', { 
 
    bindings: { 
 
    brand: '@' 
 
    }, 
 
    templateUrl: '/partials/menuBar.html', 
 
    controller: function() { 
 
    this.menu = [{ 
 
     name: "Home", 
 
    }, { 
 
     name: "About", 
 
    }, { 
 
     name: "Contact", 
 
    }]; 
 
    } 
 
});

<!-- /partials/menuBar.html --> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">{{$ctrl.brand}}</a> 
 
    </div> 
 
    <div> 
 
     <ul class="nav navbar-nav"> 
 
     <li ng-repeat="menu in $ctrl.menu"> 
 
      <a href="#">{{menu.name}} 
 
     </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<!-- End of menuBar.html --> 
 

 
<!-- index.html --> 
 
<html en="us" ng-app='app'> 
 

 
<head> 
 
    <title> 
 
    NavBar with Angular 1.5.x components 
 
    </title> 
 
    <!-- bootsrap css--> 
 
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css"> 
 
    <!-- angularjs--> 
 
    <script src="lib/angular/angular.min.js"></script> 
 
    <!-- The main app script--> 
 
    <script src="js/app.module.js"></script> 
 
    <script src="js/components/app.navbar.component.js"></script> 
 
</head> 
 

 
<body> 
 
    <menu-bar brand='abc'></menu-bar> 
 
</body> 
 

 

 
</html>

出典

2017-02-22 03:24:48

angular.jsの工場でhtml要素を作成する

答えて

関連する問題