基于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');

具体怎么用，参考一下两篇博文

展望

经过在github:https://github.com/junhey/Angular-Cnodejs看到的，其实还有不少功能待完善，好比说分页的实现，经过二维码登陆等等，后面采用angular指令来作分页，这里留下两篇参考博文：

在线运行

基于Angular.js重写cnodejs.org社区的webapp 欢迎提建议