Angularjs + Requirejs 单页面WEB引用实例

最新推荐文章于 2022-09-01 17:02:16 发布

好多米阳光

最新推荐文章于 2022-09-01 17:02:16 发布

阅读量1.3k

点赞数 1

分类专栏： AnjularJS BrowserStorage Require JQuery Angularjs 文章标签：单页面 angularjs require

本文链接：https://blog.csdn.net/u013216976/article/details/51829466

版权

AnjularJS 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

Angularjs

24 篇文章 2 订阅

订阅专栏

JQuery

4 篇文章 0 订阅

订阅专栏

目前互联网上很流行单页面WEB应用程序，前后端分离啊什么的，于是小试牛刀了一番，用Angularjs + Requirejs搭建一个应

用框架，我比较喜欢使用Angularjs的数据绑定功能，

自定义指令什么的，毕竟现在前后端分离，前端有很多事情要做的。

本章介绍单页面路由的配置以及Angularjs常用Service封装。

一、主函数(我取名main)

require.config({

baseUrl: './',

paths: {

  'app' : 'assets/angular/app',

'angular': 'assets/angular/angular.min',

'config-routes': 'assets/angular/config',

'angular-ui-router': 'assets/angular-ui-router/angular-ui-router.min',

'angular-async-loader': 'assets/angular-async-loader/angular-async-loader.min',

'jquery' : 'assets/jquery/jquery-2.1.1',

'layer' : 'assets/layer/layer',

'bootstrap' : 'assets/bootstrap/bootstrap-js',

'css' : 'assets/requirejs/require-css'

},

shim: {

    'layer' : ['jquery'],

    'angular-routes' : ['angular'],

'bootstrap' : ['jquery'],

'angular': {exports: 'angular'},

'angular-ui-router': {deps: ['angular']}



}

});

require(['angular', 'app','config-routes','bootstrap'], function (angular) {

angular.element(document).ready(function () {

angular.bootstrap(document, ['app']);

angular.element(document).find('html').addClass('ng-app');

});

});

二、主页面（index）

<!DOCTYPE html>

<html>

<head>



<meta charset="utf-8">

<title></title>

</head>

<body>

<nav>

<ul>

<li><a ui-sref="home">HOME</a></li>

<li><a ui-sref="about">ABOUT</a></li>

</ul>

</nav>

<div ui-view></div>

<script src="assets/requirejs/require.js" data-main="main.js"></script>

</body>

</html>

三、路由配置以及Get Post请求封装（config）

define(function (require) {
var app = require('./app');
app.run(['$state', '$stateParams', '$rootScope', function ($state, $stateParams, $rootScope) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]);

//配置常量
app.constant("http", "");
app.constant("errorMessage", "服务器异常,请稍后重试!")

//配置路由
app.config(['$stateProvider', '$urlRouterProvider','$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {

//去掉URL的#
//$locationProvider.html5Mode(true);
//默认的首页
$urlRouterProvider.otherwise('/home');

//禁用ajax请求缓存
if(!$httpProvider.defaults.headers.get){
$httpProvider.defaults.headers.get = {};
}
//配置http发送模式
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$httpProvider.defaults.headers.post["Content-Type"] = "application/json";
$httpProvider.defaults.transformRequest = function(data){
//当参数不为空的时候
if(data){
return JSON.stringify(data);
}
}
//页面跳转
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'page/home/home.html',
controllerUrl: 'controller/home',
controller: 'home'
})
.state('about', {
url: '/about',
templateUrl: 'page/about/about.html',
controllerUrl: 'controller/about',
controller: 'about'
})
}]);

//Service

app.service("httpService",function($http, http, errorMessage){
//带错误参数的POST请求
this.post = function(URL, params, success, error){
$http.post(http + URL, params).success(function(resp){
result(resp, success, error);
}).error(function(resp){
layer.msg(errorMessage);
})
}

//带错误参数的GET请求

this.get = function(URL, success, error){
$http.get(http + URL).success(function(resp){
result(resp, success, error);
}).error(function(resp){
layer.msg(errorMessage);
})
}
})
});

最后补充一下（app）

define(function (require, exports, module) {
var angular = require('angular');
var asyncLoader = require('angular-async-loader');
require('angular-ui-router');
var app = angular.module('app', ['ui.router']);
asyncLoader.configure(app);
module.exports = app;
});

奉上目录结构