requirejs与anjularjs框架

傷城~ 2023-06-12 08:35 27阅读 0赞

1.目录

![475687-20151224141053218-503412502.png][]

2.首页login.html如下：

<!DOCTYPE html>  
<html>  
<head>  
<title>登录界面</title>  
<link rel='stylesheet' href='/stylesheets/style.css' />  
<link rel="stylesheet" href="/css/bootstrap.min.css">  
</head>  
<body>  
<div class="container" ng-controller="login-controller">  
<form class="col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post" name="myForm" novalidate>  
<fieldset>  
<legend>用户登录</legend>  
<div class="form-group">  
<label class="col-sm-3 control-label" for="username">用户名</label>  
<div class="col-sm-9">  
<input type="text" class="form-control" id="username" name="username" ng-model="username" placeholder="用户名111" required/>  
</div>  
</div>  
<div class="form-group">  
<label class="col-sm-3 control-label" for="password">密码</label>  
<div class="col-sm-9">  
<input type="password" class="form-control" id="password" name="password" ng-model="password" placeholder="密码" required/>  
</div>  
</div>  
<div class="form-group">  
<div class="col-sm-offset-3 col-sm-9">  
<button ng-disabled="myForm.$invalid" ng-click="login()" type="button" class="btn btn-primary">登录</button>  
</div>  
</div>  
</fieldset>  
</form>  
</div>  
<script type='text/javascript' src='/lib/jquery.min.js'></script>  
<script type='text/javascript' src='/lib/bootstrap.min.js'></script>  
<script type='text/javascript' src='/lib/require.js' data-main='/bootstrap/main.js'></script>  
</body>  
</html>

首先需要引入requirejs，指明入口函数（data-main中设定），平时我们自动加载会在html元素上用（ng-app），这里我们采用手动加载的方式。

index.html

<!DOCTYPE html>  
<html>  
<head>  
<title>index</title>  
<link rel='stylesheet' href='/stylesheets/style.css' />  
<link rel="stylesheet" href="/css/bootstrap.min.css">  
</head>  
<body>  
<div>index 页面！</div>  
<script type='text/javascript' src='/lib/jquery.min.js'></script>  
<script type='text/javascript' src='/lib/bootstrap.min.js'></script>  
<script type='text/javascript' src='/lib/require.js' data-main='/bootstrap/main.js'></script>  
</body>  
</html>

3.main.js（主要配置下所需的js文件）

require.config(\{  
paths: \{  
'angular': '../angular/angular',  
'angular-cookies': '../angular/angular-cookies',  
'angular-route': '../angular/angular-route'  
\} ,  
shim: \{  
'angular': \{  
exports: 'angular'  
\},  
'angular-cookies': \{  
deps: \['angular'\]  
\},  
'angular-route': \{  
deps: \['angular'\]  
\}  
\},  
deps:\['bootstrap'\]  
\});

这里主要是需要requirejs异步载入，而deps:\['bootstrap'\]主要是让我先加载这个文件。

4.配置手动加载的文件bootstrap.js

require(\['angular', 'angular-cookies','angular-route','../modules/login-module','../controllers/login-controller'\], function (angular) \{  
'use strict';  
//手动启动  
angular.bootstrap(document, \['login-module'\]);  
\});

5.login-module(主要是路由的设置)

define(\['angular'\], function (ng) \{  
'use strict';

var app = ng.module('login-module', \['ngCookies'\]);

return app;  
\});

6.login-controller（控制器）

define(\['../modules/login-module'\], function(app) \{  
'use strict';  
  
app.controller('login-controller',\['$scope',function($scope)\{  
  
$scope.login=function()\{  
if($scope.username!=""&&$scope.password!="")\{  
location.href="/";  
\}  
\}  
  
\}\])  
\});

7.app.js

8.路由

var express = require('express'); var router = express.Router(); /* GET users listing. */ router.get('/', function(req, res, next) { res.render('login',{title:"用户登录"}); }) module.exports = router;

index.js

var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); module.exports = router;

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[475687-20151224141053218-503412502.png]: /images/20230531/fc2746a198884bd585af5d5cc30aa32d.png