angularベースrouteで単一ページcnodejsを実現

15537 ワード
Angular ui-router
前言
以前はフロントエンドがどのようにルーティング機能を実現するかよく理解していませんでしたが、以前はhtml 5のpushStateを使ってurlを操作してルーティングを実現できる方法があることを知っていました.実践プロジェクトでも一度使ったことがありますが、pajaxと呼ばれています.ここにはdemoがあります.具体的にどのように使うかは私に教えてください.
cnodejs
githubはstarがもっと欲しくて、オープンソースの懐に入る時間が必要で、私によくcnodejsの上のapiを思い出させて、何かできるかどうかを考えて、それから最近の仕事と結びつけて、apiを通じてやっと1つのweb appを作ることを思い出して、その中の1つはとても良いことをして、VUEのcnodejs webappに基づいて、私に見ることができます.仕事の中で暇になってgithubで自分の履歴書を作りたいと思って、それから自分がクラスのwebappを作ることを思い出して、約束したら始めて、まずページを書いて、ページの上で使うテンセントのUIのコンポーネントを書いて、http://frozenui.github.io/ああ、ページができたらangularでapi実装機能を呼び出します.
機能モジュール
似たようなクライアントをすべて見て、モジュールが必要です.
  • 記事リスト
  • 記事詳細
  • ユーザ詳細
  • メッセージリスト
  • 登録
  • 点賛、評論
    • について
    これらのモジュールに基づいて、最初は独立して開発されたので、文章のリストと文章の詳細を作った後、自分がルートメカニズムを確立していないことに気づいて、nodeを使いたいと思って、それからangularでルートを作ることができるかどうかを考えて、グーグルを調べて、公式のドキュメントを見て、確かに実現することができて、ここで公式のケースを見ることができます
    route
    ここを見て、私はあなたに教えて、独学にとって最も重要なのはグーグルで、多くのものを歩いて学ぶことができて、ここでangular routeに対して理解する文章を何度も置きます.
  • AngularJSルーティング:ng-routeとui-router
  • ui-router-ルーティング制御
    • の学習
  • Single Page Apps with AngularJS Routing and Templating

    • はい、3番目の文章で書いたように、angularでルーティングを実現する単一ページを作りたいです.それからこれらの学習を通じて、1つの簡単な例を実現して、インタフェースの上で最適化をしていないで、主に機能の上で.スタンプオンライン実行例を見て、コードは以下の通りです.
    index.html 
    <html ng-app="cnodejsapp">
    <head>
        <title>Angular.js route     </title>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="./angular.min.js"></script>
        <script src="./angular-route.min.js"></script>
        <script src="./main.js"></script>
    </head>
    <body>
        <div>
            <!--    -->
            <header id="head" class="ui-header ui-header-positive ui-border-b">
                <h1>Angular route</h1>
            </header>
            <!--    -->
            <section class="ui-container">              
                <div class="ui-label-list">
                    <label class="ui-label"><a href="#/list">  </a></label>
                    <label class="ui-label"><a href="#/add">  </a></label>
                    <label class="ui-label"><a href="#/about">  </a></label>
                </div>
            </section>
            <!--      -->
            <section class="ui-container">
                <br /><br />            
                <div ng-view class="view-animate"></div>
            </section>
            <!--     -->
            <script type="text/ng-template" id="list.html">             
                <table width="100%" border="1" style="border-collapse:collapse;">
                    <thead>
                        <td>id</td>
 <td>  </td>
                        <td>  </td>
 <td>    </td>
                    </thead>
 <tr ng-repeat="message in messageList">
 <td>{{message.id}}</td>
                        <td><a href='#/content/{{message.id}}'>{{message.title}}</a></td>
                        <td>{{message.content}}</td>
 <td>{{message.date|date:YY-mm-dd}}</td>
                    </tr>
 </table>
            </script>
 <!--     -->
 <script type="text/ng-template" id="content.html">
                <a href="#/edit/{{message.id}}">  </a>
 <h1>{{message.title}}</h1>
                <span class="date">    ：{{message.date|date:YY-mm-dd}}</span>
 <div class="content">  ：{{message.content}}</div>
            </script>
 <!--     -->
 <script type="text/ng-template" id="add.html">
                <h1>    </h1>
   ：<input type="text" ng-model="title"><br>
   ：<textarea ng-model="content" cols="30" rows="10" style="vertical-align:top;"></textarea><br>
                <button ng-click="add()">  </button>
 </script>
            <!--     -->
            <script type="text/ng-template" id="edit.html">
                <h1>    {{message.id}}</h1>
   ：<input type="text" ng-model="message.title"><br>
   ：<textarea ng-model="message.content" cols="30" rows="10" style="vertical-align:top;"></textarea><br>
                <button ng-click="update()">  </button>
 </script>           
            <!--     -->
            <script type="text/ng-template" id="about.html">
                {{about}}
                <h1 ng-click="index()">     </h1>
 </script>
        </div>
 </body>
