AngularJs 入门系列-1 使用 AngularJs 搭建页面基本框架
每当看到前端程序员在脚本、样式、表单处理逻辑中苦苦挣扎的时候,我就在想,为什么不用Angular Js 呢?
Angular Js 支持页面前端的 MVC 模式开发,在 Angular JS 的支持下,我们可以将页面前端处理的数据与页面展示进行分离,实现优雅的代码结构。
首先,我们需要到 AngularJs 的官网下载这个脚本库。
地址:https://angularjs.org/
不过,这个网站经常被封,你也可以直接在这里下载: http://files.cnblogs.com/haogj/AngularJs-1.3.10.zip
1. 在页面引用 AngularJs 脚本
AngularJs 是一个独立的脚本库,许多人询问是否还需要 jQuery,答案是不需要。你只需要在页面引用 AngularJs 的脚本文件就可以了,甚至,AngularJs 还实现了一个精简版的 jQuery。不过它也可以和 jQuery 一起使用。
在 ASP.NET MVC 的页面视图中,可以直接引用,也可以通过 @section 将脚本放置到布局 Layout 的 scripts 节中。
@section scripts {<script src="~/Scripts/angular-1.3.10.min.js"></script><script></script> }
2. 创建 WebApp 和控制器
在 AngularJs 中,每个页面被看作一个独立的 WebApp,每个 WebApp 中可以包括多个独立的处理部分,我们称为 Controller,每个 Controller 有自己独立的处理上下文和逻辑。
AngularJs 通过指令 ng-app 来划定这个 WebApp 的作用域,通常可以将这个 ng-app 直接写在 html 标记之上,也可以写在一个元素之上,我们这里写在这个视图中的 div 标记之上。
ng-controller 用来划定 WebApp 中的控制器的作用域,通常,我们会给它起一个名字。
<div ng-app="myApp"><div ng-controller="myController"></div> </div>
下面,在脚本中创建我们的 WebApp 和控制器。
1 <script src="~/Scripts/angular-1.2.14.min.js"></script> 2 <script> 3 var app = angular.module("myApp", []); 4 5 app.controller("myController", function ($scope, $http) { 6 $scope.message = "Hello, Angular JS."; 7 }); 8 </script>
上面的第三行创建 WebApp,注意第一个参数是应用的名称,需要与页面指令中的 WebApp 名称匹配,第二个参数数组是必须的。
第五行创建了应用中的控制器,特别需要注意的是控制器的匿名函数参数,这两个参数的名称不可以修改,在 AngularJs 中,参数的名称用来进行依赖注入。
第一个参数 $scope 就是这个控制器的上下文对象,通过它我们将模型,视图,和处理逻辑粘合在一起。
3. 创建视图
在 AngularJs 中,视图是通过标准的 HTML 实现的。
注意,我们上面代码的第 6 行,我们在上下文对象上保存了一个 message ,这就是我们的模型,我们希望这个模型中的数据,可以在页面展示出来。
在 Controller 的元素内部,创建一个新的 div 来容纳我们的内容,我们准备使用 h2 标记将这个 message 的内容显示出来。
视图怎样与我们的模型绑定在一起呢?各种模板都有自己的绑定语法,AngularJs 的方式是 {{ }}。其中可以写一个表达式。
<div ng-app="myApp"><div ng-controller="myController"><div><h2>{{message}}</h2></div></div></div>
现在运行一下程序,你应该已经在页面看到输出结果了。
4. 实现模型和视图的双向绑定
如果我们需要编辑这个 message 呢?编辑之后如何获取编辑之后的内容呢?angularjs 支持双向绑定,也就是说既可以从我们的模型获取数据,如果数据被编辑了,编辑之后的内容也通过可以被 angularjs 同步到模型上。
双向绑定实际上是 angularjs 内部支持的,我们并不需要特别的编码。在这里我们添加一个编辑框来支持编辑。
<div ng-app="myApp"><div ng-controller="myController"><div><h2>{{message}}</h2><input type="text" ng-model="message" /></div></div></div>
注意 input 元素的 ng-model 属性,它表示我们需要双向绑定 message 到这个编辑元素上。
重新运行程序,你看到 message 的内容也同步出现在编辑框中,如果你修改编辑框中的内容,标题中的内容也将会同步变化。你的编辑结果已经同步到了模型上。
总结
angularJs 是一个比较重的脚本库,虽然内部高度复杂,注意关键的使用细节,使用起来其实非常简单。
AngularJs 入门系列-1 使用 AngularJs 搭建页面基本框架相关推荐
- Netty入门系列(1) --使用Netty搭建服务端和客户端
引言 前面我们介绍了网络一些基本的概念,虽然说这些很难吧,但是至少要做到理解吧.有了之前的基础,我们来正式揭开Netty这神秘的面纱就会简单很多. 服务端 public class PrintServ ...
- springboot入门(一)--快速搭建一个springboot框架
原文出处 前言 在开始之前先简单介绍一下springboot,springboot作为一个微框架,它本身并不提供Spring框架的核心特性以及扩展功能,只是用于快速.敏捷地开发新一代基于Spring框 ...
- html5 Game开发系列文章之 三 搭建基本游戏框架(代码封装)
在之前的二节中,我做出一个基本的游戏精灵--一条红色的飞行的小飞龙,但是在进行下一步开发前,我觉得有必要对现有的代码进行封装!在这一节中,我将封装一些基本的方法,并演示如何在JS中实现继承! 首先了解 ...
- 【Python零基础快速入门系列 | 03】AI数据容器底层核心之Python列表
• 这是机器未来的第7篇文章 原文首发地址:https://blog.csdn.net/RobotFutures/article/details/124957520 <Python零基础快速入门 ...
- 基于ROS搭建简易软件框架实现ROV水下目标跟踪(补2)--水下slam仿真构想
这部分内容其实和水下目标跟踪的软件框架没啥联系,但既然上一篇文章提到了水下环境的仿真,结合近期的一点小尝试,也谈谈对水下slam仿真可行性的一些构想. 在水下光学传感器基本上效果非常差.声学设备一方面 ...
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- 跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
- 《AngularJS入门与进阶》图书简介
一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...
- AngularJS 入门6-路由
AngularJS 入门6-路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 这个NG的路由模块可以实现带有多视图的单页面开发 实例: //HTML ...
最新文章
- 4701年新年快乐!
- 如何从0-1构建自己的”pytorch“(自己专属的深度学习框架)——part02
- android gradle错误,更新到Android Studio 2.3后出现Gradle错误
- linux java的安装目录,linux java 安装目录
- 总结一些java编程题的思路
- [2021-09-09 T3] 序列/luogu P3943 星空(异或差分+bfs最短路+状压dp)
- cad在线转低版本_为什么别人制图那么快?41个CAD实用技巧,3天轻松玩转CAD
- grpc简单使用 java_gRPC学习记录(四)-官方Demo - Java 技术驿站-Java 技术驿站
- python 运行cmd命令失败怎么办_python manage.py runserver命令在cmd命令框中可以正确执行,但是在pycharm的终端中运行就失败了!...
- 大数据之-Hadoop3.x_MapReduce_MapJoin案例调试_debug---大数据之hadoop3.x工作笔记0135
- 怎样在matlab q-q图上读出斜率,Q分解法潮流计算matlab小程序
- javaweb(10) cookiesession
- 【探路者】第三周立会报告5(总第17次)
- html中div的居中
- 【华为2015暑期实习生上机题】仿照Excel的列编号
- smartdns使用指南_SmartDNS配合某插件进阶上网使用教程(基于N1盒子Op系统)
- python27缺少dll的解决
- 在计算机中 总线简称,微机中的总线一般分为几等
- 身份证扫描件用手机怎么弄?手把手教你生成电子身份证
- 一款好看的 html 后台管理系统模板
热门文章
- 《CCNP TSHOOT 300-135学习指南》——1.2节结构化故障检测与排除方法
- 基于jquery.fixedheadertable 表格插件左侧固定 对齐
- 2012-2013年度大总结
- 盖瑞特金属探测门受多个严重漏洞影响,可遭篡改
- GitHub 在 “tar” 和 npm CLI 中发现7个高危的代码执行漏洞
- 突发:Maze 勒索团伙公开 LG 和 Xerox 的内部数据,达数十GB
- 4.8 定位一组元素
- 用memoization优化递归算法[JS/PHP实现]
- sublime安装markdown
- eclipse sdk manager无法更新