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

今天上午，尝试实现了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目录一会创建。）

@H_301_111@（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>

(5) 以上四处修改的解析

首先在index.html文件的body上使用ng-app，设置模块的作用域为body，取名为app。

然后应用app.js作为angular的全局配置文件。在其中使用angular.module方法，创建一个angularjs模块；并添加了该模块所依赖的模块集合：ngRoute；最后对该模块进行了配置。

引用controllers.js作为angular的全局控制器，定义了WelcomeCtrl控制器对应的方法。

在app.js的模块配置中，将welcome.html模版配合controller.js的控制器，输出到index.html的ng-view中。

4.运行

实现。一个简单的angulaerjs的demo。

原文链接：https://www.f2er.com/angularjs/149189.html