requirejs与anjularjs框架

1.目录省略

2.首页index.html如下:

<!doctype html>
<htmls>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
</head>

<body>
<!--其他html内容-->
<script type=‘text/javascript‘ src=‘../scripts/lib/require.js‘ data-main=‘../scripts/main.js‘></script>
</body>
</html>

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

3.main.js(主要配置下所需的js文件)

require.config({
    baseUrl: ‘/js/lib‘,
    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‘], function (angular) {
    ‘use strict‘;
    //手动启动
    angular.bootstrap(document, [‘indexmodule‘]);
});

5.indexmodule(主要是路由的设置)

define([‘angular‘], function (angular) {
    ‘use strict‘;

    var app = ng.module(‘indexmodule‘, [‘ngCookies‘, ‘ngRoute‘, ‘ngMessages‘);

    app.config([‘$routeProvider‘, function ($routeProvider) {
        $routeProvider
            .when("/", { controller: ‘index-controller‘, templateUrl:  ‘../index.html‘ })
             .otherwise({ redirectTo: ‘/‘ });
    }]);

    return app;
});

6.index-controller(控制器)

define([‘indexmodule‘,‘indexservice‘],function(app,indexservice){
         app.controller(‘index-controller‘,[‘$scope‘],function($scope,indexservice){
             //这里是对界面控制器的一些操作
             //也可以调用服务
         $scope.aa=indexservice.getindex().success(function(response){         });
    })
});

7.indexservice(调用的服务)

define([‘indexmodule‘], function (app) {
	‘use strict‘;

	app.service(‘indexservice‘, [‘$http‘, function ($http) {

		this.getindex= function (xx,xx) {

			var callback_success = function () {
				console.info(‘调用成功。‘);
			};

			var callback_error = function () {
				console.error(‘调用失败。‘);
			};

			var indexservice= $http({ url:  ‘服务地址‘, method: ‘POST‘, params: null, data: {xx,xx} }).success(callback_success).error(callback_error);

			return indexservice;
		};
	}]);
});

 

时间: 2024-10-29 08:20:44

requirejs与anjularjs框架的相关文章

requirejs搭建前端框架

1. 文件结构 2. base.js requirejs.config({     baseUrl: 'js',     paths:{         jquery:"../dist/js/jquery-1.11.3.min",         domReady:"../dist/js/domReady"     },     urlArgs: "version=" + version,     shim: {         'jquery'

我是如何基于angular+requirejs+node做SPA项目架构的

前端这两年技术飞速发展,各种优秀框架层出不穷.本文不是讨论各框架的比较,也不讨论为什么我要用angular,而不用backbone:不讨论为什么用requirejs,而不用browserify,seajs等.只是介绍平常我是怎么进行项目的前端架构. 一个成熟项目架构中应该具有哪些功能 * 快速的项目生成器——快速生成项目主体架构,单步实现controller,单步实现view,实现根据router自动生成view,controller * 静态资源的管理——基于bower * css动态编译——

angularjs+requlirejs 搭建前端框架(1)

第一部分:发发牢骚吧 随着富前端时代的逐渐深入,越来越多的前端技术框架层出不穷,可以说是百花齐放.让我们这些爱好前端的人疲于奔命,今天学习这个框架,明天研究那个框架,哎,说不出的蛋疼...感觉好累...各种大神各种框架@#¥%,看得我是云里来雾里,心中一万只羊驼狂奔...看着大牛“越走越远”的背影,带着这颗被狂奔的心,我也只能继续前行啊... 之前说过,没有一颗成为“将军”的心,没有为成为“将军”而付出的人,那么你就只能接受“士兵”待遇.也许知足常乐.也许废寝忘食,见仁见智,没有对错…… 第二部

浏览器渲染页面的探讨

我们都知道,网页中引用的外部文件: JavaScritp.CSS 等常常会阻塞浏览器渲染页面,执行一大片js代码也会迟滞页面的渲染.假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载:或者,我们在页面中插入某段执行起来很耗时的js代码,那么浏览器渲染页面的过程就会被阻塞,直到JS文件下载并执行完后才继续.由此可见,前端性能调优时必须排除任何潜在的渲染阻塞点,让浏览器在最短时间内渲染出整体页面. 先来看看,为什么会发生渲染阻塞? 例如:有如下的html文件

自制jQuery焦点图切换简易插件

首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js,前面一个是我改写的,第二个是原作者的文件.下图是效果图: 一.静态效果 <div class="slide_wrap"> <ul id="slides2" class="slide"> <li s

自制jQuery标签插件

在项目中需要一个添加标签的小插件,查看了一些已有插件后,发现很现成的高级插件,也有比较简单的插件.最后还是决定自己来写,这样能控制代码,以后与其他插件结合使用的时候能更好的把控.初步在IE6 7 8,firefox,chrome中做了测试,可以通过. 我是仿照163邮箱中添加邮箱的方式写的,插件如下: 一.制作静态效果 先用html和css做出个样子出来,然后再根据样式来做动态效果. <h2 style="padding:10px">静态效果</h2> <

用GruntJS合并、压缩JS文件

长期东忙西忙,却不忙更新自己的博客,缺少输出,甚为惭愧 记得我当初刚接触GruntJS的时候对NodeJS一知半解,所以第一次使用花了些时间才熟悉起来.本文希望能帮助朋友们快速入门. 为什么要合并.压缩你的JS文件? 在开始之前,先重申一下这个问题.因为经常在帮忙改东西的时候看到HTML页面上引用了N个JS,而通常看到这个就知道这人JS写得有多糟糕了.HTML里穿插一堆JS代码的我就不吐槽了. 一般在一个HTML文档加载的时候,浏览器会根据HTML代码从上到下读取所需要加载进来的CSS.JS.图

图书《HTML5 App商业开发实战教程》读后小感(一)

作者简介 马科,浙江省杭州人,毕业于陕西科技大学,起步科技创始人,中国计算机软件领域企业家. 2006年马科创办起步科技,立志打造国内"主流高效的开发工具",先后领导研发Justep X3.WeX5.BeX5平台等产品,核心基础产品WeX5开发工具完全免费.开源!极大的避免重复劳动,代码量减少80%以上. 我把作者(主编)头像放在文章始处,表达了我对本书的极端重视.从官方发布信息来看,后续还会有两本.尽管是针对初级读者,但是本书无论是形式还是质量,在本人看来,当属上乘.后续文章中,我会

Reactjs学习 -- factory、component和element

在使用reactjs的时候,我们经常会使用到下面三个方法: React.createFactory() React.createClass() React.cleateElement() 这三个方法接受的参数和返回的对象类型是不同的. React.createFactory 该方法会接受一个component类型的对象,并且返回一个factory方法.使用返回的factory可以创建element.如 <span style="font-size:12px;">var fa