几乎是一年之前，泛泛接触了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--第一篇（入门）的更多相关文章

  1. 第一篇 入门必备 (Android学习笔记)

    第一篇 入门必备 第1章 初识Android 第2章 搭建你的开发环境 第3章 创建第一个程序--HelloWorld 第4章 使用Android工具   ●Android之父 Android安迪·罗 ...

  2. RabbitMQ学习总结 第一篇：理论篇

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  3. 学习KnockOut第一篇之Hello World

    学习KnockOut第一篇之Hello World 笔者刚开始学习KnockOut.写的内容就相当于一个学习笔记.且在此处向官网致敬,比较喜欢他们家的Live Example版块,里面有jsFiddl ...

  4. ActionBarSherlock学习笔记 第一篇——部署

    ActionBarSherlock学习笔记 第一篇--部署          ActionBarSherlock是JakeWharton编写的一个开源框架,使用这个框架,可以实现在所有的Android ...

  5. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  6. 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳

    学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 ...

  7. 前端学习 linux —— 第一篇

    前端学习 linux - 第一篇 本文主要介绍"linux 发行版本"."cpu 架构"."Linux 目录结构"."vi 和 v ...

  8. Egret入门学习日记 --- 第一篇 （引擎的选择）

    第一篇 (引擎的选择) 我人比较笨,得慢慢学,我就一点一点来好了. 首先,我个人喜欢游戏.网页开发相对游戏开发来说,网页开发实在太枯燥了,没劲.所以打算转游戏开发了. 游戏开发要选择游戏引擎,我去看了 ...

  9. 我们一起学习WCF 第一篇初识WCF（附源码供对照学习）

    前言:去年由于工作需要我学习了wcf的相关知识,初期对wcf的作用以及为何用怎么样都是一知半解,也许现在也不是非常的清晰.但是通过项目对wcf的运用在脑海里面也算有了初步的模型.今天我就把我从开始wc ...

  10. PHP学习记录第一篇：Ubuntu14.04下LAMP环境的搭建

    最近一段时间会学习一下PHP全栈开发,将会写一系列的文章来总结学习的过程,以自勉. 第一篇记录一下LAMP环境的安装 0. 安装Apache Web服务器 安装之前先更新一下系统 sudo apt-g ...

随机推荐

  1. 【Codeforces 98E】 Help Shrek and Donkey

    http://codeforces.com/problemset/problem/98/E (题目链接) 题意 A君有n张牌,B君有m张牌,桌上还有一张反扣着的牌,每张牌都不一样. 每个回合可以做两件 ...

  2. Linux中使用Electronic WeChat客户端

    微信推出了Windows版和Mac版,一直没有推出也不会推出Linux版本,这就催生了Electronic WeChat(https://github.com/geeeeeeeeek/electron ...

  3. 「THUPC2018」赛艇 / Citing

    https://loj.ac/problem/6388 矩形匹配,小地图经过位置为1,和大地图匹配不能同时存在一个1的位置,就可以是一个当前位置 1.bitset压位,....O(n^2m^2/64) ...

  4. spring aop 获取request、response对象

    在网上看到有不少人说如下方式获取: 1.在web.xml中添加监听 <listener>          <listener-class>              org. ...

  5. 初探ant-design(web版本二)

    Dropdown下拉菜单 向下弹出的列表. 何时使用# 当页面上的操作命令过多时,用此组件可以收纳操作元素.点击或移入触点,会出现一个下拉菜单.可在列表中进行选择,并执行相应的命令. 最简单的下拉菜单 ...

  6. tcp的4次挥手、三次握手

    1. TCP短连接模拟一种TCP短连接的情况:1. client 向 server 发起连接请求2. server 接到请求,双⽅建⽴连接3. client 向 server 发送消息4. serve ...

  7. ML面试题网站及ML模型网站

    一.面试题网站 1)最全:http://www.epx365.cn/jyzn/201839501.html 2)七月在线:https://blog.csdn.net/movie14/article/d ...

  8. java实现Md5加密工具类

    场景:平常我们用户注册的密码保存到数据库都不会是明文存储的.都是经过加密之后的.因为保证用户的安全性.我们通常是用md5算法来加密的. 这个只能算是一个工具类.没必要了解里面是怎么实现的.拿来用就可以 ...

  9. Python 爬虫: 抓取花瓣网图片

    接触Python也好长时间了,一直没什么机会使用,没有机会那就自己创造机会!呐,就先从爬虫开始吧,抓点美女图片下来. 废话不多说了,讲讲我是怎么做的. 1. 分析网站 想要下载图片,只要知道图片的地址 ...

  10. 用java发邮件之一 (直接源于真实项目) 【原】

    真实项目应用的java发送邮件,应该还待进一步完善. 依赖 mail-1.4.jar jar包下载地址: http://mvnrepository.com/artifact/javax.mail/ma ...