今天上午，尝试实现了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目录
删除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。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
