使用bower+angular+express创建webapp（一）一个简单的demo

最新推荐文章于 2019-12-16 14:00:03 发布

小章鱼哥

最新推荐文章于 2019-12-16 14:00:03 发布

阅读量1.7k

点赞数

分类专栏： javascript node.js angular.js 文章标签： angular express web app 框架

本文链接：https://blog.csdn.net/u014787301/article/details/51917404

版权

javascript 同时被 3 个专栏收录

107 篇文章 0 订阅

订阅专栏

node.js

8 篇文章 0 订阅

订阅专栏

angular.js

4 篇文章 0 订阅

订阅专栏

今天上午，尝试实现了angular webapp的环境搭建。

1.创建express应用框架

express -e angular-demo

2.配置angular开发环境

（1）修改app.js配置

1.使用

//让ejs能够识别html后缀
app.engine('.html', require('ejs').__express);
//设置之后只需写文件名即可识别为html文件
app.set('view engine', 'html');

代替

app.set('view engine', 'ejs');

主要目的是为了让ejs引擎识别html模版，并忽略模版后缀名时，自动解析成.html后缀。

2.使用

// angular启动页
//设置angular: 启动路径为”/”
//设置angular: 启动文件为app/index.html
app.get('/', function (req, res) {
    res.sendfile('app/index.html');
});

来代替

app.use('/', routes);
app.use('/users', users);

我们的意图是把两个路由忽略，把路由直接指向app目录下的index.html文件。（现在我们还没创建app目录，一会创建。）

3.修改

//配置资源路径
app.use(express.static(path.join(__dirname, 'public')));

为

//配置资源路径
app.use(express.static(path.join(__dirname, 'app')));

原本我们的资源路径默认在public路径下，现在我们指向app目录。（如刚才所说，app目录一会创建。）

（2）创建app目录

创建

app目录
- scripts目录（js脚本目录）
  - angular目录（js 的angular脚本目录）
    - app.js（angular全局项目配置文件目录）
    - controller.js（angular全局控制文件目录）
- styles目录（样式目录）
  - main.css
- views目录
  - component目录（html的自定义组件目录）
  - tpl 目录（存放html的目录）
    - welcome.html （欢迎页）
- index.html（入口文件）

删除public目录和views目录。替代项都已经写在app目录里了。

（3）配置bower

首先全局安装bower

npm install bower -g

创建bower的json配置文件

bower init

填写问配置文件信息后，添加依赖项：

 "dependencies": {
      "angular": "~1.2.12-build.2226",
      "angular-route": "~1.2.12-build.2226"
}

bower install

下载所有angular依赖项。

3. 编写简单的angualer项目

(1) app/index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>Angular-basic</title>
    <link rel="stylesheet" href="/styles/main.css">
</head>
<body ng-app="app">

<ul>
    <li>hello  angular</li>
</ul>

<div ng-view></div>

<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/scripts/angular/app.js"></script>
<script src="/scripts/angular/controllers.js"></script>

</body>
</html>

(2) app/scripts/app.js

'use strict';

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {templateUrl: '/views/tpl/welcome.html', controller: 'WelcomeCtrl'})
        .otherwise({redirectTo: '/'});
    $locationProvider.html5Mode(true);
}]);

(3) app/scripts/controllers.js

'use strict';

function WelcomeCtrl($scope){
    $scope.username = 'Conan_Z';
}

(4) app/views/tpl/welcome.html

<hr/>
<form class="form-inline" role="form">
    <div class="form-group">
        <label>Welcome</label>
        <input type="text" class="form-control" ng-model="username" placeholder="Enter email">
    </div>
</form>
<p> {{ username }}</p>