基於angular的route實現單頁面cnodejs

時間 2019-11-12

標籤基於 angular route 實現頁面 cnodejs 欄目 AngularJS 简体版

原文原文鏈接

Angular ui-router

前言

以前不太理解前端怎麼實現路由功能，之前知道有一種方式使用html5的pushState能夠操做url才實現路由的功能，在實踐項目中也用過一次，後來這種操做叫成了pajax，這裏有一個demo，具體怎麼用能夠點我html

cnodejs

github想要star更多，須要時間投入開源的懷抱，讓我想起了常常在cnodejs上的api，想一想是否是能夠作點什麼，而後結合最近的工做，想起了經過api才作一個web app ，其中有一個作的很不錯的，基於VUE的cnodejs webapp，能夠點我看。
工做中閒下來了也想在github上打造本身的簡歷，而後就想起來了本身作一個類是的webapp，說好了就開始，先寫好頁面，頁面上用的騰訊的一個UI組件，http://frozenui.github.io/，頁面搭好了以後就開始用angular調用api實現功能。前端

功能模塊

大概看了全部的相似客戶端，須要一下模塊：html5

文章列表node
文章詳情git
用戶詳情angularjs
消息列表github
登陸web
點贊、評論ajax
關於api

基於這些模塊，剛開始是獨立開發的，作好了文章列表和文章詳情以後，發現本身沒有創建路由機制，剛開始想用node，而後想一想是否能夠用angular作路由，就開始查谷歌，看了官方文檔，確實能夠實現，這裏能夠看官方的案例

route

看到這裏了，我想告訴你，自學來講最重要的就是谷歌，不少東西走能夠學到，這裏放幾遍對於angular route理解的文章。

對，就如第三篇文章寫的，我想作一個單頁面，經過angular實現路由。
而後經過這些學習，實現了一個簡單的例子，界面上沒有作優化，主要是功能上。戳我看在線運行實例，代碼以下

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日晚上一兩點了，次日早上睡不着就爬起來了把剩下的cnodejs的功能實現，而後把路由功能作好就差很少能夠看了。
代碼上也就是兩個文件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的功能能夠直接把頁面放在一個頁面上，固然也能夠分開，考慮到性能方面，建議分開放。

其中還能夠經過$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');

具體怎麼用，參考一下兩篇博文