基于angular的前端模块化框架 - me

me描述

基于AngularJS的前端框架,极大提高前端开发的效率,适用于任何前端项目

github地址:https://github.com/kongxh1218/me

分钟上手

1.页面必须引用jQuery ,AngularJS ,以及me.js

2.创建主页面index.html

<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="meApp">
	<head>
		<title>me 测试页面</title>
		<script src="js/jquery-2.0.2.min.js"></script>
		<script src="js/angular1.3.8.min.js"></script>
		<script src="js/me-1.0.js"></script>
		<script src="js-ctrl/a.js"></script>
		<script src="js-ctrl/b.js"></script>

		<script>
			me.config({
				container: "#me_body",
				main: "tpl/a.html" // 默认加载a.html
			});
		</script>
	</head>
	<body ng-controller="me.ctrl">
		<div id="me_body"></div>
	</body>
</html>
<script>me.run("meApp", []);</script>

3.创建子页面tpl/a.html

<div ng-controller="a.ctrl">
	<h1>这是a页面</h1>
	<button ng-click="showB()">打开b页面</button>
</div>

4.创建子页面a的控制器js-ctrl/a.js

me.define("a",{
	ctrl: function(){
		// a初始化函数
	},

	showB: function(){
		me.show("tpl/b.html", {
			showType: 1,
			param: "传到b页面的参数"
		}).on("hide", function(hideParam){
			console.log(hideParam);
		});
	}
});

5.创建子页面tpl/b.html

<div ng-controller="b.ctrl">
	<h1>这是b页面</h1>
	<button ng-click="back()">返回a页面</button>
</div>

6.创建子页面b的控制器js-ctrl/b.js

me.define("b",{
	ctrl: function(){
		// 获取从a传来的参数
		console.log(me.param());
	},

	back: function() {
		// 关闭页面b时,返回参数给a
		me.hide("返回的参数");
	}
});

完整的demo 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular是一个流行的前端框架,用于构建Web应用程序。它由Google开发并维护,采用TypeScript语言编写。Angular提供了一套完整的工具和功能,用于开发现代化的单页应用程序(SPA)和响应式Web应用程序。 Angular的主要特点包括: 1. 组件化架构:Angular使用组件化架构来构建应用程序。每个组件都有自己的模板、样式和逻辑,并可以嵌套在其他组件中,以构建复杂的用户界面。 2. 双向数据绑定:Angular支持双向数据绑定,使得数据的变化可以自动反映在视图中,同时用户的输入也可以自动更新数据模型。 3. 依赖注入:Angular使用依赖注入来管理组件之间的依赖关系。这样可以更好地组织和测试代码,并提高代码的可维护性和可扩展性。 4. 路由和导航:Angular提供了强大的路由和导航功能,可以实现页面之间的无缝切换和导航。 5. 响应式表单:Angular提供了响应式表单功能,可以轻松地处理表单的验证、状态管理和用户输入。 6. 强大的工具集:Angular配备了丰富的工具集,包括开发者工具、测试工具和构建工具,可以提高开发效率和代码质量。 下面是一个简单的Angular组件的示例: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-hello', template: ` <h1>Hello, {{ name }}!</h1> <button (click)="changeName()">Change Name</button> `, }) export class HelloComponent { name = 'Angular'; changeName() { this.name = 'World'; } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值