Angulajs是一个MVC前段框架，项目中使用Angulajs必须按照框架的写法编写代码，可以统一代码规范易于后期代码的维护。

M Model 模型-数据，V View 视图-表现层 HTML/CSS，C Controller 控制器-业务逻辑，M和V耦合性高，C特别臃肿编写大段的代码

Angular的核心是数据，一切问题从数据本身考虑。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="img/angular.js" charset="UTF-8"></script>

    </head>

    <body>

        <div ng-app="">

            <input type="text" name="" value="" ng-model="a" >

            <div class="" ng-bind="a"></div>

            <select ng-model="a">

                <option value="1">北京市</option>

                <option value="2">洛阳市</option>

                <option value="3">商丘市</option>

            </section>

        </div>

    </body>

</html>

双向绑定 ng-model
数据变了<->视图变化（V <-> M）
自动同步数据和视图ng-model 双向绑定

ng-bind 输出数据

ng-app 被angularjs管理（将angularjs代码包在里面才管用）

angularjs的表达式    {{}}

ng-bind 和 {{}}一样也是用来绑定数据的，比ng-bind方便。

ng-init  用来初始化数据的

<!DOCTYPE html>

<html ng-app="">

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="img/angular.js" charset="utf-8"></script>

  </head>

  <body ng-init="a=0;b=0;">

    <input type="text" ng-model="a">

    <input type="text" ng-model="b">

    <span>{{a*b}}</span>

  </body>

</html>

Angularjs遍历数组和·json对象

数组：

<!DOCTYPE html>

<html ng-app="">

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="img/angular.js" charset="utf-8"></script>

  </head>

  <body ng-init="arr=[12,5,8,9,10,12,12]">

    <ul>

      <li ng-repeat="item in arr track by $index">{{item}}</li>
　　　// <li ng-repeat="item in arr>{{item}}</li>
　　
   </ul>

</html>
ng -repeat   遍历数组或者josn
问题：数组中一旦有重复的数据就无法遍历  ng -repeat  为了保证效率它需要key和value一一对应，需要每个元素有个单独的key，而数组没有key，所以吧数组的元素当成默认的key，数组中不能有重复的的元素，一旦重复就无法遍历了
解决：track by   $index   它是吧数组的下标当成key了解决了问题效率不好， 因为只要插入或者添加一个元素数组的下标就会改变。
 
json对象：
<!DOCTYPE html>

<html ng-app="">

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="angular.js" charset="utf-8"></script>

  </head>

  <body ng-init="arr=[{user: '王五', age: 18}, {user: '张三', age: 23}, {user: '李四', age: 25}, {user: 'blue', age: 18}]">

    <ul>

      <li ng-repeat="json in arr">姓名：{{json.user}}，年龄：{{json.age}}</li>

    </ul>

  </body>

</html>

json对象遍历不存在用ng-repeat的问题

json对象用ng-repeat遍历的方式

  1. <li ng-repeat="(k,v) in json">{{k}}, {{v}}</li>     取出key的值
  2. <li ng-repeat="val in arr">{{$index}}, {{val}}</li>

 留言板实例

<!DOCTYPE html>

<html ng-app="">

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="img/angular.js" charset="utf-8"></script>

  </head>

  <body ng-init="arr=[{name: '咸鱼', content: '大家好啊'}, {name: '张三', content: '挺好呀'}]">

    名字：<input type="text" name="" value="" ng-model="name"><br>

    内容：<input type="text" name="" value="" ng-model="content"><br>

    <input type="button" value="提交" ng-click="arr.unshift({name: name, content: content})">

    <ul>

      <li ng-repeat="json in arr">

        <h4>{{json.name}}</h4>

        <p>{{json.content}}</p>

      </li>

    </ul>

  </body>

</html>

