重新学习angularjs--第一篇(入门)
几乎是一年之前,泛泛接触了angularjs,也做了一些项目,但是时至今日,几乎已经忘记了ng的使用,由于业务需要,近日要攻克这座难关,重新学习。会把学习的一些东西拿出来,记录之。
angularjs的官网:https://angularjs.org/,就不介绍这个框架了,直接学习这个框架。
同jquery一样,通过script标签的引入。我们可以通过cdn的方式引入,也可以下载下来到我们本地再引入下载地址 ,
https://github.com/angular/angular.js/releases
。
这样<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 或者这样
<script src="js/angular.min.js"></script>
引入了这个框架之后,页面中就有了这么一个蓄势待发的作用范围了,接下来的代码结构中,如果用到了ng里面的关键词,那么这个框架就开始正式起作用了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name||'world'}}</h1> <!--双向数据绑定-->
</div>
</body>
</html>
这里的ng-app,不可缺少,这个是angular的抓取的关键词,程序了有这么一个关键词,angular就知道了这个是它的领域了,它要按照它的规则来执行下面的代码了。没有的话,页面会按照一般的html的方式渲染。
写了ng-app的这样:
没写这样:
这里 ng-model 指令把元素值(比如输入域的值)绑定到应用程序,它的名字可以理解为js里面传的一个变量。因此下面的值就显示为 里面的值。{{name||"world"}},当input的值为空,则name表达式为假,就自然往后面走,以后面的真值为主,字符串不为空,为真,因此大括弧里面出现的最后值为,world。当input里面有数据了,就以name的主了。这里讲解了“”||“” 的用法,具体的解释,请找别的篇目阅读。 ng-app不可重复。
啰嗦一句,ng-model=“******”,****这里不能当做字符串理解,应该当一个js变量理解,不仅ng-model,ng-init,ng-repeat等;{{}} 大括弧里面就是一个js的作用空间,里面的值就会当做变量或者我们普通定义js变量那样执行。
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]"> <p>循环对象:</p> <ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul> </div>
ng-repeat=“x in name” ,这里很像我们 for in 循环,这里的x 指的是数组names的对象了,这个指令的意思,就是循环数组对象,然后放入我们的页面li中。
每日一句:What we anticipate seldom occurs; what we least expect generally happens. ----Benjamin Disraeli
翻译:我们所预料的事情很少发生,我们最始料不及的事情却往往发生了。——本杰明·迪斯雷利
重新学习angularjs--第一篇(入门)的更多相关文章
- 第一篇 入门必备 (Android学习笔记)
第一篇 入门必备 第1章 初识Android 第2章 搭建你的开发环境 第3章 创建第一个程序--HelloWorld 第4章 使用Android工具 ●Android之父 Android安迪·罗 ...
- RabbitMQ学习总结 第一篇:理论篇
目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...
- 学习KnockOut第一篇之Hello World
学习KnockOut第一篇之Hello World 笔者刚开始学习KnockOut.写的内容就相当于一个学习笔记.且在此处向官网致敬,比较喜欢他们家的Live Example版块,里面有jsFiddl ...
- ActionBarSherlock学习笔记 第一篇——部署
ActionBarSherlock学习笔记 第一篇--部署 ActionBarSherlock是JakeWharton编写的一个开源框架,使用这个框架,可以实现在所有的Android ...
- 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
- 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳
学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 ...
- 前端学习 linux —— 第一篇
前端学习 linux - 第一篇 本文主要介绍"linux 发行版本"."cpu 架构"."Linux 目录结构"."vi 和 v ...
- Egret入门学习日记 --- 第一篇 (引擎的选择)
第一篇 (引擎的选择) 我人比较笨,得慢慢学,我就一点一点来好了. 首先,我个人喜欢游戏.网页开发相对游戏开发来说,网页开发实在太枯燥了,没劲.所以打算转游戏开发了. 游戏开发要选择游戏引擎,我去看了 ...
- 我们一起学习WCF 第一篇初识WCF(附源码供对照学习)
前言:去年由于工作需要我学习了wcf的相关知识,初期对wcf的作用以及为何用怎么样都是一知半解,也许现在也不是非常的清晰.但是通过项目对wcf的运用在脑海里面也算有了初步的模型.今天我就把我从开始wc ...
- PHP学习记录第一篇:Ubuntu14.04下LAMP环境的搭建
最近一段时间会学习一下PHP全栈开发,将会写一系列的文章来总结学习的过程,以自勉. 第一篇记录一下LAMP环境的安装 0. 安装Apache Web服务器 安装之前先更新一下系统 sudo apt-g ...
随机推荐
- hive1.1.0安装
0. 说明 已经安装好Hadoop-1.2.1. 安装好mysql. 1.解压安装包 先把安装包下载.然后解压: tar -zxvf apache-hive-1.1.0-bin.tar.gz 2.配置 ...
- A1078. Hashing
The task of this problem is simple: insert a sequence of distinct positive integers into a hash tabl ...
- MATLAB:图像裁切(imcrop函数)
对图像进行裁切可用imcrop函数,实现过程如下: close all; %关闭当前所有图形窗口,清空工作空间变量,清除工作空间所有变量 clear all; clc; [A,map]=imread( ...
- A*算法(附c源码)
关于A*算法网上介绍的有很多,我只是看了之后对这个算法用c写了一下,并测试无误后上传以分享一下,欢迎指正!下面是我找的一个介绍,并主要根据这个实现的. 寻路算法不止 A* 这一种, 还有递归, 非递归 ...
- Linux 防火墙iptables开放特定端口
1.查看状态:iptables -L -n2.直接编辑:vi /etc/sysconfig/iptables3.端口开放:-A INPUT -m state --state NEW -m tcp -p ...
- java代码示例(6-1)
创建Administrator.java /** * 需求分析:定义用户名,密码 * @author chenyanlong * 日期:2017/10/15 */ package com.hp.te ...
- 数据正规化 (data normalization) 的原理及实现 (Python sklearn)
原理 数据正规化(data normalization)是将数据的每个样本(向量)变换为单位范数的向量,各样本之间是相互独立的.其实际上,是对向量中的每个分量值除以正规化因子.常用的正规化因子有 L1 ...
- 有关Java内存溢出及内存消耗的小知识
内存溢出原理: 我们知道,Java程序本身是不能直接在计算机上运行的,它需要依赖于硬件基础之上的操作系统和JVM(Java虚拟机). Java程序启动时JVM都会分配一个初始内存和最大内存给这个应用程 ...
- string中substr,find函数使用
2.string函数 find:某子串的起始位(0开始),函数的第二个参数使用代表从该位开始的后缀 substr:1) x开始的连续y位 2) x开始的后缀 #include<bits/stdc ...
- $_SERVER 当前信息
连接:https://www.cnblogs.com/mafeng/p/5868117.html $_SERVER['HTTP_ACCEPT_LANGUAGE']//浏览器语言 $_SERVER['R ...