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. kafka_2.11-0.8.2.1生产者producer的Java实现

    转载自:http://blog.csdn.net/ch717828/article/details/50818261 1. 开启Kafka Consumer 首先选择集群的一台机器,打开kafka c ...

  2. 基于tensorflow的MNIST手写识别

    这个例子,是学习tensorflow的人员通常会用到的,也是基本的学习曲线中的一环.我也是! 这个例子很简单,这里,就是简单的说下,不同的tensorflow版本,相关的接口函数,可能会有不一样哟.在 ...

  3. 持续集成之Jenkins+Gitlab实现持续集成 [二]

    持续集成之Jenkins+Gitlab实现持续集成 [二] 项目:使用git+jenkins实现持续集成 开始构建  General  源码管理 我们安装的是Git插件,还可以安装svn插件  我们将 ...

  4. vue之v-for

    vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对 ...

  5. 服务注册发现consul之四： 分布式锁之四：基于Consul的KV存储和分布式信号量实现分布式锁

    一.基于key/value实现 我们在构建分布式系统的时候,经常需要控制对共享资源的互斥访问.这个时候我们就涉及到分布式锁(也称为全局锁)的实现,基于目前的各种工具,我们已经有了大量的实现方式,比如: ...

  6. python 数组或列表维度增加

    怎么把[,,,,]变成[[],[],[],[],[]]???

  7. 廖雪峰Java5集合-2List-2编写equals方法

    List是一种有序链表: List内部按照放入元素的先后顺序存放 每个元素都可以通过索引确定自己的位置 boolean contains(Object o) 是否包含某个元素 int indexOf( ...

  8. jdbi

    JDBI是一个使用方便的SQL开发库,用符合Java语言习惯的集合.Bean等方式,提供关系数据库访问接口,同时保留了JDBC类似的信息.JDBI提供了链式和SQL两种风格的API. jdbi的网址是 ...

  9. 1125 Chain the Ropes （25 分）

    1125 Chain the Ropes (25 分) Given some segments of rope, you are supposed to chain them into one rop ...

  10. shell命令输出

    在shell脚本中的打印输出通常会有echo和printf两种,前者会自动换行. 一.echo Shell 的 echo 指令与 PHP 的 echo 指令类似,都是用于字符串的输出.您可以使用ech ...