使用bower+angular+express创建webapp（一）一个简单的demo
发布时间：2020-12-17 10:03:44 所属栏目：安全 来源：网络整理
导读：今天上午，尝试实现了angular webapp的环境搭建。 1.创建express应用框架 express -e angular -demo 2.配置angular开发环境 （1）修改app.js配置 1.使用 //让ejs能够识别html后缀 app.engine( '.html' , require ( 'ejs' ).__express); //设置之后只需写文件
|
今天上午，尝试实现了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目录创建
删除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。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |