requirejs与anjularjs框架
1.目錄
?
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
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser');var routes = require('./routes/index'); var login = require('./routes/login');var app = express();// view engine setup app.set('views', path.join(__dirname, 'views')); //app.set('view engine', 'ejs'); app.engine('html', require('ejs').renderFile); app.set('view engine', 'html'); //app.set('view engine', 'html');// uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public')));app.use('/', routes); app.use('/login', login);// catch 404 and forward to error handler app.use(function(req, res, next) {var err = new Error('Not Found');err.status = 404;next(err); });// error handlers// development error handler // will print stacktrace if (app.get('env') === 'development') {app.use(function(err, req, res, next) {res.status(err.status || 500);res.render('error', {message: err.message,error: err});}); }// production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) {res.status(err.status || 500);res.render('error', {message: err.message,error: {}}); });module.exports = app;8.路由
login.js
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
總結
以上是生活随笔為你收集整理的requirejs与anjularjs框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： angularjs 利用filter进行
- 下一篇： 图片循环播放