初步认识Angulajs的更多相关文章

  1. 移动端之Android开发的几种方式的初步体验

    目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...

  2. CSharpGL(29)初步封装Texture和Framebuffer

    +BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(29)初步封装Texture和Framebuffer +BIT祝威+悄悄在此留下版了个权的信息说: Texture和Framebuffe ...

  3. Android自定义View初步

    经过上一篇的介绍,大家对于自定义View一定有了一定的认识,接下来我们就以实现一个图片下显示文字的自定义View来练习一下.废话不多说,下面进入我们的正题,首先看一下我们的思路,1.我们需要通过在va ...

  4. 初步认识Node 之Node为何物

    很多人即便是在使用了Node之后也不知道它到底是什么,阅读完本文你应该会有一个初步的.具体的概念了.    Node的目标 提供一种简单的构建可伸缩网络程序的方法.那么,什么是可伸缩网络程序呢?可伸缩 ...

  5. [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 （二）

    [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date  周六 10 一月 2015 By 钟谢伟 Category website develop ...

  6. 基于C/S架构的3D对战网络游戏C++框架 _05搭建系统开发环境与Boost智能指针、内存池初步了解

    本系列博客主要是以对战游戏为背景介绍3D对战网络游戏常用的开发技术以及C++高级编程技巧,有了这些知识,就可以开发出中小型游戏项目或3D工业仿真项目. 笔者将分为以下三个部分向大家介绍(每日更新): ...

  7. 基于ionic+angulajs的混合开发实现地铁APP

    基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一. ...

  8. Azure底层架构的初步分析

    之所以要写这样的一篇博文的目的是对于大多数搞IT的人来说,一般都会对这个topic很感兴趣,因为底层架构直接关乎到一个公有云平台的performance,其实最主要的原因是我们的客户对此也非常感兴趣, ...

  9. CozyRSS开发记录14-RSS源管理初步完工

    CozyRSS开发记录14-RSS源管理初步完工 1.添加源的响应 DialogHost.Show有几个版本的重载,加一个DialogClosingEventHandler参数.我们让添加源对话框的添 ...

随机推荐

  1. MySQL程序之mysql参数详解

    MySQL程序之mysql参数详解 mysql 是一个命令行客户程序,用于交互式或以批处理模式执行SQL语句 用法: mysql [OPTIONS] [database] 参数: 1.-? --hel ...

  2. Java WebService 简单实例[转载]

    [注意,本文转载自  http://hyan.iteye.com/    ] 一.准备工作(以下为本实例使用工具) 1.MyEclipse10.7.1 2.JDK 1.6.0_22 二.创建服务端 1 ...

  3. 修改postfix smtp端口，防止公网扫描浪费你的服务器流量

    邮件服务器的默认发送邮件端口是25,一些ISP会封锁25端口防止垃圾邮件的发送,这样就导致不能使用Foxmail.outlook等邮件客户端发送邮件.修改默认smtp端口就可以解决这个问题.下面的方法 ...

  4. TreeView添加图片

    实现方式一: 通过代码方式实现如下所示: private string FilePath = Application.StartupPath + "\\Images\\"; Ima ...

  5. <亲测>.NET Core项目在Linux上使用QRCoder时出错"Unable to load DLL 'gdiplus'"

    Centos 7 解决方案如下: yum install libgdiplus-devel

  6. pytest.8.使用pytest做简单的接口测试

    From: http://www.testclass.net/pytest/test_api/ 背景 我们现在需要测试v2ex网站的查看论坛节点信息的api.具体如下: 节点信息 获得指定节点的名字, ...

  7. 关于JSON 与 对象 、集合 之间的转换

    在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JSON等,JSON作为一个轻量级的数据格式比xml效率要高,XML需要很多的标签,这无疑占据了网络流量,JSON在这方面则做的很好, ...

  8. C++进阶--逻辑常数和比特位常数(Logical constness vs Bitwise constness)

    对于什么是const函数,有两种理解 Logical constness 实际的数据没有没修改,如下面程序中的vector v Bitwise constness 类的成员变量没有被修改,包括int ...

  9. vue之v-on

    我们可以用 v-on 指令绑定一个事件监听器,通过它调用我们 Vue 实例中定义的方法: <!DOCTYPE html> <html lang="en"> ...

  10. 让HTMLrunner 报告的子列表都 默认展示出来的 方法(方便发送邮件时可以方便查看)

    1.找到生成的测试报告,获取到all元素 2.在HTMLrunner源码,</script> 标签上 加入一个函数 #让所有列表都展示出来window.onload = function ...