</html>

    main.js 
    var app=angular.module('cnodejsapp',['ngRoute']);
function routeConfig($routeProvider){
    $routeProvider
    .when('/list',{controller:'ListController',templateUrl:'list.html'})
    .when('/content/:id',{controller:'ContentController',templateUrl:'content.html'})
    .when('/add',{controller:'AddController',templateUrl:'add.html'})
    .when('/edit/:id',{controller:'EditController',templateUrl:'edit.html'})
    .when('/about',{controller:'AboutController',templateUrl:'about.html'})
    .otherwise({redirectTo:'/'});
};
app.config(routeConfig);

var messageList=[{
        id : 1,
        title : 'title1',
        content : 'content1',
        date : new Date()
    },{
        id : 2,
        title : 'title2',
        content : 'content2',
        date : new Date()
    },{
        id : 3,
        title : 'title3',
        content : 'content3',
        date : new Date()
    }];
app.controller('ListController',function($scope){
    $scope.messageList=messageList;
});
app.controller('ContentController',function($scope,$routeParams){
    $scope.message=messageList[$routeParams.id-1];
});
app.controller('AddController',function($scope,$location){
    $scope.title="";
    $scope.content="";
    $scope.add=function(){
        messageList.push({
            id:messageList.length+1,
            title:$scope.title,
            content:$scope.content,
            date:new Date()
        });
        $location.path('list');
    }
    
});
app.controller('EditController',function($scope,$routeParams,$location){
    $scope.message=messageList[$routeParams.id-1];
    $scope.update=function(){
        messageList[$routeParams.id-1]=$scope.message;
        $location.path('list');
    }
});
app.controller('AboutController',function($scope,$location){
    $scope.about="      Angular route  ，         ";
    $scope.index=function(){
        $location.path('list');
    }
});

    これができたのは3月19日の夜1時か2時で、翌朝眠れずに起き上がって残りのcnodejsの機能を実現し、ルーティング機能を完成させると見劣りします.コード上は2つのファイルindexです.htmlとindex.jsは、<script type="text/ng-template" id="index.html">をテンプレートとして使用し、単独でファイルを作成することもありません.他の実装は基本的にangularの基礎であり、具体的なコードはgithubに達することができる.https://github.com/junhey/Angular-Cnodejs見て、starを歓迎します.もしあなたがng-templateに迷ったら、ここでAngular Templateを説明します.
    Angularテンプレート<script>または$templateCacheによって追加されたテンプレートはメモリに存在し、テンプレートを要求するときにHTTPリクエストは開始されません.このようにすることに加えて、HTTPを介して個別のテンプレートファイルを直接要求することができる.
    テンプレート要求の順序付けの優先度は、次のとおりです.<script>方式>$templateCache>独立したテンプレートファイル
    angularの機能で直接ページを1つのページに置くことができますが、もちろん分けることもできますし、性能面を考慮して、分けて開くことをお勧めします.
    また、(templateCacheサービスでテンプレートを追加することもできます.コードは以下の通りです:``js var myApp=angular.module('myApp',[]);myApp.run(function(\)templateCache) { $templateCache.put('templateId.html', 'This is the content of the template'); }); 
    
     HTML     ng-include     ：
          Javascript   :

    $templateCache.get('templateId.html')`$templateCacheサービスputメソッドは、テンプレートの内容をメモリに書き込む役割を果たします.$templateCacheはcacheFactoryに基づいており、インタフェースは一致しており、$templateCache=$cacheFactory('template');
    具体的にどのように使うか、2編の博文を参考にしてください.
  • angularテンプレートロード------ng-template
  • Angular Template Loading

    • 見通し
    githubで:https://github.com/junhey/Angular-Cnodejsページ分けの実装、QRコードのログインなど、angularコマンドを使用してページ分けを行う機能がたくさんあります.ここには2つの参考博文が残っています.
  • カスタムAngularJSコマンドを作成します.第1部、基礎知識
  • angular学習ノート(30)-命令(3)-templateUrl
    • オンライン運転
    Angular.に基づくjsはcnodejsを書き換える.orgコミュニティのwebappへようこそアドバイス
    ディクショナリシーケンスアルゴリズム
    [HTML 5]labelタグの使用と推奨