最近在项目中用到了angular,之前从未用到过此js lib库,由于项目也比较着急,学习的寥寥草草。到目前为止也只是学会皮毛而已,现将自己学习的知识总结如下:
备注1:
版本号:1.2.2
备注2:
本文将angular结合bootstrap做前端页面,逻辑处理。其中用到了ng的route,repeat,ng-option做下拉框等等一些简单的ng的知识。
开始angular编程:
1、 引入文件
2、 ng模板的应用:
说明:
在后台维护平台中,一般都会存在有左侧菜单,右侧操作的页面,如果这里用angular的实现的话,就会用到ng模板的知识
实现方式(index.jsp)
1、 动态菜单div,声明ng-view告诉angular此部分内容是动态的,记住务必引入angular-route.
2、controller应用,在ng的应用中都是controller对应相应的模板html文件,index文件也不例外
案例:
对应的controller:
IndexController.js : route过滤url设置 var indexModule = angular.module('index',['ngRoute']); indexModule.config(['$routeProvider', function($routeProvider) { $routeProvider.when('/advManage', {templateUrl: './subhtml/adv_manage.html'}); $routeProvider.when('/advModifyManage',{templateUrl:'./subhtml/adv_modify_manage.html'}); }]);
备注3:
上面此类code编写完成之后基本上就实现了动态菜单的操作.when的设置过滤通过url对应相应的html文件。
备注4:
模板文件controller以及html的注意事项如下(举例adv_manage):
A、 根据indexController中设置的过滤来看相应的路径对应的html文件
B、 Html模板文件中声明对应的controller name:
C、 AdvManageController.js
var module = angular.module('index'); module.controller('AdvManageController',function($scope,$rootScope,$http){ //somecode })总结:
ng中的ng-view基本上就是这样了。总结一下就是以下几步:
1、 引入ng lib ,包括ng-route
2、 定义相应的indexController设置过滤,并且定义相应字模板文件
3、 Code相应的route到相应的html文件
写下你的评论吧 !推荐阅读
高质量的网页和移动元素是任何Web或移动项目的基础。优秀的UI设计组件不仅能够提升用户体验,还能显著缩短设计师的工作时间,帮助他们快速创建出引人注目的作品。本文将分享一系列免费的扁平化设计素材。 ... [详细]蜡笔小新 2024-12-25 10:43:36 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]蜡笔小新 2024-12-26 15:57:00 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]蜡笔小新 2024-12-24 14:37:46 本文介绍了多个适用于用户界面设计的Canvas框架,帮助开发者选择最适合的工具。 ... [详细]蜡笔小新 2024-12-23 20:28:53 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]蜡笔小新 2024-12-23 19:38:45 本文旨在为读者提供对Java虚拟机(JVM)的全面理解,涵盖其主要组成部分、工作原理及其在不同平台上的实现。通过详细探讨JVM的结构和内部机制,帮助开发者更好地掌握Java编程的核心技术。 ... [详细]蜡笔小新 2024-12-21 23:50:40 本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]蜡笔小新 2024-12-21 15:41:04 本文汇集了一系列具有强烈设计感的网站模板,特别是来自知名平台WrapBootstrap的响应式网站模板。这些模板不仅美观,而且功能强大,适合各种类型的网站建设需求。 ... [详细]蜡笔小新 2024-12-20 20:50:19 本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]蜡笔小新 2024-12-28 09:49:42 本文详细介绍如何从官方渠道下载并安装PyCharm集成开发环境(IDE),涵盖Windows、macOS和Linux系统,同时提供详细的安装步骤及配置建议。 ... [详细]蜡笔小新 2024-12-28 09:42:41 在 Windows 10 中,F1 至 F12 键默认设置为快捷功能键。本文将介绍几种有效方法来禁用这些快捷键,并恢复其标准功能键的作用。请注意,部分笔记本电脑的快捷键可能无法完全关闭。 ... [详细]蜡笔小新 2024-12-28 09:13:44 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]蜡笔小新 2024-12-28 09:10:26 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]蜡笔小新 2024-12-28 08:20:07
多米音乐_34138178这个家伙很懒,什么也没留下!Tags | 热门标签RankList | 热门文章
- 1解决ArcEngine中IEngineEditor编辑ArcSDE数据时遇到的0x8004021F错误
- 2在Ubuntu系统上安装搜狗输入法的详细步骤
- 3移动端Vue应用中Vant v2组件库的安装与使用指南
- 4ISA2006配置PPTP协议下的VPN连接(续)
- 5寻找不主动推销的药店
- 6Windows 驱动开发工具概览
- 7罗技设备管理器:鼠标与耳机设置指南
- 8CSS3 backgroundsize让背景图寸尺大小可控
- 9如何巧妙利用闪光灯提升摄影效果
- 10Oracle数据库管理中的脚本文件应用
- 11使用H5在前端生成Excel文件的方法
- 12Node.js 中实现图片上传并自动添加水印的方法
- 13腾讯发布全新Android原生UI框架,开源社区再添强援
- 14解决方法:Microsoft Security Client OOBE 程序故障
- 15JavaScript 运算符优先级与结合性解析
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有